Version 0 of Round Corner Text Widget

Updated 2007-10-05 12:05:24 by matben

Just wanted to share some cool text widgets with rounded corners. There are a lot of tricks you could use tile for which is not immediately apparent. In this case i use my tkpath package http://tclbitprint.sf.net/ to make the images but you can make them separately. I think there is a problem on XP using GDI+ where I didn't manage to add an alpha layer to the offscreen pixmaps, but since it works in the canvas using which is using offscreen areas for drawing, I have made a mistake somewhere when creating the surfaces.

These examples are optimized for Mac. First two with slightly different appearance:

The second text widget also draws a focus "rectangle":

---

        package require tkpath

        set str "All MSN Messenger wannabies:\nDid you know how to make text widgets with rounded corners?"
        set size 32
        set tkpath::antialias 1
        set S [::tkpath::surface new $size $size]
        $S create prect 2 2 30 30 -rx 10 -fill white -stroke "#a19de2" \
          -strokewidth 2
        set image [$S copy [image create photo]]
        $S destroy

        style element create RR.background image $image \
          -border {12 12 12 12} -padding {0} -sticky news                    
        style layout RR.TEntry {
            RR.background -sticky news -children {
                Entry.padding -sticky news -children {
                    Entry.textarea -sticky news
                }
            }
        }
        style map RR.TEntry  \
          -foreground {{background} "#363636" {} black}

        toplevel .tt
        set f .tt.f
        ttk::frame $f -padding 20
        pack $f -fill x
        ttk::frame $f.cont -style RR.TEntry
        pack $f.cont 
        text $f.t -wrap word -borderwidth 0 -highlightthickness 0 \
          -width 40 -height 6
        bind $f.t <FocusIn>  [list $f.cont state focus]
        bind $f.t <FocusOut> [list $f.cont state {!focus}]
        pack $f.t -in $f.cont -padx 6 -pady 6 -fill both -expand 1

        $f.t insert end $str

        # WIth Aqua style focus ring.
        set S [::tkpath::surface new $size $size]
        $S create prect 3 3 29 29 -rx 10 -fill white -stroke "#c3c3c3" \
          -strokewidth 2
        set imborder [$S copy [image create photo]]
        $S destroy

        set S [::tkpath::surface new $size $size]
        $S create prect 3 3 29 29 -rx 10 -fill white -stroke "#c3c3c3" \
          -strokewidth 2
        $S create prect 0.5 0.5 31.5 31.5 -rx 12 -stroke "#afc9e1"
        $S create prect 1.5 1.5 30.5 30.5 -rx 11 -stroke "#93b8d9"
        $S create prect 2.5 2.5 29.5 29.5 -rx 10 -stroke "#81a7ca"
        set imfocus [$S copy [image create photo]]
        $S destroy

        style element create RRAqua.background image $imborder \
          -border {12 12 12 12} -padding {0} -sticky news \
          -map [list {focus} $imfocus]
        style layout RRAqua.TEntry {
            RRAqua.background -sticky news -children {
                Entry.padding -sticky news -children {
                    Entry.textarea -sticky news
                }
            }
        }
        style map RRAqua.TEntry  \
          -foreground {{background} "#363636" {} black}

        set f .tt.aqua
        ttk::frame $f -padding 20
        pack $f -fill x
        ttk::frame $f.cont -style RRAqua.TEntry
        pack $f.cont
        text $f.t -wrap word -borderwidth 0 -highlightthickness 0 \
          -width 40 -height 6 -font {{Lucida Grande} 16}
        bind $f.t <FocusIn>  [list $f.cont state focus]
        bind $f.t <FocusOut> [list $f.cont state {!focus}]
        pack $f.t -in $f.cont -padx 7 -pady 7 -fill both -expand 1

        $f.t insert end $str