wpf-401563-controls-and-libraries-charts-suite-chart-control-chart-ribbon-and-toolbars.md
Chart Ribbon and Toolbars allow users to change the on-screen data range, print/export a chart, add indicators, and so on. See the Toolbar and Ribbon Commands section for a complete list of features.
This document consists of the following sections:
The chart ribbon and toolbars allow you to perform the following operations:
Chart Toolbars
Chart Ribbon (the Common tab)
Chart Ribbon (the Financial Options tab)
Invokes the Chart Designer.
Saves the chart layout to a file.
Restores the chart from a file.
Invokes the Print Preview dialog for the chart.
Shows the Print dialog.
Displays a list of available palettes.
Sets the series used to plot indicators.
Activates Trend Lines mode.
Enables Fibonacci Arcs mode.
Enables Fibonacci Fans mode.
Enables Fibonacci Retracement mode.
Turns on the mode that allows you to remove indicators. Click an indicator on the chart to remove this indicator.
Adds a technical indicator to the series selected in the Series list.
Specifies the date-time x-axis measurement unit.
Allows you to specify a visible data range.
Enables you to add a text annotation. To do this, click on the chart and type the text.
Enables you to add an image annotation. To do this, click on the chart and select an image in the invoked dialog.
Allows you to add a horizontal constant line. To create a constant line, click on the chart. Double-click the constant line’s title to edit it.
Allows you to add a vertical constant line. To create a constant line, click on the chart. Double-click the constant line’s title to edit it.
You can also add new commands to the ribbon or toolbars, and remove unnecessary options.
To generate toolbars, click the chart’s smart tag and select Create Bars :
Show the Auto-Generated Toolbar Markup
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:local="clr-namespace:ChartToolbar"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxct="http://schemas.devexpress.com/winfx/2008/xaml/charts/themekeys"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
x:Class="ChartToolbar.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="540" Width="920" Loaded="Window_Loaded">
<DockPanel>
<dxb:BarManager DockPanel.Dock="Top" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarManager}}" dxc:ChartControlBase.Chart="{Binding ElementName=chart}">
<dxb:BarManager.Bars>
<dxb:Bar x:Name="RunDesignerGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarRunDesignerGroup}}">
<dxb:BarButtonItem x:Name="RunDesignerItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RunDesignerItem}}"/>
</dxb:Bar>
<dxb:Bar x:Name="TemplatesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarTemplatesGroup}}">
<dxb:BarButtonItem x:Name="SaveAsTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SaveAsTemplateItem}}"/>
<dxb:BarButtonItem x:Name="LoadTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=LoadTemplateItem}}"/>
</dxb:Bar>
<dxb:Bar x:Name="PrintAndExportGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarPrintAndExportGroup}}">
<dxb:BarButtonItem x:Name="PrintPreviewItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintPreviewItem}}"/>
<dxb:BarButtonItem x:Name="PrintItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintItem}}"/>
<dxb:BarSubItem x:Name="ExportItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportItem}}">
<dxb:BarButtonItem x:Name="ExportToPdfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPdfItem}}"/>
<dxb:BarButtonItem x:Name="ExportToHtmlItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToHtmlItem}}"/>
<dxb:BarButtonItem x:Name="ExportToMhtItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToMhtItem}}"/>
<dxb:BarButtonItem x:Name="ExportToXlsItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsItem}}"/>
<dxb:BarButtonItem x:Name="ExportToXlsxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsxItem}}"/>
<dxb:BarButtonItem x:Name="ExportToRtfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToRtfItem}}"/>
<dxb:BarButtonItem x:Name="ExportToDocxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToDocxItem}}"/>
<dxb:BarSubItem x:Name="ExportToImageItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToImageItem}}">
<dxb:BarButtonItem x:Name="ExportToBmpItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToBmpItem}}"/>
<dxb:BarButtonItem x:Name="ExportToGifItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToGifItem}}"/>
<dxb:BarButtonItem x:Name="ExportToJpegItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToJpegItem}}"/>
<dxb:BarButtonItem x:Name="ExportToPngItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPngItem}}"/>
<dxb:BarButtonItem x:Name="ExportToTiffItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToTiffItem}}"/>
</dxb:BarSubItem>
</dxb:BarSubItem>
</dxb:Bar>
<dxb:Bar x:Name="AppearanceGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarAppearanceGroup}}">
<dxb:BarSubItem x:Name="PaletteItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PaletteItem}}"/>
</dxb:Bar>
<dxb:Bar x:Name="FinancialSeriesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialSeriesGroup}}">
<dxb:BarEditItem x:Name="SeriesSelectorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SeriesSelectorItem}}"/>
</dxb:Bar>
<dxb:Bar x:Name="FinancialIndicatorsGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialIndicatorsGroup}}">
<dxb:BarCheckItem x:Name="DisableIndicatorInteractionItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DisableIndicatorInteractionItem}}"/>
<dxb:BarCheckItem x:Name="DrawTrendLineIndicator" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawTrendLineIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciArcsIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciArcsIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciFansIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciFansIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciRetracementIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciRetracementIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="RemoveIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RemoveIndicatorItem}}"/>
<dxb:BarItemSeparator/>
<dxb:BarSubItem x:Name="AddIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=AddIndicatorItem}}"/>
</dxb:Bar>
<dxb:Bar x:Name="FinancialAxisGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialAxisGroup}}">
<dxb:BarEditItem x:Name="FinancialAxisUnitItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisUnitItem}}">
<dxb:BarEditItem.EditStyle>
<Style TargetType="{x:Type dxe:ComboBoxEdit}">
<Setter Property="SelectedIndex" Value="0"/>
</Style>
</dxb:BarEditItem.EditStyle>
<dxb:BarEditItem.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
<dxe:ComboBoxEditSettings.Items>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_day" Caption="1 day" MeasureUnit="Day" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_week" Caption="1 week" MeasureUnit="Week" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_month" Caption="1 month" MeasureUnit="Month" MeasureUnitMultiplier="1"/>
</dxe:ComboBoxEditSettings.Items>
</dxe:ComboBoxEditSettings>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
<dxb:BarEditItem x:Name="FinancialAxisPeriodItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisPeriodItem}}">
<dxb:BarEditItem.EditStyle>
<Style TargetType="{x:Type dxe:ComboBoxEdit}">
<Setter Property="SelectedIndex" Value="0"/>
</Style>
</dxb:BarEditItem.EditStyle>
<dxb:BarEditItem.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
<dxe:ComboBoxEditSettings.Items>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_6_month" Caption="6 month" MeasureUnit="Month" MeasureUnitMultiplier="6"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_1_year" Caption="1 year" MeasureUnit="Year" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_2_year" Caption="2 year" MeasureUnit="Year" MeasureUnitMultiplier="2"/>
</dxe:ComboBoxEditSettings.Items>
</dxe:ComboBoxEditSettings>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
</dxb:Bar>
</dxb:BarManager.Bars>
</dxb:BarManager>
<Grid>
<dxc:ChartControl x:Name="chart">
<!-- Chart settings. -->
</dxc:ChartControl>
</Grid>
</DockPanel>
</Window>
The following image illustrates a chart with its toolbars:
To add a ribbon to the Chart, click the chart’s smart tag and then select Create Ribbon.
Show the Auto-Generated Ribbon Markup
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ChartRibbon"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
xmlns:dxct="http://schemas.devexpress.com/winfx/2008/xaml/charts/themekeys"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
x:Class="ChartRibbon.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<dxr:RibbonControl DockPanel.Dock="Top" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonControl}}" dxc:ChartControlBase.Chart="{Binding ElementName=chart}">
<dxr:RibbonDefaultPageCategory Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonChartToolsCategory}}">
<dxr:RibbonPage x:Name="CommonPage" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonCommonPage}}">
<dxr:RibbonPageGroup x:Name="RunDesignerGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonRunDesignerGroup}}">
<dxb:BarButtonItem x:Name="RunDesignerItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RunDesignerItem}}"/>
</dxr:RibbonPageGroup>
<dxr:RibbonPageGroup x:Name="TemplatesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonTemplatesGroup}}">
<dxb:BarButtonItem x:Name="SaveAsTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SaveAsTemplateItem}}"/>
<dxb:BarButtonItem x:Name="LoadTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=LoadTemplateItem}}"/>
</dxr:RibbonPageGroup>
<dxr:RibbonPageGroup x:Name="PrintAndExportGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonPrintAndExportGroup}}">
<dxb:BarButtonItem x:Name="PrintPreviewItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonPrintPreviewItem}}"/>
<dxb:BarButtonItem x:Name="PrintItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintItem}}"/>
<dxb:BarSubItem x:Name="ExportItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportItem}}">
<dxb:BarButtonItem x:Name="ExportToPdfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPdfItem}}"/>
<dxb:BarButtonItem x:Name="ExportToHtmlItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToHtmlItem}}"/>
<dxb:BarButtonItem x:Name="ExportToMhtItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToMhtItem}}"/>
<dxb:BarButtonItem x:Name="ExportToXlsItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsItem}}"/>
<dxb:BarButtonItem x:Name="ExportToXlsxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsxItem}}"/>
<dxb:BarButtonItem x:Name="ExportToRtfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToRtfItem}}"/>
<dxb:BarButtonItem x:Name="ExportToDocxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToDocxItem}}"/>
<dxb:BarSubItem x:Name="ExportToImageItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToImageItem}}">
<dxb:BarButtonItem x:Name="ExportToBmpItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToBmpItem}}"/>
<dxb:BarButtonItem x:Name="ExportToGifItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToGifItem}}"/>
<dxb:BarButtonItem x:Name="ExportToJpegItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToJpegItem}}"/>
<dxb:BarButtonItem x:Name="ExportToPngItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPngItem}}"/>
<dxb:BarButtonItem x:Name="ExportToTiffItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToTiffItem}}"/>
</dxb:BarSubItem>
</dxb:BarSubItem>
</dxr:RibbonPageGroup>
<dxr:RibbonPageGroup x:Name="AppearanceGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonAppearanceGroup}}">
<dxb:BarSubItem x:Name="PaletteItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PaletteItem}}"/>
</dxr:RibbonPageGroup>
</dxr:RibbonPage>
<dxr:RibbonPage x:Name="FinancialOptionsPage" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialOptionsPage}}">
<dxr:RibbonPageGroup x:Name="FinancialSeriesAndAxisGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialSeriesAndAxisGroup}}">
<dxb:BarEditItem x:Name="SeriesSelectorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SeriesSelectorItem}}"/>
<dxb:BarEditItem x:Name="FinancialAxisUnitItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisUnitItem}}">
<dxb:BarEditItem.EditStyle>
<Style TargetType="{x:Type dxe:ComboBoxEdit}">
<Setter Property="SelectedIndex" Value="0"/>
</Style>
</dxb:BarEditItem.EditStyle>
<dxb:BarEditItem.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
<dxe:ComboBoxEditSettings.Items>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_day" Caption="1 day" MeasureUnit="Day" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_week" Caption="1 week" MeasureUnit="Week" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_month" Caption="1 month" MeasureUnit="Month" MeasureUnitMultiplier="1"/>
</dxe:ComboBoxEditSettings.Items>
</dxe:ComboBoxEditSettings>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
<dxb:BarEditItem x:Name="FinancialAxisPeriodItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisPeriodItem}}">
<dxb:BarEditItem.EditStyle>
<Style TargetType="{x:Type dxe:ComboBoxEdit}">
<Setter Property="SelectedIndex" Value="0"/>
</Style>
</dxb:BarEditItem.EditStyle>
<dxb:BarEditItem.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
<dxe:ComboBoxEditSettings.Items>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_6_month" Caption="6 month" MeasureUnit="Month" MeasureUnitMultiplier="6"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_1_year" Caption="1 year" MeasureUnit="Year" MeasureUnitMultiplier="1"/>
<dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_2_year" Caption="2 year" MeasureUnit="Year" MeasureUnitMultiplier="2"/>
</dxe:ComboBoxEditSettings.Items>
</dxe:ComboBoxEditSettings>
</dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>
</dxr:RibbonPageGroup>
<dxr:RibbonPageGroup x:Name="FinancialIndicatorsGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialIndicatorsGroup}}">
<dxb:BarCheckItem x:Name="DisableIndicatorInteractionItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DisableIndicatorInteractionItem}}"/>
<dxb:BarCheckItem x:Name="DrawTrendLineIndicator" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawTrendLineIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciArcsIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciArcsIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciFansIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciFansIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="DrawFibonacciRetracementIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciRetracementIndicatorItem}}"/>
<dxb:BarCheckItem x:Name="RemoveIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RemoveIndicatorItem}}"/>
<dxb:BarItemSeparator/>
<dxb:BarSubItem x:Name="AddIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=AddIndicatorItem}}"/>
</dxr:RibbonPageGroup>
</dxr:RibbonPage>
</dxr:RibbonDefaultPageCategory>
</dxr:RibbonControl>
<Grid>
<dxc:ChartControl x:Name="chart">
<!-- Chart settings. -->
</dxc:ChartControl>
</Grid>
</DockPanel>
</Window>
Note
Create Ribbon adds the DevExpress.Xpf.Ribbon and DevExpress.Data.Desktop libraries to the project.
The following image illustrates a chart with its ribbon:
You can use one of the following approaches to translate strings used in the Ribbon/Toolbars:
Use Satellite Resource Assemblies (standard localization mechanism)
Use Localizer Objects: Create a class that inherits ChartLocalizer, override its GetLocalizedString method and initialize the ChartLocalizer.Active property with a newly created class instance. The ChartStringId enumeration stores strings used in the Chart Ribbon/Toolbars.
If you do not need the full range of default Ribbon/Toolbar commands, you can create a custom Toolbar and populate it with ChartCommands.
The following code executes the ChartCommands.RunDesignerCommand when a user clicks the Show Designer bar button.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ChartToolbar"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
x:Class="ChartToolbar.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="830">
<DockPanel>
<dxb:BarManager DockPanel.Dock="Top">
<dxb:BarManager.Bars>
<dxb:Bar>
<dxb:BarButtonItem Content="Show Designer"
Command="{Binding Commands.RunDesignerCommand, ElementName=chart}"
BarItemDisplayMode="ContentAndGlyph" Glyph="{dx:DXImage SvgImages/Icon Builder/Actions_Edit.svg}"/>
</dxb:Bar>
</dxb:BarManager.Bars>
</dxb:BarManager>
<Grid>
<dxc:ChartControl x:Name="chart">
<!-- ... -->
</dxc:ChartControl>
</Grid>
</DockPanel>
</Window>