The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.1
19.2 (EAP/Beta)
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

How to: Customize the Caption and Context Menu of a Dashboard Item

  • 3 min to read

This example demonstrates how to use the DashboardLayoutItem.CaptionCustomizationsTemplate and BaseLayoutItem.ContextMenuCustomizationsTemplate properties to customize the caption toolbar and context menu.

wpf-custom-caption-and-context-menu

This example uses the following API:

In a dashboard item's custom style, the DashboardLayoutItem.CaptionCustomizationsTemplate property specifies a template for the dashboard item's caption toolbar. The DashboardLayoutItem.ContextMenuCustomizationsTemplate property specifies a template for the dashboard item's context menu.

In a group item's custom style, set the DashboardGroupItem.CaptionCustomizationsTemplate and DashboardGroupItem.ContextMenuCustomizationsTemplate properties, respectively.

The data template in a custom style uses the DevExpress.Xpf.Bars.InsertAction class to insert a button or a drop-down menu. The InsertAction.Index property specifies a position to insert.

<dx:ThemedWindow x:Class="WpfDashboardCustomCaptionMenu.MainWindow" 
    Width="800" Height="450" mc:Ignorable="d" dx:ThemeManager.ThemeName="LightGray" 
    Title="Custom Caption Toolbar and Context Menu" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    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:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
    xmlns:dxdash="http://schemas.devexpress.com/winfx/2008/xaml/dashboard" 
    xmlns:dxdasht="http://schemas.devexpress.com/winfx/2008/xaml/dashboard/themekeys" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

    <Grid>
        <dxdash:DashboardControl x:Name="dashboardControl1" TitleAlignment="Center" TitleContent="Title Content" TitleVisibility="Visible">
            <dxdash:DashboardControl.TitleContentTemplate>
                <DataTemplate>
                    <ToggleButton Content="{Binding}" />
                </DataTemplate>
            </dxdash:DashboardControl.TitleContentTemplate>
            <dxdash:DashboardControl.TitleCustomizationsTemplate>
                <DataTemplate>
                    <ItemsControl>
                        <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardTitle_Toolbar}" Index="0">
                            <dxb:InsertAction.Element>
                                <dxb:BarSubItem AllowGlyphTheming="True" Content="My Title Dropdown">
                                    <dxb:BarButtonItem Content="Item1" />
                                    <dxb:BarButtonItem Content="Item2" />
                                    <dxb:BarButtonItem Content="Item3" />
                                </dxb:BarSubItem>
                            </dxb:InsertAction.Element>
                        </dxb:InsertAction>
                    </ItemsControl>
                </DataTemplate>
            </dxdash:DashboardControl.TitleCustomizationsTemplate>
            <dxdash:DashboardControl.ItemGroupStyle>
                <Style TargetType="{x:Type dxdash:DashboardLayoutGroup}">
                    <Setter Property="CaptionCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_Toolbar}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarCheckItem AllowGlyphTheming="True" Content="My Check Button" />
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ContextMenuCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_ContextMenu}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarButtonItem AllowGlyphTheming="True" Content="My GroupItem Context Menu" />
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </dxdash:DashboardControl.ItemGroupStyle>
            <dxdash:DashboardControl.DashboardItemStyle>
                <Style TargetType="{x:Type dxdash:DashboardLayoutItem}">
                    <Setter Property="CaptionCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_Toolbar}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarSubItem AllowGlyphTheming="True" Content="My Caption Item">
                                                <dxb:BarButtonItem Content="Item1" />
                                                <dxb:BarButtonItem Content="Item2" />
                                                <dxb:BarButtonItem Content="Item3" />
                                            </dxb:BarSubItem>
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ContextMenuCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_ContextMenu}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarSubItem AllowGlyphTheming="True" Content="My Context Menu">
                                                <dxb:BarButtonItem Content="Menu Item 1" />
                                                <dxb:BarButtonItem Content="Menu Item 2" />
                                                <dxb:BarButtonItem Content="Menu Item 3" />
                                            </dxb:BarSubItem>
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </dxdash:DashboardControl.DashboardItemStyle>
            <dxdash:DashboardControl.GridItemStyle>
                <Style TargetType="{x:Type dxdash:GridDashboardLayoutItem}">
                    <Setter Property="CaptionCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_Toolbar}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarButtonItem AllowGlyphTheming="True" Content="My Grid Caption Item" />
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ContextMenuCustomizationsTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ItemsControl>
                                    <dxb:InsertAction ContainerName="{x:Static dxdasht:DefaultBarItemNames.DashboardItemCaption_ContextMenu}">
                                        <dxb:InsertAction.Element>
                                            <dxb:BarButtonItem AllowGlyphTheming="True" Content="My Grid Context Menu" />
                                        </dxb:InsertAction.Element>
                                    </dxb:InsertAction>
                                </ItemsControl>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </dxdash:DashboardControl.GridItemStyle>
        </dxdash:DashboardControl>
    </Grid>

</dx:ThemedWindow>