Apply theme and keep App.XAML styles

[Mahdi Ehsanifar]

I have defined some styles in App.XAML like: 

<Style TargetType="Button">

            <Setter Property="Padding" Value="1,2,1,2"/>

            <Setter Property="Margin" Value="1,2,1,2"/>

</Style>

Then I apply a theme in MainWindow.xaml.cs: 

SfSkinManager.SetVisualStyle(this, VisualStyles.Office2016Colorful);

But this overrides all app level styles like padding and merging in this sample. 

I even tried this:

SfSkinManager.ApplyStylesOnApplication = true;
SfSkinManager.SetVisualStyle(this, VisualStyles.Office2016Colorful);

But the problem here is that the theme is not applied to the Buttons.

How can I keep my styles, or somehow merge my styles into Syncfusion themes?

[Senthil Kumaran Rajan]

Hi  Mahdi 

 

Thank you for contacting Syncfusion Support. 

 

Query : How can I keep my styles, or somehow merge my styles into Syncfusion themes? 

 

In order to merge the style and override it in an application level, the BasedOn property should be used. Please find the code for the same from below: 

 

Code:[XAML] 

 

<Application.Resources> 

        <ResourceDictionary> 

            <ResourceDictionary.MergedDictionaries> 

                <ResourceDictionary Source="/Syncfusion.Themes.Office2016Colorful.WPF;Component/Tools/MS Control/MS control.xaml"/> 

            </ResourceDictionary.MergedDictionaries> 

            <Style x:Key="styleone" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}"> 

                <Setter Property="Padding" Value="1,2,1,2"/> 

                <Setter Property="Margin" Value="1,2,1,2"/> 

                <Setter Property="Background" Value="Brown"/> 

            </Style> 

        </ResourceDictionary> 

    </Application.Resources> 

 

We have also attached the sample for your reference. 

 

Sample : http://www.syncfusion.com/downloads/support/forum/139079/ze/SKINMA~2-954459314 

 

Please find the link for UG documentation regarding how to override the theme using BasedOn property . 

 

UG Link: https://help.syncfusion.com/wpf/skinmanager/how-to/override-syncfusion-themes 

 

Note: Since whenever we applied the theme using SfSkinManager, it will apply in hierarchy like from App.XAML, window level , Visual Parent of control and then it will apply to control. So when you try to set in codebehind, the theme won’t be applied directly.  

 

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

 

Regards 

Senthil 

[Mahdi Ehsanifar]

Hi Senthil, 

Thank you for your response.
Some problems sill remain. 

I try to set all styles in the App.XAML, but in your approach, I have to set the style property for each button. How can I avoid this repetition?

Secondly, I'm actually defining a style for target type of Control, and assign it to most of the controls such as the button (I avoided mentioning it to simplify my question). Now, what should I use in isntead of Source property of ResourceDictionary, and instead of DefaultButtonStyle in the BasedOn property of the Style (Something like DefaultControlStyle, but it does not work)?

App.XAML:
Code:[XAML] 
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Syncfusion.Themes.Office2016Colorful.WPF;????????" />
</ResourceDictionary.MergedDictionaries>

<Style TargetType="Control" x:Key="ControlStyle" BasedOn="{StaticResource DefaultXStyle}">

                <Setter Property="Margin" Value="1,2,1,2"/>

                <Setter Property="Padding" Value="1,2,1,2"/>
</Style>
<Style TargetType="Button" BasedOn="{StaticResource ControlStyle}"/>

MainWindow.XAML:
Code:[XAML] 
<Button/>

and not:
<Button  Style="{StaticResource DefaultXStyle}"/>

Moreover, I'm using some other controls like the SfDataGrid. Do I need to repeat all of these works for other controls to apply the theme?

Regards, 
Mahdi

[Senthil Kumaran Rajan]

Hi Mahdi  

Thank you for the update. 

Query #1: I try to set all styles in the App.XAML, but in your approach, I have to set the style property for each button. How can I avoid this repetition? 

If the style has been applied in App.XAML, then it will apply for all the controls of the same TargetType without using the Style property. We have modified the sample for the same and it can be downloaded from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/139079/ze/SkinManagerapp_modified421810135 

Query #2:Secondly, I'm actually defining a style for target type of Control, and assign it to most of the controls such as the button (I avoided mentioning it to simplify my question). Now, what should I use in isntead of Source property of ResourceDictionary, and instead of DefaultButtonStyle in the BasedOn property of the Style (Something like DefaultControlStyle, but it does not work)? 

 

In our SfSkinManager, we would maintain style property for each controls and provided the key using BasedOn property.   

 

Syntax: 

<ThemeName><Control name>Style 

 

Eg: 

DefaultListBoxItemStyle 

 

And the path which is used in ResourceDictionary source would be the file name maintained for each themes and in format like below: 

 

/Syncfusion.Themes.Office2016Colorful.WPF;Component/Tools/MS Control/ControlName.xaml" 

 

Please refer the below UG link for further reference. 

 

https://help.syncfusion.com/wpf/skinmanager/overview 

 

Query #3:  Moreover, I'm using some other controls like the SfDataGrid. Do I need to repeat all of these works for other controls to apply the theme?

Yes, if you want to apply the theme for controls, you need to follow the above steps as explained in our example by replacing the TargetType as SfDataGrid. 

 

Regards 

Senthil 

[Mahdi Ehsanifar]

Hello Senthil, 

Thank you for your response.

So in your solution, I need to repeat defining margin and padding for each MS and non-MS control I'm using, and there is no way to overrid them for all controls once and keep their theme. 
Is there any way to do this programmatically?

Furthermore, when I define the Office2016Colorful theme for MS controls and SfDataGrid at the same time in App.XAML, and run the project, the header foreground of SfDataGrid is changed to black! And when I remove the resource dictionary of the "MS control.xaml", everything is OK!

<ResourceDictionary.MergedDictionaries>

    <ResourceDictionary Source="/Syncfusion.Themes.Office2016Colorful.WPF;Component/Tools/MS Control/MS control.xaml"/>

    <ResourceDictionary Source="/Syncfusion.Themes.Office2016Colorful.WPF;Component/SfDataGrid/SfDataGrid.xaml" />

</ResourceDictionary.MergedDictionaries>

Regards, 
Mmahdi 

[Senthil Kumaran Rajan]

Hi Mahdi, 

 

Thank you for your update. 

 

We are analyzing the reported behavior in SfDataGrid. We will update the analyzed details before the end of August 9^th, 2018. 

 

Regards, 

Senthil 

[Senthil Kumaran Rajan]

Hi Mahdi, 

 

Thank you for your patience. 

 

Query 1 : So in your solution, I need to repeat defining margin and padding for each MS and non-MS control I'm using, and there is no way to overrid them for all controls once and keep their theme. 
Is there any way to do this programmatically? 

 

No, is it not possible to override them for all the control at once. Each control has different properties, one control may have one property and one control won’t have the property with same name, hence it is not possible to override for all control at once. 

 

Query 2 : Furthermore, when I define the Office2016Colorful theme for MS controls and SfDataGrid at the same time in App.XAML, and run the project, the header foreground of SfDataGrid is changed to black! And when I remove the resource dictionary of the "MS control.xaml", everything is OK! 

 

Once the theme is applied to MS control, it overrides the default ForeColor for all the TextBlock, hence the ForeColor of SfGridControl is updated as black. To overcome this behavior, we have to override the TextBlock style as like below code example. 

 

Code Example[.xaml] 

<Style TargetType="{x:Type TextBlock}"> 

</Style> 

 

We have prepared the sample for your reference and this can be downloaded from the below location. 

 

Sample : http://www.syncfusion.com/downloads/support/forum/139079/ze/SkinManagerapp-821929345  

 

Regards, 

Senthil 

[Peter Bernhardt]

Hi,

I know that this is an older issue but I have a similar question.

You showed that these are correct paths in the RessourceDictionary:

<ResourceDictionary Source="/Syncfusion.Themes.Metro.WPF;component/SfDataGrid/SfDataGrid.xaml" />

<ResourceDictionary Source="/Syncfusion.Themes.Metro.WPF;component/Tools/MS Control/MS control.xaml" />

But how do I reference the "smaller" Syncfusion controls like "upDown"? This does not work:

<ResourceDictionary Source="/Syncfusion.Themes.Metro.WPF;component/UpDown/UpDown.xaml" />

Thank you for your help.

Regards,

Peter

[Sudharsan Narayanan]

Hi Peter,

We have checked your query, "Resource cannot found". We suggest to use the below ResourceDictionary Source path for the UpDown control in the Metro theme.

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Syncfusion.Themes.Metro.WPF;component/Tools/UpDown/UpDown.xaml"/>

    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

If we misunderstood the query, please modify our sample and revert to us with reproducible issue or video. So, it will be helpful to prompt the solution on further.

Regards,
Sudharsan