How to: Create a Toolbar UI at Design Time

Aug 01, 2019
8 minutes to read

This topic shows how to create a Toolbar UI consisting of a main menu, toolbar and status bar with sample bar items from scratch.

dx-bars-getting-started-70-result

The following tasks are demonstrated:

Using the MainMenuControl, ToolBarControl and StatusBarControl for creating three main toolbar types.
Adding regular buttons, an in-place editor and static item.
Creating a check button group (radio group).
Quick bar customization using smart tags.
Specifying images for bar items using the DX Image Gallery.

No business logic is implemented for bar items in this tutorial. To learn how to implement business logic using the MVVM approach, see the following example: How to: create a Bars UI using the MVVM design pattern.

The tutorial consists of the following sections:

Set up the paint theme and a layout of controls
Add a main menu and a toolbar
Add a sub-menu to the main menu bar
Customize the sub-menu
Add a check button group (radio group) to the toolbar
Add an in-place combo-box editor to the toolbar
Add a status bar with a static item

Walkthrough

Set up the paint theme and a layout of controls

Create a new WPF Application, and specify “CreateToolbarLayout” as the project name. Open the Window1.xaml file in the Designer.

Select the Window and click its smart tag. Select the “Office 2013” paint theme using the ApplicationTheme setting.

The Window contains an empty Grid. Add three rows to the Grid.RowDefinitions collection, as follows. The top and bottom rows will accommodate toolbar controls created in this example.
- XAML
```
<Window x:Class="CreateToolbarLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    </Grid>
</Window>
```
Add a main menu and a toolbar

Drop the MainMenuControl to the Window. Alignment and size constraints may be set for the created main menu. In this case, remove these settings from XAML. You should have the following code, as a result:
- XAML
```
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <dxb:MainMenuControl/>
</Grid>
```
Drop the ToolBarControl to the Window. Remove the alignment settings that are set for it, if any.
- XAML
```
<dxb:MainMenuControl/>
<dxb:ToolBarControl/>
```
Currently, the created toolbar may visually overlap the main menu. This can be fixed as follows.

In XAML, wrap the created main menu and toolbar in a BarContainerControl. Set the Grid.Row property to 0 for this Bar Container.
- XAML
```
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <dxb:BarContainerControl Grid.Row="0">
        <dxb:MainMenuControl/>
        <dxb:ToolBarControl/>
    </dxb:BarContainerControl>
</Grid>
```
The Bar Container arranges its child bars next to each other, without an overlap. A ToolBarControl placed inside a Bar Container can be dragged and float at runtime.

Tip
You can add a BarContainerControl from the Toolbox first, and then add toolbars to it.
Add a sub-menu to the main menu bar

Select the main menu bar and click its smart tag.

The Add . . . link at the top of the popup pane allows you to add various bar items to the selected toolbar. Currently, this link displays the Add BarButtonItem text, which means that this action will add a regular button (BarButtonItem) to the toolbar. To add a sub-menu instead of a regular button, click the button, displayed to the right of the Add BarButtonItem link, and select BarSubItem.

Ensure that Add BarSubItem text is displayed by the link, and then click this link to add a sub-menu. This adds a BarSubItem object to the main menu.
- XAML
```
<dxb:MainMenuControl>
    <dxb:BarSubItem Content="BarSubItem"/>
</dxb:MainMenuControl>
```
Customize the sub-menu

Select the BarSubItem and click its smart tag.

In the invoked popup pane, set the Content property to “File”. Then, add two buttons to this sub-menu by clicking the Add BarButtonItem link twice. This generates the following XAML.
- XAML
```
<dxb:MainMenuControl>
    <dxb:BarSubItem Content="File">
        <dxb:BarButtonItem Content="BarButtonItem"/>
        <dxb:BarButtonItem Content="BarButtonItem"/>
    </dxb:BarSubItem>
</dxb:MainMenuControl>
```
A sub-menu’s child buttons are not visible at design time, and thus they cannot be selected on the design surface. However, these buttons still provide smart tags, which are displayed on the design surface when you select a corresponding object in XAML.

In XAML, focus the first child of the BarSubItem. The smart tag for this BarButtonItem object will be displayed in the designer.

Click this smart tag. In the popup pane, set Content to “Open” and click the ellipses button (…) for the Glyph property.

This opens the DX Image Gallery, where you can locate an appropriate image for the button from among predefined images.

Select an image for the button and click OK.

In the same manner, specify the new content (“Close”) and glyph for the second button. You will have the following XAML as a result.
- XAML
```
<dxb:MainMenuControl>
    <dxb:BarSubItem Content="File">
        <dxb:BarButtonItem Content="Open" Glyph="{dx:DXImage Image=Open_16x16.png}"/>
        <dxb:BarButtonItem Content="Close" Glyph="{dx:DXImage Image=Close_16x16.png}"/>
    </dxb:BarSubItem>
</dxb:MainMenuControl>
```
If you run the application now, you will be able to see the created Open and Close buttons residing in the File sub-menu.

Note
To provide actions for buttons, you can handle the BarItem.ItemClick event or specify a command with the BarItem.Command property.

If buttons need to be identified, specify the x:Name properties for the objects.
Add a check button group (radio group) to the toolbar

The check buttons (BarCheckItem) created in this section will be used to specify the text alignment (left-aligned, centered and right-aligned). When a single button is checked, the other two buttons should be unchecked. To accomplish this, the buttons need to be combined into the same group, using the BarCheckItem.GroupIndex property.

Select the second toolbar in the designer and click its smart tag. In the popup pane, select the BarCheckItem type using the button, and click the Add BarCheckItem link three times. This adds three check buttons to the toolbar.
- XAML
```
<dxb:ToolBarControl>
    <dxb:BarCheckItem Content="BarCheckItem"/>
    <dxb:BarCheckItem Content="BarCheckItem"/>
    <dxb:BarCheckItem Content="BarCheckItem"/>
</dxb:ToolBarControl>
```
Select the first check button in the designer and click its smart tag. In the popup pane, set the BarCheckItem.GroupIndex property to 1, and set the button’s glyph to an appropriate image using the DX Image Gallery, as shown above.

In the same manner, set the BarCheckItem.GroupIndex property for the other two check buttons to 1. Specify images for them with the Glyph property. You will have the following XAML as a result.
- XAML
```
<dxb:ToolBarControl>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignLeft_16x16.png}"/>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignCenter_16x16.png}"/>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignRight_16x16.png}"/>
</dxb:ToolBarControl>
```
Note
To provide actions for buttons, you can handle the BarCheckItem.CheckedChanged event or specify a command with the BarItem.Command property.

If buttons need to be identified, specify the x:Name properties for the objects.

Add an in-place combo-box editor to the toolbar

Select the toolbar in the designer and click its smart tag. In the popup pane, click the dx-bars-getting-started-99-smart-tag-pane-switch-baritem-type-button button and select BarEditItem -> BarComboBoxEditItem.

dx-bars-getting-started-40-toolbar-Select-Combobox

Add a combo-box in-place editor to the toolbar, by clicking the Add BarComboBoxEditItem link.

dx-bars-getting-started-41-toolbar-Add-ComboboxEditItem.png

This creates a BarEditItem object in XAML.

XAML

<dxb:ToolBarControl>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignLeft_16x16.png}"/>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignCenter_16x16.png}"/>
    <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignRight_16x16.png}"/>
    <dxb:BarEditItem Content="BarEditItem">
        <dxb:BarEditItem.EditSettings>
            <dxe:ComboBoxEditSettings/>
        </dxb:BarEditItem.EditSettings>
    </dxb:BarEditItem>
</dxb:ToolBarControl>

Select the created BarEditItem object to open its smart tag pane. Set the Content property to “Font Size:” and the EditWidth property to 100.

dx-bars-getting-started-43-toolbar-ComboboxEdit-smart-tag

In XAML, set the x:Name property for the BarEditItem object to “beiFontSize”. You may also want to provide lookup values for the combo-box editor. This can be done as follows:

XAML

<dxb:BarEditItem x:Name="beiFontSize" Content="Font Size" EditWidth="100">
    <dxb:BarEditItem.EditSettings>
        <dxe:ComboBoxEditSettings>
            <dxe:ComboBoxEditSettings.Items>
                <dxe:ComboBoxEditItem Content="10"/>
                <dxe:ComboBoxEditItem Content="11"/>
                <dxe:ComboBoxEditItem Content="12"/>
            </dxe:ComboBoxEditSettings.Items>
        </dxe:ComboBoxEditSettings>
    </dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>

Note

Lookup values for an in-place combo-box editor can also be provided with the LookUpEditSettingsBase.ItemsSource inherited property.

To get the currently selected value in an in-place editor, or to set the in-place editor’s value, use the BarEditItem.EditValue property.

If you run the application now, you will be able to see the radio group in action and select values in the combo-box in-place editor.

Add a status bar with a static item

Drop the StatusBarControl to the Window. Remove its size and alignment settings from XAML, if any. Set its Grid.Row property to 2. The status bar will be displayed at the bottom of the Window.
- XAML
```
<dxb:BarContainerControl Grid.Row="0">
    <dxb:MainMenuControl. . .>
    <dxb:ToolBarControl. . .>
</dxb:BarContainerControl>

<dxb:StatusBarControl Grid.Row="2"/>
```
Select the status bar in the designer and click its smart tag. In the invoked pane, click the button and select BarStaticItem in the popup menu.

Click the Add BarStaticItem link to add a new BarStaticItem object to the status bar.
- XAML
```
<dxb:StatusBarControl Grid.Row="2">
    <dxb:BarStaticItem Content="BarStaticItem"/>
</dxb:StatusBarControl>
```
The created BarStaticItem object is intended to display the font size selected in the beiFontSize in-place combo-box editor. Select the BarStaticItem object in the designer and click its smart tag. In the popup pane, click the button to the right of the Content property. In the invoked window, bind to the EditValue property of the beiFontSize object.

The following XAML code will be generated.
- XAML
```
<dxb:StatusBarControl Grid.Row="2">
    <dxb:BarStaticItem Content="{Binding EditValue, ElementName=beiFontSize}"/>
</dxb:StatusBarControl>
```
Run the application. Once you select a value in the combo-box, it is reflected by a static item in the status bar.

Complete Code

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        x:Class="CreateToolbarLayout.MainWindow"
        Title="MainWindow" Height="141" Width="406">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dxb:BarContainerControl Grid.Row="0" >
            <dxb:MainMenuControl>
                <dxb:BarSubItem Content="File">
                    <dxb:BarButtonItem Content="Open" Glyph="{dx:DXImage Image=Open_16x16.png}"/>
                    <dxb:BarButtonItem Content="Close" Glyph="{dx:DXImage Image=Close_16x16.png}"/>
                </dxb:BarSubItem>
            </dxb:MainMenuControl>
            <dxb:ToolBarControl>
                <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignLeft_16x16.png}"/>
                <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignCenter_16x16.png}"/>
                <dxb:BarCheckItem Content="BarCheckItem" GroupIndex="1" Glyph="{dx:DXImage Image=AlignRight_16x16.png}"/>
                <dxb:BarEditItem x:Name="beiFontSize" Content="Font Size" EditWidth="100">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:ComboBoxEditSettings>
                            <dxe:ComboBoxEditSettings.Items>
                                <dxe:ComboBoxEditItem Content="10"/>
                                <dxe:ComboBoxEditItem Content="11"/>
                                <dxe:ComboBoxEditItem Content="12"/>
                            </dxe:ComboBoxEditSettings.Items>
                        </dxe:ComboBoxEditSettings>
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
            </dxb:ToolBarControl>
        </dxb:BarContainerControl>

        <dxb:StatusBarControl Grid.Row="2">
            <dxb:BarStaticItem Content="{Binding EditValue, ElementName=beiFontSize}"/>
        </dxb:StatusBarControl>
    </Grid>

</Window>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Walkthrough

Complete Code