How to override Metro style of the GroupBar control?

Style of the Syncfusion controls can be overridden based on the build in themes of that control by adding corresponding ResourceDictionary. A unique key is given to every style, so that the styles can be customized using the BasedOn property.

Here, an example is illustrated to override the MetroStyle for the GroupBarItem and GroupViewItem by customizing the GroupBarItemStyle using the BasedOn property.

The following code demonstrates the same. 

Step 1: Add the Resource dictionary in App.xaml.

Syntax for ResourceDictionary Source Path

<ResourceDictionary Source="/Syncfusion.Tools.WPF;component/Controls/<ControlName>/Themes/<StyleName>Style.xaml"></ResourceDictionary>

App.xaml 

<ResourceDictionary.MergedDictionaries> 
   
<ResourceDictionary Source="/Syncfusion.Tools.WPF;component/Controls/GroupBar/Themes/MetroStyle.xaml" /> 
 
</ResourceDictionary.MergedDictionaries>  

Step 2: Define the new Metro style for GroupBar using BasedOn Property.

Metro Style BasedOn Keys for the GroupBar controls are varied from other styles BasedOn Keys and please find the same from the below table.

MainWindow.xaml 

<Style TargetType="{x:Type syncfusion:GroupBarItem}" BasedOn="{StaticResource Office2007BlueGroupBarItemStyle}"> 
 
<Style TargetType="{x:Type syncfusion:GroupViewItem}" BasedOn="{StaticResource MetroGroupViewItemStyle}"> 

Screenshot:

Figure: GroupBarItem and GroupViewItem customization using BasedOn property.

Sample: GroupBarStyleOverridenSample