Current filter:
                                You should refresh the page.
                                  • Hi,

                                    I have found the standard ControlTemplate for controlling the theme of toolbar buttons (BarButtonItem, BarCheckItem, etc.) in DevExpress.Xpf.Themes.Office2019Colorful\Core\Core\Bars\Themes\Office2019Colorful\BarItems\BarItems.xaml and I have been playing around with it. Here is a example:

                                    [XAML]
                                    <ControlTemplate x:Key="{dxbt:BarItemBorderThemeKey ResourceKey=Normal, IsThemeIndependent=True}" TargetType="{x:Type dxb:ItemBorderControl}"> <Grid x:Name="Root" > <Border x:Name="IsDefault" Background="Transparent" BorderBrush="Transparent" BorderThickness="1"/> <!--BorderBrush="$Focused"--> <Border x:Name="IsCustomization" BorderBrush="#FFD70A31" BorderThickness="1" Opacity="0"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="HideBorderSide"> <VisualState x:Name="None"/> <VisualState x:Name="Top"> <Storyboard> <ObjectAnimationUsingKeyFrames dxi:ValueSetter.Thickness="0,0,0,1" Storyboard.TargetName="Root" Storyboard.TargetProperty="Margin"/> </Storyboard> </VisualState> <VisualState x:Name="Right"> <Storyboard> <ObjectAnimationUsingKeyFrames dxi:ValueSetter.Thickness="0,0,1,0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Margin"/> </Storyboard> </VisualState> <VisualState x:Name="Left"> <Storyboard> <ObjectAnimationUsingKeyFrames dxi:ValueSetter.Thickness="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Margin"/> </Storyboard> </VisualState> <VisualState x:Name="Bottom"> <Storyboard> <ObjectAnimationUsingKeyFrames dxi:ValueSetter.Thickness="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Margin"/> </Storyboard> </VisualState> <VisualState x:Name="All"/> </VisualStateGroup> <VisualStateGroup x:Name="ActiveState"> <VisualState x:Name="Active"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </VisualState> <VisualState x:Name="Inactive"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="Opacity" To="0.62"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="State"> <VisualState x:Name="Normal"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/> </Storyboard> </VisualState> <VisualState x:Name="Hover"> <Storyboard> <!--To="$HoverAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF3B6C1"/> <!--To="$HoverAltBorder"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFF3B6C1"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <!--To="$SelectionAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFD70A31"/> <!--To="$SelectionAltBorder"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFD70A31"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> <VisualState x:Name="Checked"> <Storyboard> <!--To="$SelectionAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="White"/> <!--To="$SelectionAltBorder"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFD70A31"/> <ThicknessAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="BorderThickness" To="0,0,0,2"/> </Storyboard> </VisualState> <VisualState x:Name="HoverChecked"> <Storyboard> <!--To="$SelectionAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF3B6C1"/> <!--To="$SelectionAltBorder"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFD70A31"/> <ThicknessAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="BorderThickness" To="0,0,0,2"/> </Storyboard> </VisualState> <VisualState x:Name="Indeterminate"> <Storyboard> <!--To="$HoverAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF3B6C1"/> <!--To="$HoverAltBorder"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFF3B6C1"/> </Storyboard> </VisualState> <VisualState x:Name="Focused"> <Storyboard> <!--To="$HoverAltBackground"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFF3B6C1"/> <!--To="$Focused"/>--> <ColorAnimation Duration="0" Storyboard.TargetName="IsDefault" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFD70A31"/> </Storyboard> </VisualState> <VisualState x:Name="Customization"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="IsCustomization" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate>

                                    However, when switching the theme to Office 2019 (any variant) the above ControlTemplate is not picked up. I have eventually tracked it down to the fact that the Office 2019 themes appear to have UseLightweightTemplates="True" set by default, which changes the visual tree to use a LightweightBarItemLinkControl and a RenderContentPresenterElement. The only way to make it pick up the custom ControlTemplate is to set UseLightweightTemplates="False" on each bar item.

                                    As the whole point of lightweight templates is to improve performance, I would like to know how to customise toolbar item lightweight templates. I have done some searching but can't seem to find any guidance on this and it's not clear from the Theme Designer or Snoop approaches how this is done. I assume I need to create a style with a trigger that changes backgrounds, etc. when a certain button state is activated, but there is a lot going on here that makes it very hard to track down!

                                    Can you please give me an example project that does this? Specifically, I'm looking to change the theme so that BarCheckItems show an underline when IsChecked="True".

                                    Thanks ,
                                    Gareth

                                1 Solution

                                Creation Date Importance Sort by

                                Hello Gareth,

                                As Snoop and Live Visual Tree don't show elements from lightweight templates, I recommend you use Theme Designer. If you create a theme based on Office2019 themes, hold Ctrl+Shift and click bar items, Theme Designer will navigate you to the corresponding template in XAML - see the attached video.

                                As overriding lightweight templates at the application level requires you to copy large pieces of our themes, I recommend you consider creating a custom theme in Theme Designer. Alternatively, you can use the Palettes approach to consistently change all DevExpress controls.

                                Thanks