We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Why does the theme break when I apply a style?

Hello, All.

I am using syncfusion FluentLight Theme.

However, if you modify the style, all Themes will be broken.

<-- Theme (FluentLight)

<-- Edit Style

<--  Broken Theme 

I want to change the style of a part while maintaining the Theme.

for example.. Can't I use <Style Basedon..>?


Best regards,

Thank you.


1 Reply 1 reply marked as answer

VS Vijayarasan Sivanandham Syncfusion Team December 16, 2022 01:17 PM UTC

Hi Jayden Lee,

The reported problem occurs due to defined the default style for GridCell. When applying the theme to SfDataGrid, we merged the FluentLight merge resource dictionary into the application. If you want to customize the cell style in SfDataGrid you should use the relevant key for the target type, which is used in MergedDictionary. If you didn't define the key, the default style merged, which is why you saw the default border instead of the applied theme.


However, you can avoid this by adding the ResourceDictionary based on the applied Theme (ex: FluentLight). BasedOn property bound with SyncfusionGridCellStyle as StaticResource in defined Style based. Refer to the below code snippet.


<UserControl.Resources>

     <ResourceDictionary>           

         <ResourceDictionary.MergedDictionaries>

             <!--Here add the ResourceDictionary for the applied theme in your application-->

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

         </ResourceDictionary.MergedDictionaries>

 

         <!--Here add the BasedOn proeprty for override the theme style for GridCell-->

         <Style BasedOn="{StaticResource SyncfusionGridCellStyle}" TargetType="syncfusion:GridCell">

             <Style.Triggers>

                 <DataTrigger Binding="{Binding CheckRemote}" Value="False">

                     <Setter Property="IsEnabled" Value="False" />

                 </DataTrigger>

             </Style.Triggers>

         </Style>

     </ResourceDictionary>   

 </UserControl.Resources>


Find the sample in the attachment.

Regards,

Vijayarasan S


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Attachment: Sample_edd81140.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon