This example shows how to add UXSplitButton and UXDropDownButton to UXToolBar.
Example
Description
UXToolBarButton implements a hybrid content model that exposes both Button and ItemsControl characteristic. This allows for more solid button architecture that streamlines various type of buttons into a single definition, which makes UI development much easier and more efficient. To learn more about this content model, see Content Model Overview.
As the result of the hybrid content model implementation, UXToolBarButton provides four types of button that you can apply through ButtonType property, such as discussed in the following.
- Button
Represents a standard command button.
- DropdownButton
Represents a button that displays dropdown menu when clicked, which can contain a collection of menu items and nested menu items similar to UXContextMenu.
- SplitButton
Represents a combination of command button and a dropdown menu. This type of button typically provides users with a default command that executed when the command part of the button is clicked, while at the same time allowing users to choose alternative commands through the dropdown arrow. Similar to the DropdownButton, you can also define a collection of menu items and nested menu items as in UXContextMenu.
- Custom
Represents a custom button that can be used to contain any UIElement or controls. With this type, the default layout properties such as margin and padding as well as the UI behaviors would be disabled. Consequently, this type is ideal to host custom controls such as text box, combo box, date picker and others.
Code
| XAML |  Copy Code |
|---|---|
<Intersoft:UXToolBar> <Intersoft:UXToolBarButton Content="Save" ButtonType="SplitButton"> <Intersoft:UXMenuItem Header="Open" /> <Intersoft:UXMenuItem Header="Save & Exit" /> <Intersoft:UXMenuItem Header="Exit" /> </Intersoft:UXToolBarButton> <Intersoft:UXToolBarButton Content="IM" ButtonType="DropdownButton"> <Intersoft:UXMenuItem Header="Yahoo" /> <Intersoft:UXMenuItem Header="Msn" /> <Intersoft:UXSeparator /> <Intersoft:UXMenuItem Header="Logout" /> </Intersoft:UXToolBarButton> </Intersoft:UXToolBar> |
|