[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
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Collapse]Ribbon, Bars and Menu
   [Expand]Common Features
    [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
     Saving and Restoring a Bar Layout
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [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
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[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 Bars UI Containing a Sub-menu and Embedded Editor Using the BarManager Component

This topic shows how to create a Toolbar UI with sample bar items from scratch. Bars will contain a submenu and a text editor. The submenu will contain a regular button and a check button:

In this tutorial, you will not use the Instant Layout Assistant, which allows you to create a complete Toolbar UI with a few clicks. The Instant Layout Assistant is available starting with Visual Studio 2012.

Expanded Walkthrough

  1. Create a new project

    Create a new WPF Application, and specify "CreateSimpleBarLayout" as the project name. Open the Window1.xaml file in the Designer.

  2. Add a BarManager

    Drop the BarManager component from the Toolbox to the window. The BarManager is a container for bar containers and custom controls. This is the component you work with to add bars to your application.

    In XAML, remove setters for the BarManager.Width and BarManager.Height properties, if any. Then set the BarManager.Margin property to 12. This will make the BarManager occupy the entire area of the window with an empty space around it.

    Your XAML may look like the following markup. (If not, you can overwrite your code with the code below.)

    You can see that the BarManager contains three empty bars (mainMenuBar, bar1 and statusBar), which were automatically created when the BarManager was dropped onto the window.

  3. Specify the controls displayed in the client area of the BarManager

    Add a standard DockPanel object to the BarManager, to occupy its client area. You can add custom controls to the DockPanel. In the following example, a RichTextBox control is added.

  4. Add a sub menu item to the bar

    In the designer, select bar1 to access its smart tag. Click the smart tag to open the Bar Tasks pane.

    Click the dropdown button in the Add combo box, and select BarSubItem.

    Next, click the BarSubItem button to add a new submenu to the selected bar (bar1):

    This action creates a BarSubItem object within the BarManager.Items collection, and adds a link to this item to the bar.

  5. Customize the newly created sub menu

    Select the barSubItem1 object in the designer and click its smart tag.

    In the invoked Tasks pane, set the item caption to the "Edit" string from the Content property.

    Items can be added to the submenu via the Add command at the top of the Tasks pane. In this example, two items will be added.

    First, a regular button is added. Ensure that the BarButtonItem is selected in the Add combo box, and then click this button.

    To add a check button, click the dropdown arrow in the Add combo box…

    …and select the BarCheckItem option in the dropdown list. Then click the BarCheckItem button.

    These two actions add BarButtonItem and BarCheckItem objects to the BarManager.Items collection, and add links to these buttons in the BarSubItem.

  6. Customize the submenu items

    Although items added to the submenu are hidden at design time, customization smart tags are displayed for them in the designer when you select these objects in XAML. The smart tags are displayed at the top-right corner of the BarManager control.

    To display a smart tag for the hidden barButtonItem1, position the caret inside the following statement in XAML:

    Now click the smart tag that will be displayed to open the Tasks pane.

    Change the item's Content to "Copy". To assign an image to the item, click the ellipsis button ("...") for the Glyph property. This opens a DX Image Gallery, allowing you to select one of the predefined images.

    Use the search box at the top of the gallery to filter images by the "copy" text. Select the small "Copy" image and click OK.

    As a result, the DevExpress.Images assembly is added to the project, and the selected image is assigned to the button item.

    In the same way, customize the hidden barCheckItem1 object. Position the caret within the XAML definition statement for the barCheckItem1 object. In the pane invoked by the smart tag, set the item's Content to "Bold". Click the ellipsis button ("...") for the Glyph property to invoke the DX Image Gallery, and locate and choose a small "Bold" image.


    Remarks: In the previous step a user picks a small "Copy" image. Now, it's needed to pick a small image named "Bold".

    The code that defines the barButtonItem1 and barCheckItem1 objects will appear as follows.

  7. Add a bar item representing an inplace TextEdit editor

    Select the top bar (mainMenuBar) in the designer and click the smart tag.

    Click the dropdown arrow in the Add combo box, to open a list of available item types, and select the BarEditItem -> BarTextEditItem option. Now click the BarTextEditItem button, to add an inplace text editor to the bar.

    A BarEditItem object displaying an embedded editor is added to the BarManager.Items collection in XAML.

    A link to the newly created item is also added to the mainMenuBar.

    The TextEditSettings object assigned to the BarEditItem.EditSettings property specifies the type of the inplace editor, and allows you to customize the editor's settings.

    To hide the caption for the barEditItem1 object, remove the setter of the Content property. To specify the embedded editor's width and value, use the BarEditItem.EditWidth and BarEditItem.EditValue properties, respectively.

  8. Subscribing to bar item events

    To handle bar item clicks and changes in values, the following events need to be subscribed.

    To subscribe to the ItemClick event for barButtonItem1, position the caret inside the object's XAML definition. The properties of the object are now accessible via the Properties window. Click the Events tab in the Properties window, and subscribe to the ItemClick event by double-clicking within the corresponding edit box.

    In the same manner, subscribe to the events of barCheckItem1 and barEditItem1. Switch to the Window1.xaml.cs file and implement the event handlers according to your logic.

  9. Run the application and view the result

Expanded Complete Code

In this example, bars containing a sub-menu and embedded text editor are created.

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