Desktop Bevel Button

Bevel Button Library Icon

A Bevel Button is a more powerful button. It can be clicked like a standard button, but it can also contain a menu or have a wider variety of appearances, colors and icons.

With a Bevel Button you can:

• Add an image to the button
• Change the color of the button
• Control the alignment of the text and/or the positioning of the text with respect to the image
• Add a popup menu to the button
• Control the feedback the user receives when the button is clicked

Bevel Button Samples

Refer to DesktopBevelButton in the Language Reference for details on all its events, properties and methods.

Below is a list of the commonly used event, properties and methods.

Events

Pressed

This event is called when the Bevel Button is pressed.

MenuSelected

The DesktopBevelButton has a menu and the user has selected one of the items on that menu.

Properties

BevelStyle

The Bevel can be a variety of values in the Inspector, although not all types are used on all platforms:

• Small Bevel
• Normal Bevel
• Large Bevel
• Rounded Bevel (Mac-only. The same as Small Bevel on Windows and Linux.)
• No Bevel
• Round (Mac-only. Defaults to Small Bevel on Windows and Linux.)
• Large Round (Mac-only. Defaults to Small Bevel on Windows and Linux.)
• Disclosure (Mac-only. Defaults to Small Bevel on Windows and Linux.)

BackgroundColor, HasBackgroundColor, TextColor

Used to alter the default colors of the button (only for Windows and Linux).

Caption

The text that appears in the Bevel Button can be changed using the Caption property.

CaptionAlignment, CaptionPosition, CaptionDelta

These properties control the display of the Caption within the Bevel Button.

Icon, IconAlignment, IconDeltaX, IconDeltaY

These properties specify an optional Icon for the Bevel Button and its location.

Menu, MenuStyle

Used to attach a menu to the Bevel Button.

Value, ButtonStyle

The following types are available:

• Button: Behaves as a normal Button.
• Toggles: Button selection remains after it is clicked and can be toggled by repeated clicking. When selected, Value = True.
• Sticky: Button selection “sticks” after it has been clicked. When selected, Value = True.

FontName, FontSize, Bold, Italic, Underline

Controls the display of the Caption text.

Methods

AddMenu, AddMenuAt, RemoveMenuAt, Menu, RemoveMenuAt

Used to manually add MenuItems to the Bevel Button via the Menu property.

Handling Focus

When a Bevel Button gets the focus, a selection rectangle surrounds its caption. When it has the focus, the user can press the button by pressing either the Spacebar or the Enter key. Bevel Buttons can get the focus on Windows and Linux and you must set the AcceptFocus property to True to enable a BevelButton to get the focus.

Usage

Use a Bevel Button when you need more than just a simple button. As an example, say you want a button that has a drop-down menu allowing you to select a color. You would set up such a button by first setting the MenuStyle property to either Down or Right in the Inspector. Then you can add this code to its Opening event handler:

Var theMenu As New DesktopMenuItem
theMenu.AddMenu(New DesktopMenuItem("Red"))
theMenu.AddMenu(New DesktopMenuItem("Blue"))
theMenu.AddMenu(New DesktopMenuItem("Green"))
theMenu.AddMenu(New DesktopMenuItem("None"))
me.Menu = theMenu

When the user clicks one of the menu items, the MenuSelected event handler is called. The event handler is passed a parameter named selectedItem which is a DesktopMenuItem representing the selected menu item. The selectedItem's Value property provides the text of the selected menu item. In this example, a case statement in the Bevel Button's MenuSelected event to set a variable to a color based upon the user's selection of the name of a color from the BevelButton's menu:

Var selectedColor As Color
Select Case selectedItem.Value
Case "Red"
selectedColor = Color.Red
Case "Green"
selectedColor = Color.Green
Case "Blue"
selectedColor = Color.Blue
Case "None"
selectedColor = Color.White
End Select

Another common use of Bevel Buttons is to show an icon in the button, often alongside some text. This displays a red circle with the text "stop' in a BevelButton:

Var p As New Picture(32, 32)
Var g As Graphics = p.Graphics
g.DrawingColor = &cff0000
g.FillOval(4, g.Height / 4, g.Width / 2, g.Height / 2)

Me.Icon = p
Me.Caption = "Stop"

See Also

UserGuide:Desktop Button topic; DesktopBevelButton and DesktopMenuItem classes