How to Modify RibbonControl Items and Properties in DiagramDesignerControl

• Jun 07, 2019
• 2 minutes to read

There are several ways to customize the built-in RibbonControl:

• Use the RibbonControl’s Merging feature. Create an external RibbonControl with required elements and attach the MergingProperties.ElementMergingBehavior property to DiagramDesignerControl. After performing this, elements form the DiagramDesignerControl’s ribbon will be merged with the parent ribbon.
• Customization actions. Using customization actions, you can create/remove/update bar items. Use the DiagramDesignerControl.Actions property to define customization actions. The DefaultBarItemNames class contains default item captions displayed in the diagram’s Ribbon. The DefaultBarItemNames document describes how the members of this class correspond to the Ribbon’s elements.
• Overriding theme styles. Almost all bar items in DiagramDesignerControl have styles defined as DynamicResource. You can override these styles and set required properties in them. Refer to the following topic for more information on how to modify theme resources: Customize Themes.

RibbonStyles.xaml

<ResourceDictionary 
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
                    xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram"
                    xmlns:dxdiagt="clr-namespace:DevExpress.Xpf.Diagram.Themes;assembly=DevExpress.Xpf.Diagram.v16.1"
                    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Style x:Key="{dxdiagt:DesignerControlCommandsThemeKeys ResourceKey=PasteCommandItemStyle, IsThemeIndependent=True}" TargetType="{x:Type dxb:BarButtonItem}">
        <Style.Setters>
            <Setter Property="Content" Value="Custom Paste"/>
            <Setter Property="Glyph" Value="{dx:DXImage Image=GlobalColorScheme_16x16.png}"/>
            <Setter Property="LargeGlyph" Value="{dx:DXImage Image=GlobalColorScheme_32x32.png}"/>
            <Setter Property="Command" Value="{Binding Commands.Paste, RelativeSource={RelativeSource TemplatedParent}}"/>
        </Style.Setters>
    </Style>
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="DXDiagram.CustomizeRibbon.MainWindow"
        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:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
        xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram"
        xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:DXDiagram.CustomizeRibbon"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="1100">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="RibbonStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <dxr:RibbonControl RibbonStyle="Office2010">
            <dxr:RibbonControl.ApplicationMenu>
                <dxr:ApplicationMenu/>
            </dxr:RibbonControl.ApplicationMenu>
            <dxr:RibbonDefaultPageCategory>
                <dxr:RibbonPage Caption="Custom page 1">
                    <dxr:RibbonPageGroup Caption="Custom Group">
                        <dxb:BarButtonItem Content="Custom Button 1" />
                        <dxb:BarButtonItem Content="Custom Button 2" />
                    </dxr:RibbonPageGroup>
                </dxr:RibbonPage>
                <dxr:RibbonPage Caption="{dxdiag:DiagramControlLocalizedString RibbonPage_Home}">
                    <dxr:RibbonPageGroup Caption="Protection" MergeOrder="1">
                        <dxb:BarCheckItem Content="Sheet" Glyph="{dx:DXImage Image=ProtectSheet_16x16.png}"/>
                        <dxb:BarCheckItem Content="Project" Glyph="{dx:DXImage Image=ProtectWorkbook_16x16.png}"/>
                    </dxr:RibbonPageGroup>
                </dxr:RibbonPage>
                <dxr:RibbonPage Caption="Custom page 2" MergeOrder="5"/>
            </dxr:RibbonDefaultPageCategory>
        </dxr:RibbonControl>
        <dxdiag:DiagramDesignerControl Grid.Row="1" SelectedStencils="BasicShapes" dxb:MergingProperties.ElementMergingBehavior="InternalWithExternal">
            <dxdiag:DiagramDesignerControl.Actions>
                <dxb:RemoveBarItemAndLinkAction ItemName="{x:Static  dxdiag:DefaultBarItemNames.ShapeStyles}"/>
                <dxb:UpdateAction ElementName="{x:Static  dxdiag:DefaultBarItemNames.PointerTool}" 
                                  PropertyName="Glyph" Value="{dx:DXImage Image=SelectDataMember_16x16.png}"/>
                <dxb:UpdateAction ElementName="{x:Static  dxdiag:DefaultBarItemNames.StatusBarZoomEditor}" PropertyName="IsVisible">
                    <sys:Boolean>False</sys:Boolean>
                </dxb:UpdateAction>
                <dxb:CollectionAction Kind="Insert" ContainerName="{x:Static  dxdiag:DefaultBarItemNames.ShapeStylesGroup}">
                    <dxb:CollectionAction.Element>
                        <dxb:BarButtonItem Content="Mix Color" Glyph="{dx:DXImage Image=ColorMixer_16x16.png}"/>
                    </dxb:CollectionAction.Element>
                </dxb:CollectionAction>
                <dxb:UpdateAction ElementName="{x:Static  dxdiag:DefaultBarItemNames.DesignRibbonPage}" PropertyName="MergeOrder">
                    <sys:Int32>-5</sys:Int32>
                </dxb:UpdateAction>
            </dxdiag:DiagramDesignerControl.Actions>
        </dxdiag:DiagramDesignerControl>
    </Grid>
</Window>