wpfstylesdevexpress-windows-uidevexpress-wpf

How to change dxb:BarcheckItem background and foreground style


How to change the BarCheckITem background color, am having hardtime changing the styles for devexpress controls

        <dxb:ToolBarControl ShowBackground="True" Grid.Row="0"  HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        AllowCustomizationMenu="True" 
                        BarItemDisplayMode="ContentAndGlyph" UseWholeRow="True" 
                        AllowHide="False" AllowQuickCustomization="False" RotateWhenVertical="False">


        <dxb:BarCheckItem  Content="Forms"
                           Glyph="{dx:DXImage Image=AddItem_16x16.png}"
                           GroupIndex="-11"
                           BarItemDisplayMode="ContentAndGlyph"
                           LargeGlyph="{dx:DXImage Image=AddItem_32x32.png}" />
 <dxb:ToolBarControl>

Solution

  • You need to override the BarCheckItemLink.CustomResources and then to add a style to override the default template. I have made a simple sample to show this:

    <dx:DXWindow x:Class="BarCheckItemBackground.MainWindow"
            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"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <dxb:BarManager ToolbarGlyphSize="Large">
                <dxb:BarManager.Items>
                    <dxb:BarCheckItem  x:Name="ItemNormal"
                                       Content="I am normal"
                                       Glyph="{dx:DXImage Image=AddItem_16x16.png}"
                                       BarItemDisplayMode="ContentAndGlyph"
                                       LargeGlyph="{dx:DXImage Image=AddItem_32x32.png}" />
                    <dxb:BarCheckItem  x:Name="ItemNotNormal"
                                       Content="I am not normal lol"
                                       Glyph="{dx:DXImage Image=AddItem_16x16.png}"
                                       GroupIndex="-11"
                                       BarItemDisplayMode="ContentAndGlyph"
                                       LargeGlyph="{dx:DXImage Image=AddItem_32x32.png}" />
                </dxb:BarManager.Items>
                <dxb:BarManager.Bars>
                    <dxb:Bar>
                        <dxb:Bar.DockInfo>
                            <dxb:BarDockInfo ContainerType="Top"/>
                        </dxb:Bar.DockInfo>
                        <dxb:BarCheckItemLink BarItemName="ItemNormal" />
                        <dxb:BarCheckItemLink BarItemName="ItemNotNormal">
                            <dxb:BarCheckItemLink.CustomResources>
                                <ResourceDictionary>
                                    <Style TargetType="{x:Type dxb:BarCheckItemLinkControl}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type dxb:BarItemLinkControl}">
                                                    <Grid>
                                                        <Border Background="Yellow"/>
                                                        <dxb:BarItemLayoutPanel x:Name="PART_LayoutPanel"/>
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ResourceDictionary>
                            </dxb:BarCheckItemLink.CustomResources>
                        </dxb:BarCheckItemLink>
                    </dxb:Bar>
                </dxb:BarManager.Bars>
            </dxb:BarManager>
        </Grid>
    </dx:DXWindow>
    

    And the output window: enter image description here

    Hope this helps