[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 [list .f1 state focus] bind .f1.t [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 [list .f2 state focus] bind .f2.t [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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 } main ====== ---- [JOB] 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 [list .f1 state focus] bind .f1.t [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 [list .f2 state focus] bind .f2.t [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 ====== <> Widget