How to: Create a Bars UI Containing a Sub-menu and Embedded Editor Using the BarManager Component

  • 8 minutes to read

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:

CreateSimpleBarLayout

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

    <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" 
            x:Class="CreateSimpleBarLayout.MainWindow"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
    
            <dxb:BarManager Margin="12">
                <dxb:BarManager.Bars>
                    <dxb:Bar x:Name="mainMenuBar" Caption="Main Menu" IsMainMenu="True">
                        <dxb:Bar.DockInfo>
                            <dxb:BarDockInfo ContainerType="Top"/>
                        </dxb:Bar.DockInfo>
                    </dxb:Bar>
                    <dxb:Bar Caption="bar1">
                        <dxb:Bar.DockInfo>
                            <dxb:BarDockInfo ContainerType="Top"/>
                        </dxb:Bar.DockInfo>
                    </dxb:Bar>
                    <dxb:Bar x:Name="statusBar" Caption="Status Bar" IsStatusBar="True">
                        <dxb:Bar.DockInfo>
                            <dxb:BarDockInfo ContainerType="Bottom"/>
                        </dxb:Bar.DockInfo>
                    </dxb:Bar>
                </dxb:BarManager.Bars>
                <Grid Background="Transparent"/>
            </dxb:BarManager>
    
        </Grid>
    </Window>
    

    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.

    <dxb:BarManager Margin="12">
        <dxb:BarManager.Bars>
        . . .
        </dxb:BarManager.Bars>
        <DockPanel >
            <RichTextBox >
                <FlowDocument>
                    <Paragraph>
                        <Run Text="RichTextBox"/>
                    </Paragraph>
                </FlowDocument>
            </RichTextBox>
        </DockPanel>
    </dxb:BarManager>
    
  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.

    Bars-GetStarted-01-Bar1-SmartTag

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

    Bars-GetStarted-05-Bar1-TaskPane-SelectBarSubItem

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

    Bars-GetStarted-06-Bar1-TaskPane-ClickBarSubItem

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

    <dxb:BarManager.Items>
        <dxb:BarSubItem x:Name="barSubItem1" Content="barSubItem1"/>
    </dxb:BarManager.Items>
    . . .
    <dxb:Bar Caption="bar1">
        <dxb:Bar.DockInfo><dxb:BarDockInfo ContainerType="Top"/></dxb:Bar.DockInfo>
        <dxb:BarSubItemLink BarItemName="barSubItem1"/>
    </dxb:Bar>
    
  5. Customize the newly created sub menu

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

    Bars-GetStarted-10-BarSubItem1-SmartTag

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

    Bars-GetStarted-11-BarSubItem1-TasksPane-ChangeContent

    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.

    Bars-GetStarted-11-BarSubItem1-TasksPane-ClickAddBarButtonItem

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

    Bars-GetStarted-11-5-BarSubItem1-TasksPane-SelectCheckItem

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

    Bars-GetStarted-12-BarSubItem1-TasksPane-ClickAddBarCheckItem

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

    <dxb:BarManager.Items>
        <dxb:BarSubItem x:Name="barSubItem1" Content="Edit">
            <dxb:BarButtonItemLink BarItemName="barButtonItem1"/>
            <dxb:BarCheckItemLink BarItemName="barCheckItem1"/>
        </dxb:BarSubItem>
        <dxb:BarButtonItem x:Name="barButtonItem1" Content="barButtonItem1"/>
        <dxb:BarCheckItem x:Name="barCheckItem1" Content="barCheckItem1"/>
    </dxb:BarManager.Items>
    
  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:

    <dxb:BarButtonItem x:Name="barButtonItem1" Content="barButtonItem1"/>
    

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

    Bars-GetStarted-20-SubMenuBarButtonItem1-TasksPane

    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.

    Bars-GetStarted-22-SubMenuBarButtonItem1-TasksPane-Glyph-OpenGallery

    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.

    Bars-GetStarted-22-SubMenuBarButtonItem1-TasksPane-Glyph-SelectCopyImage

    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.

    NOTE

    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.

    <dxb:BarButtonItem x:Name="barButtonItem1" Content="Copy" Glyph="pack://application:,,,/DevExpress.Images.v20.1;component/Images/Edit/Copy_16x16.png"/>
    <dxb:BarCheckItem x:Name="barCheckItem1" Content="Bold" Glyph="pack://application:,,,/DevExpress.Images.v20.1;component/Images/Format/Bold_16x16.png"/>
    
  7. Add a bar item representing an inplace TextEdit editor

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

    Bars-GetStarted-30-AddingBarEditItem-BarSmartTag

    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.

    Bars-GetStarted-30-AddingBarEditItem-BarSmartTag-SelectBarTextEditItem

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

    <dxb:BarEditItem x:Name="barEditItem1" Content="barEditItem1">
        <dxb:BarEditItem.EditSettings>
            <dxe:TextEditSettings/>
        </dxb:BarEditItem.EditSettings>
    </dxb:BarEditItem>
    

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

    <dxb:Bar x:Name="mainMenuBar" Caption="Main Menu" IsMainMenu="True">
        . . . 
        <dxb:BarEditItemLink BarItemName="barEditItem1"/>
    </dxb:Bar>
    

    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.

    <dxb:BarEditItem x:Name="barEditItem1" EditWidth="100" EditValue="text">
    

    Bars-GetStarted-32-AddingBarEditItem

  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.

    Bars-GetStarted-40-BarButtonItem-PropertiesWindow-EventsPage

    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

    CreateSimpleBarLayout

Complete Code

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

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports DevExpress.Xpf.Bars

Namespace CreateSimpleBarLayout
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub barButtonItem1_ItemClick(ByVal sender As Object, ByVal e As DevExpress.Xpf.Bars.ItemClickEventArgs)
            MessageBox.Show("The " & e.Item.Content.ToString() & " item has been clicked")
        End Sub

        Private Sub barCheckItem1_CheckedChanged(ByVal sender As Object, ByVal e As DevExpress.Xpf.Bars.ItemClickEventArgs)
            MessageBox.Show("The " & e.Item.Content.ToString() & " item has been toggled")
        End Sub

        Private Sub barEditItem1_EditValueChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim item As BarEditItem = TryCast(sender, BarEditItem)
            Dim newValue As Object = item.EditValue
            '...
        End Sub
    End Class
End Namespace