Themes in WPF TreeGrid (SfTreeGrid)

SfTreeGrid provides built-in themes which can be applied using SfSkinManager and also provides support to create custom theme using theme studio.

Built-in Themes

The appearance of SfTreeGrid control can be customized by VisualStyle attached property of the SfSkinManager. You can find the list of available built-in themes and the assemblies needs to be referred in the below documentation link.

Below example explains how to apply blend theme for SfDataGrid using SfSkinManager in an existing application.

  • Add reference to Syncfusion.SfSkinManager.Wpf.dll and Syncfusion.Themes.Blend.Wpf.dll assembly.
  • Now add reference to `SfSkinManager` namespace and set `SfSkinManager.VisualStyle` attached property to window or SfTreeGrid. Setting `VisualStyle` property to window will apply blend theme for all controls in Windows.
    <Window x:Class="VisualStylesDemo.MainWindow"
                                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                             
                                 xmlns:local="clr-namespace:VisualStylesDemo"
                                 xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
                                 xmlns:skinManager="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                                 Title="Visual Styles Demo"  Icon="App.ico"
                                 Width="1200" Height="720"
                                 WindowStartupLocation="CenterScreen">
        <syncfusion:SfTreeGrid Name="treeGrid"                                      
                            AutoExpandMode="RootNodesExpanded"
                            AutoGenerateColumns="False"
                            ChildPropertyName="Children"
                            ColumnSizer="Star"
                            ExpanderColumn="Id"
                            skinManager:SfSkinManager.VisualStyle="Blend"
                            ItemsSource="{Binding PersonDetails}" />
    using Syncfusion.SfSkinManager;
    
    SfSkinManager.SetVisualStyle(treeGrid, VisualStyles.Blend);
  • Now run the application, you can see blend theme applied for SfTreeGrid.

themes_img1

NOTE

Refer below theme studio documentation to know more about of SfSkinManger it its various features such as theming MS controls, changing themes at runtime and applying theme globally in the application.

Custom Theme using Theme Studio

SfTreeGrid themes can be customized using theme studio. Refer the documentation link for more information.