[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Collapse]Ribbon, Bars and Menu
   [Expand]Common Features
   [Collapse]Bars
    [Collapse]Getting Started
      How to: Create a Bars UI Containing a Sub-menu and Embedded Editor Using the BarManager Component
      How to: Create a Toolbar UI at Design Time
    [Expand]Bar Layout
    [Expand]Populating Bars
     Bar Actions
    [Expand]Runtime Customization
    [Expand]Examples
     Saving and Restoring a Bar Layout
   [Expand]Ribbon
   [Expand]Menus
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Create a Toolbar UI at Design Time

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

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:

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

Expanded Walkthrough

  1. 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.

  2. 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:

    Drop the ToolBarControl to the Window. Remove the alignment settings that are set for it, if any.

    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.

    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.

  3. 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.

  4. 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.

    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.

    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.

  5. 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.

    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.

    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.

  6. 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 button and select BarEditItem -> BarComboBoxEditItem.

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

    This creates a BarEditItem object in XAML.

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

    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:

    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.

  7. 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.

    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.

    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.

    Run the application. Once you select a value in the combo-box, it is reflected by a static item in the status bar.

Expanded Complete Code

Is this topic helpful?​​​​​​​