How to: embed editors into a bar

• Aug 01, 2019
• 2 minutes to read

This example shows how to embed in-place editors into a bar using BarEditItem objects. Two editors (DateEdit and SpinEdit) are added with the BarEditItem.EditSettings property. Values for the editors are provided using the EditValue property.

The following image shows the result:

View Example

Window2.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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        x:Class="CreateBarEditItems.Window2"
        Title="Window2" Height="300" Width="300">
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>


        <dxb:BarContainerControl Grid.Row="0">
            <dxb:ToolBarControl>
                <!--Create a DateEdit and SpinEdit in-place editors -->
                <dxb:BarEditItem x:Name="editItemDateEdit1" Content="Date" EditValue="01/01/2010">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:DateEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
                <dxb:BarEditItem x:Name="editItemSpinEdit1" Content="Value" EditValue="123" EditWidth="50">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:SpinEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>

            </dxb:ToolBarControl>
        </dxb:BarContainerControl>



        <DockPanel Name="dockPanel1" LastChildFill="False" VerticalAlignment="Stretch">
            <!--Create a BarContainerControl that will display bars at the top of the DockPanel-->
            <dxb:BarContainerControl x:Name="TopBarContainer" DockPanel.Dock="Right" ContainerType="Right">
            </dxb:BarContainerControl>
        </DockPanel>





    </Grid>

</Window>

Window1.xaml

<Window x:Class="CreateBarEditItems.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" Height="300" Width="400" 
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <dxb:BarContainerControl ContainerType="Top" Grid.Row="0">
            <dxb:ToolBarControl Caption="Settings Bar" RotateWhenVertical="True">
                <!--Create a DateEdit and SpinEdit in-place editors -->
                <dxb:BarEditItem x:Name="editItemDateEdit1" Content="Date" EditValue="01/01/2020" EditWidth="100">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:DateEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
                <dxb:BarEditItem x:Name="editItemSpinEdit1" Content="Value" EditValue="123" EditWidth="100">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:SpinEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
            </dxb:ToolBarControl>
        </dxb:BarContainerControl>

        <DockPanel Grid.Row="1" LastChildFill="True">
            <dxb:BarContainerControl ContainerType="Left" DockPanel.Dock="Left"/>
            <dxb:BarContainerControl ContainerType="Right" DockPanel.Dock="Right"/>
            <RichTextBox/>
        </DockPanel>

        <dxb:BarContainerControl ContainerType="Bottom" Grid.Row="2">
            <dxb:StatusBarControl Caption="Status Bar"/>
        </dxb:BarContainerControl>
    </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CreateBarEditItems {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}

Window2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace CreateBarEditItems {
    /// <summary>
    /// Interaction logic for Window2.xaml
    /// </summary>
    public partial class Window2 : Window {
        public Window2() {
            InitializeComponent();
        }
    }
}