The requested page is not available for the requested platform. You are viewing the content for Default platform.

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

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>