Photo Frames

Difference between version 3 and 4 - Previous - Next
[ABU] 11 Feb 2021

Based on some previous experiments on this wiki, I've tried to setup a custom style for the ttk::label widget

With just few lines of code, and a well crafted frame picture, here is a result's preview.
[image photoframe.preview]


The key of this trick is this frame picture
[image photoframe.bg]

It's a .png image with transparent and semitransparent pixels for blending
the shadows on any surrounding background (provided it is an uniform background).

Here is the full code
 
===tcl
## Setup of a custom ttk::style (PhotoFrame)
## -----------------------------------------## Warning: on MacOS this does not work if the current theme is 'Aqua'
## You should set a different theme
##    ttk::style theme use classic

# You should download and save "photoframe.png" from here [https://wiki.tcl-lang.org/image/image+photoframe%2Ebg]
set photoframe [image create photo -file "photoframe.png"]

ttk::style element create PhotoFrameElem image \
 $photoframe -sticky nsew \
 -border {80 40 80 100} \
 -padding {25 20 27 35}

ttk::style layout PhotoFrame {
    PhotoFrameElem -sticky nsew \
    -children {Label.label -sticky nsew} \
    }

# optional: load package Img if you want to load jpeg 
package require img::jpeg
===

===tcl
## Create a (standard) ttk::label with an embedded picture

  # load the picture (.. use the image you want .. ) 
set myImg [image create photo -file "africanmask.png"]
ttk::label .pic -image $myImg

pack .pic -padx 100 -pady 100
[image photoframe.step1]
===

===tcl
## change the style of the .pic widget

.pic configure -style PhotoFrame
[image photoframe.step2]
===

===tcl
## change the window's background
set bg lightyellow
. configure -background $bg
## and adapt the .pic's background to the same color
.pic configure -background $bg
[image photoframe.step3]
===

That's all.

<<categories>> GUI