Bryan Oakley Oct 12 2007 - I was wanting to create a text widget with rounded corners and figured I could solve this by putting it inside a ttk frame with rounded corners. The following is what I came up with.
When I put dozens of these in a canvas and scroll, I'm a bit disappointed by the visual effect (impossible to explain other than to say it looks "jittery") but the visual effect of just one or two widgets is great.
Things I don't yet understand about custom elements with tile:
My biggest surprise was that I had to add sufficient padding when packing something inside the frame. I would have thought the contents would magically appear inside the border, but if you remove the padding when packing the text widget in the frame the borders become obscured. Is this a bug in tile, or a bug in my layout code?
JE Bug in tile. The ttk::frame widget only looks at the -borderwidth and -padding widget options when determining its internal padding, it doesn't take this from the layout. I'd recommend specifying -padding on the frame widget instead of passing -padx and -pady to pack or grid; this will future-proof the code against when the bug is eventually fixed (and is a bit cleaner, too, since you don't need to worry about the frame border width when managing children).
KPV Thanks, I've been looking for something like this. However, I'm finding that if I do pack [label .f1.l -text Hello] -pady 30 -padx 30 then the background of the label doesn't match the background of the frame. This is on Windows XP.
Bryan Oakley This doesn't surprise me. The code assumes (requires?) you set the background to white since that is the color used in the image for the frame to get a decent shadow effect. This code isn't a final solution, just an experiment. There's still much about ttk widgets I do not know.
package require Tk 8.5
proc main {} {
ttk::style element create RoundedFrame image \
{frameBorder focus frameFocusBorder} \
-border 16 -sticky nsew
ttk::style layout RoundedFrame {
RoundedFrame -sticky nsew
}
ttk::frame .f1 -style RoundedFrame
text .f1.t -borderwidth 0 -height 8
pack .f1.t -side top -fill both -expand true -padx 8 -pady {8 12}
bind .f1.t <FocusIn> [list .f1 state focus]
bind .f1.t <FocusOut> [list .f1 state !focus]
ttk::frame .f2 -style RoundedFrame
text .f2.t -borderwidth 0 -height 8
pack .f2.t -side top -fill both -expand true -padx 8 -pady {8 12}
bind .f2.t <FocusIn> [list .f2 state focus]
bind .f2.t <FocusOut> [list .f2 state !focus]
pack .f1 -side top -fill x -padx 10 -pady 10
pack .f2 -side top -fill x -padx 10 -pady 10
. configure -background white
}
image create photo frameFocusBorder -data {
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
Ry/99NIz//oGrZpUUEAAOw==
}
image create photo frameBorder -data {
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
}
mainJOB Thank's Bryan for this code snippet. Looks nice, for a 1st test I tweaked the code a bit to allow testing under 8,4+tile:
proc main {} {
if {[regexp "8.4" $::tk_version] != 0} {
style element create RoundedFrame image frameBorder \
-border 20 -sticky nsew \
-map [list {focus} frameFocusBorder]
style layout RoundedFrame {
RoundedFrame -sticky nsew
}
} else {
ttk::style element create RoundedFrame image \
{frameBorder focus frameFocusBorder} \
-border 16 -sticky nsew
ttk::style layout RoundedFrame {
RoundedFrame -sticky nsew
}
}
ttk::frame .f1 -style RoundedFrame
text .f1.t -borderwidth 0 -height 8 \
-bg white -highlightthickness 0
pack .f1.t -side top -fill both -expand true -padx 8 -pady {8 12}
bind .f1.t <FocusIn> [list .f1 state focus]
bind .f1.t <FocusOut> [list .f1 state !focus]
ttk::frame .f2 -style RoundedFrame
text .f2.t -borderwidth 0 -height 8 \
-highlightthickness 0
pack .f2.t -side top -fill both -expand true -padx 8 -pady {8 12}
bind .f2.t <FocusIn> [list .f2 state focus]
bind .f2.t <FocusOut> [list .f2 state !focus]
pack .f1 -side top -fill x -padx 10 -pady 10
pack .f2 -side top -fill x -padx 10 -pady 10
. configure -background white
}firetcl This trick show how to add color to a frame:
frame .frame1 -highlightbackground green -highlightcolor green -highlightthickness 1 -width 100 -height 100 -relief solid -bd 0 entry .frame1.entry -text jeje pack .frame1 .frame1.entry pack propagate .frame1 0 frame .frame2 -highlightbackground red -highlightcolor red -highlightthickness 1 -width 100 -height 100 -relief solid -bd 0 entry .frame2.entry pack .frame2 .frame2.entry pack propagate .frame2 0