Articles in this section
Category / Section

How to override Syncfusion themes?

2 mins read

You can override the themes to the control's style by adding the corresponding ResourceDictionary in the sample and defining the new style with the BasedOn property. When the ResourceDictionary is added, you can acquire all the settings of the base style, and you can override them as desired. Using this approach, you can override the style for all the controls. Here, an example is illustrated to set the HeaderBackground for the TileViewItem by customizing the TileViewItemStyle using the BasedOn property.

Syntax for ResourceDictionary

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

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

App.xaml

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ Syncfusion.Themes.FluentLight.WPF;component /TileViewControl/TileViewControl.xaml "></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

Syntax for BasedOn

BasedOn="{StaticResource Syncfusion<ControlName>Style}"

Step 2: Define the new style using BasedOn Property

XAML

<syncfusion:ChromelessWindow x:Class="ChromelessWindow_135611.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
syncfusion:SkinStorage.VisualStyle="Metro"
Icon="App.ico" TitleTextAlignment="Left"
Title="MainWindow" Height="350" Width="525">
<syncfusion:ChromelessWindow.Resources>
<Style x:Key="TileViewStyle1" TargetType="{x:Type syncfusion:TileViewItem}" BasedOn="{StaticResource SyncfusionTileViewItemStyle}">
<Setter Property="HeaderBackground" Value="Chocolate"/>
</Style>
</syncfusion:ChromelessWindow.Resources>
<Grid>
<syncfusion:TileViewControl x:Name="tile" >
<syncfusion:TileViewItem Header="Item 1"  Style="{StaticResource TileViewStyle1}" />
<syncfusion:TileViewItem Header="Item 2" />
<syncfusion:TileViewItem Header="Item 3" />
<syncfusion:TileViewItem Header="Item 4" />
</syncfusion:TileViewControl>
</Grid>
</syncfusion:ChromelessWindow>

The following screenshot displays the customization of the theme.

TileViewControl with chocolate background for the header of one TileViewItem

Figure 1: Customized Theme

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (1)
Please  to leave a comment
PB
Peter Bernhardt

Unfortunately, this does not work for the older styles. I've upgraded a project to version 24.2.7 and now the styles cannot be found anymore.

Neither "Office2010SilverTreeViewItemAdvStyle" nor "SyncfusionTreeViewItemAdvStyle" can be found while trying to modify a style with BasedOn for Syncfusion.Themes.Office2010Silver.WPF.

Is there a list of the valid styles for these old themes that cannot be modified using Theme Studio?

Access denied
Access denied