How to change dxb:BarcheckItem background and foreground style

Question

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>

Answer 1

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:

Hope this helps