Shaped Buttons

See Blt Tile.

blt::tile:: includes a collection of widgets (button checkbutton radiobutton label) that extend Tk to add shape support. The main use for this is shaped buttons, however, any widget can have a shaped frame by packing it into a label.

blt::tile widgets support the following options (in addition to the standard Tk ones):

Option	Description
-innerbg	The background color inside of the shape.
-innertile	The tile image for inside of the shape.
-activetile	The tile image when state is active.
-disabledtile	The tile image when state is disabled.
-shape	The button shape, one of: rounded, tube or oval.
-radius	For rounded buttons, the radius of the corner curves.
-splinesteps	Steps to use in smoothing (same as the canvas polygon).
-outline	Color of shape outline (same as the canvas polygon).
-linewidth	Width of the outline (same as canvas polygon -width).
-shadow	Drop shadow support for text
-winshadow	Drop shadow support for shape
-rotate	Support for rotating text in degrees, eg. 90, 180.
-checksize	Specify the size of check/radio button indicator.
-icons	Give a list of 0, 2 or 3 images to use for the indicators.
-bdimage	A border image that resizes to fit the widget
-bdhalo	The number of pixels to preserve in -bdimage

Here is the shapedbutton.tcl example that defines a large number of shaped buttons, all packed in a single toplevel shaped label:

The above can be run using: wize / Gui/Shapedbutton.

Shape selection: -shape

The -shape option supports shaped buttons/labels. Three shapes are available: rounded, tube, and oval. In addition, you can:

set -splinesteps to 1 for geometric shapes
set -splinesteps to 0 for a square.
set the button outline color with -outline
use -radius with rounded to sharpen corners.
Use -winshadow to give shapes 3D relief.

Indicator Images: -icons

The -icons option lets you use a single statement to override the default indicators used for check and radio buttons. Give a list of 0, or 2-9 images to use for the indicators. The first three are for normal,selected,tristate. The next three repeat but for the active state. The next three repeat but for the disabled state.

Indicators can be globally overriden with:

  option add *Checkbutton.icons [list $imgnormal $imgcheck $imgtristate]

This is easier than setting the 5 options -image, -selectimage, -tristateimage, -indicatoron and -compound. It also leaves -image available for the user.

Window Shadow: -winshadow

The -winshadow option adds a drop shadow to a button/label. It takes 3 arguments that describe a color gradient: color1 color2 width. The shapedbutton.tcl screenshot above demonstrates the results.

Border Image: -bdimage

A border image is an image that is dynamically expanded/resized (with borders preserved) to fit the current size of the widget. The image simply provides decoration for the outside of the widget rectangle. Normally 16 pixels of the border are preserved, but -bdhalo can change this, or set to -1 center the image.

Following is an example with a bunch of buttons using -bdimage:

And here is the code:

#!/usr/bin/env wize

set bdimg [image create photo -data {
        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
}]

namespace import -force ::blt::tile::*
option add *highlightThickness 0
option add *Label.borderWidth 4
option add *Label.bdImage $bdimg
font conf TkDefaultFont -family Verdana -size 15 -weight bold
set pad 5

pack [frame .f -bg white] -fill x
foreach m {File Edit Commands Settings Help } {
   pack [button .f.b$m -bdimage $bdimg -text $m] -side left
}

pack [label .l2] -fill x -side bottom
pack [label .l1] -fill both -expand y

text .l1.t -height 12 -bd 0
pack .l1.t -padx $pad -pady $pad -fill both -expand y

entry .l2.e -bd 0
pack .l2.e -padx $pad -pady $pad -fill x

.l1.t insert end "Here is a Text widget packed into a blt::tile::label "
.l1.t insert end "using -bdimage\nto provide shaped borders"
.l2.e insert end "ditto with an entry widget..."

(Note -bdimage is incompatible with -shape.)

Shaped in Gui

The use of shape widgets can be enabled in Gui by using -blt, either in options or attributes.

{options - -blt 1} {}

{style} {
  Toplevel {
     @defgradients {
         bspl { SkyBlue SteelBlue -width 60 -height 10 -type split -rotate 90 }
         spl! { SteelBlue SkyBlue -width 33 -height 10 -type split -rotate 90 }
     }
   }
   Button { -font "Courier -18 bold" }
  .txtfr { -shape rounded -innerbg White -outline SteelBlue -linewidth 4}
  .txtwin { -bd 0 -highlightth 0 }
  @bspl { -bdimage ^bspl -bdhalo -1 }
  @spl  { -shape rounded -innertile ^spl! -outline Blue}
}
{Toplevel +} {
    {Frame + -subpos l -subattr {-gid spl}} {
       Button File Button Edit Button Options Button Quit
    }
    {Frame + -subpos l -subattr {-gid bspl}} {
       Button File Button Edit Button Options Button Quit
    }
    {Frame + -blt 1 -id txtfr} {
       {Text + -id txtwin} {}
    }
}

In the above, Button implicitly uses blt, while Frame requires -blt to override the tk::frame with blt::label. Here is the screenshot:

PDQI
	Wize / Shaped Buttons	Search Print Login