How to override Syncfusion themes?
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.
Figure 1: Customized Theme
