Override the style of GroupBarItem and GroupViewItem basedOn metro style

[Miquel Alcaraz]

Dear,
I would like to override the style of  GroupBarItem and GroupViewItem.
I follow the steps described on https://www.syncfusion.com/kb/4173/how-to-override-syncfusion-themes.
but the app doesn’t find de resource dictionary for GroupBarItem and GroupViewItem:
merge dictionaries:

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

                     <ResourceDictionary Source="/Syncfusion.Shared.WPF;component/Controls/GroupViewItem/Themes/MetroStyle.xaml" />
                     <ResourceDictionary Source="/Syncfusion.Shared.WPF;component/SkinManager/MetroStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>

and override style:

           <syncfusion:GroupBar.ItemContainerStyle>
                <Style TargetType="{x:Type syncfusion:GroupBarItem}"  BasedOn="{StaticResource MetroGroupBarItemStyle}">
                    <Setter Property="HeaderText" Value="{Binding Header}"/>
                    <Setter Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="IsExpanded" Value="True"/>
                    <Setter Property="Content" Value="{Binding}"/>
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <syncfusion:GroupView Background="Transparent" ItemsSource="{Binding Content}">
                                    <syncfusion:GroupView.ItemContainerStyle>
                                        <Style TargetType="{x:Type syncfusion:GroupViewItem}" BasedOn="{StaticResource MetroGroupViewItemStyle}">
                                            <Setter Property="Tag" Value="{Binding Tag}"/>
                                            <Setter Property="Text" Value="{Binding Text}"/>
                                            <Setter Property="ImageSource" Value="{Binding ImageSource}"/>
                                        </Style>
                                    </syncfusion:GroupView.ItemContainerStyle>
                                </syncfusion:GroupView>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="IsSelected" Value="{Binding IsSelected}" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                </Style>
            </syncfusion:GroupBar.ItemContainerStyle>

what is the correct way to overwrite these styles?

Thanks in advance.

regards

[Kannan R]

Hi Miquel, 

 

Thank you for contacting Syncfusion Support. 

 

We have analyzed your requirement with the provided code snippet.  

 

Style Key may be different based on Control and its Themes. Please find the Metro Style BasedOn Key for the GroupBar controls from the below table. 

 

GroupBar Control	BasedOn Key
GroupBar	Office2007BlueGroupBarStyle
GroupViewItem	MetroGroupViewItemStyle
GroupBarItem	Office2007BlueGroupBarItemStyle

 

We have prepared a sample based on your requirement. Please make use of the below code example for the same. 

 

Code example : [XAML] 

 

App.xaml 

 

 

<ResourceDictionary.MergedDictionaries> 

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

</ResourceDictionary.MergedDictionaries> 

 

 

MainWindow.xaml 

 

 

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

 

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

 

 

Please make use of the below sample for your reference. 

 

Sample: GroupBarStyleOverridenSample  

 

Screenshot 

 

 

 

Please refer the below user guide documentation link for setting the corresponding resource dictionary path of the controls. 

 

Documentation link:  https://help.syncfusion.com/wpf/skinmanager/overview#controls-table  

 

Note:  

 

• We will update the above details in our documentation page.
• Kindly let us know if you are facing similar problem with any other control. We will provide solution for the same.

 

Please check the above solution and let us know if it is helpful. 

 

Regards, 

Kannan 

[Miquel Alcaraz]

Dear Kannan,
Thank you very much for your prompt response.
It has been very helpful for this case and also for other similar cases.

Thanks again.

Best regards
Miquel

[Kannan R]

Hi Miquel,  

 

Thank you for your update.  

 

Please let us know if you need further assistance.  

 

Regards, 

Kannan