Articles in this section
Category / Section

How to customize the style of WPF SfTreeNavigator?

5 mins read

You can customize the SfTreeNavigator by editing its Style property. By default, the SfTreeNavigator’s SelectedItem is in blue and gray to denote mouse-hover. In the following code, the SfTreeNavigator style has been edited to customize the SelectedItem and mouse hover background.

In this code example, style is edited and has newly defined keys such as SelectedBackground, Hovercolor, SelectedHeaderBackground for modifying its color. And by using Selected VisualState, you can modify the selected foreground.

MainPage.Xaml

<Window.Resources>
        <SolidColorBrush x:Key="AccentBrush1">#FFFFFFFF</SolidColorBrush>
        <converter:BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
        <SolidColorBrush x:Key="SelectedBackground" Color="LightSalmon"/>
        <SolidColorBrush x:Key="SelectedHeaderBackground" Color="Green"/>
        <SolidColorBrush x:Key="Hovercolor" Color="LemonChiffon"/>
        <Style x:Key="BackButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="Width" Value="48"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="Background" Value="Red" />
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
            <Setter Property="AutomationProperties.Name" Value="Back"/>
            <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid">
                            <Grid Background="Transparent">
                                <Viewbox Width="30" Height="30">
                                    <Grid  HorizontalAlignment="Right" Height="38" VerticalAlignment="Top" Width="38">
                                        <Ellipse Stroke="Black" StrokeThickness="2.5" x:Name="Hover" Width="38" Height="38" Fill="Transparent" Opacity="1" Visibility="Visible" />
                                        <Path x:Name="pressed" Data="M8.5704565,0 L14.74649,0 L8.5095301,6.2419558 L22.002934,6.2419558 L22.002934,10.902534 L8.5095301,10.902534 L14.74649,17.138 L8.5704565,17.138 L0,8.5690022 z" Fill="Black" Margin="8.83,11.333,9.167,11.529" RenderTransformOrigin="0.942669412044434,0.769618333920011" Stretch="Fill" />
                                        <Path Data="M39,20 C39,30.49341 30.49341,39 20,39 C9.5065899,39 1,30.49341 1,20 C1,9.5065899 9.5065899,1 20,1 C30.49341,1 39,9.5065899 39,20 z" Stretch="Fill" Stroke="Black" StrokeThickness="2"  />
                                    </Grid>
                                </Viewbox>
                            </Grid>
 
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Hover" To="LightGray" Duration="0"  Storyboard.TargetProperty="Fill.Color"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Hover" To="Black" Duration="0"  Storyboard.TargetProperty="Fill.Color"/>
                                            <ColorAnimation Storyboard.TargetName="pressed" To="White" Duration="0"  Storyboard.TargetProperty="Fill.Color"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Fill.Color" Storyboard.TargetName="pressed" To="Gray" Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TreeHeaderStyle" TargetType="ContentControl">
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
        <Style TargetType="navigation:SfTreeNavigator" x:Key="SfTreeNavigatorStyle1">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="navigation:SfTreeNavigator">
                        <Border Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                                    BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Border x:Name="PART_DefaultModeHeader">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Button Grid.Column="0" x:Name="PART_BackButton" Style="{StaticResource BackButtonStyle}"
                                            IsTabStop="{TemplateBinding IsTabStop}"/>
                                        <ContentControl 
                                        Content="{Binding DrillDownItem.Header,RelativeSource={RelativeSource TemplatedParent}}" Foreground="#FF000000"
                                        ContentTemplate="{Binding DrillDownItem.HeaderTemplate,RelativeSource={RelativeSource TemplatedParent}}"
                                        ContentTemplateSelector="{Binding DrillDownItem.HeaderTemplateSelector,RelativeSource={RelativeSource TemplatedParent}}"
                                        Grid.Column="1" HorizontalAlignment="Left" FontSize="25" IsTabStop="False"/>
                                    </Grid>
                                </Border>
                                <Grid x:Name="PART_ExtendedModeHeader" Visibility="Collapsed">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <ContentControl Content="{TemplateBinding Header}" IsTabStop="False"
                                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"                                              
                                                HorizontalAlignment="Left" FontSize="25"
                                                ></ContentControl>
                                    <navigation:TreeNavigatorItemsHost  Grid.Row="1"
                                        HorizontalAlignment="Stretch"
                                         ItemTemplate="{TemplateBinding ItemTemplate}"
                                            IsHeaderHost="True"
                                                          ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                          ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                                                          ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"                                                          
                                         x:Name="PART_DrillDownItemsHost"
                                        ItemsSource="{TemplateBinding DrillDownItems}"
                                        >
                                    </navigation:TreeNavigatorItemsHost>
                                </Grid>
                                <shared:SfNavigator ActiveIndex="0" Background="{TemplateBinding Background}"  x:Name="PART_Navigator" Grid.Row="2" IsTabStop="False">
                                    <navigation:TreeNavigatorItemsHost  Header="{TemplateBinding Header}" 
                                                          ItemTemplate="{TemplateBinding ItemTemplate}"
                                                          ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                                          ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                                                          ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"                                                         
                                                          ItemsSource="{Binding Items, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                          x:Name="PART_Host" IsTabStop="False"/>
                                </shared:SfNavigator>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="navigation:SfTreeNavigatorItem">
            <Setter Property="BorderThickness" Value="0 0 0 0"/>
            <Setter Property="BorderBrush" Value="#5D5D5D"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="navigation:SfTreeNavigatorItem">
                        <Border Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" 
                                                         Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                         Storyboard.TargetName="PART_Selection" 
                                                        />
                                            <ColorAnimation Duration="0" To="White"                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="contentControl" />
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_Hover" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" 
                                                         Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                         Storyboard.TargetName="PART_Selection" 
                                                        />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_Pressed" />
                                            <DoubleAnimationUsingKeyFrames Duration="0"  Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="contentControl1" >
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value=".97" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="contentControl1" >
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value=".97" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="MainBorder" Background="Transparent">
                                <Grid>
                                    <Rectangle x:Name="PART_Selection"  Grid.ColumnSpan="2"  Opacity="0" Fill="{StaticResource SelectedBackground}"/>
                                    <Rectangle x:Name="PART_Focus" Grid.ColumnSpan="2" Stroke="Black" Margin="2" Opacity="0" StrokeDashArray="2 2"/>
                                    <Rectangle x:Name="PART_Hover" Grid.ColumnSpan="2" Fill="{StaticResource Hovercolor}" Opacity="0"/>
                                    <Rectangle x:Name="PART_Pressed" Grid.ColumnSpan="2"  Fill="#FFF0F0F0" Opacity="0"/>
                                    <Grid Margin="{TemplateBinding Padding}" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Background="Transparent">
                                        <Grid x:Name="contentControl1" RenderTransformOrigin="0.5,0.5">
                                            <Grid.RenderTransform>
                                                <TranslateTransform/>
                                            </Grid.RenderTransform>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <ContentPresenter x:Name="contentControl" 
                                                      ContentTemplate="{TemplateBinding HeaderTemplate}"     
                                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                                      Content="{TemplateBinding Header}" >
                                            </ContentPresenter>
                                            <Path Data="F1M568.254,-7.43524L568.159,-7.34277 567.977,-7.52246 546.559,-28.9417 525.484,-28.9417 549.787,-4.63446 557.439,3.01532 557.619,3.19629 550.067,10.7549 525.758,35.0583 546.834,35.0583 568.254,13.6429 578.792,3.10254 568.254,-7.43524z" 
                                          Stretch="Uniform" Fill="{TemplateBinding Foreground}" 
                                          Width="7" Height="12" x:Name="PART_Arrow" Margin="5"
                                          Grid.Column="1" HorizontalAlignment="Right"
                                          Visibility="{Binding HasItems, Converter={StaticResource VisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="PART_Arrow" Property="Fill" Value="White"/>
                                <Setter TargetName="PART_Selection" Property="Opacity" Value="0.0"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="PART_Hover" Property="Opacity" Value="1.0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="navigation:TreeNavigatorHeaderItem">
            <Setter Property="BorderBrush" Value="#5D5D5D"/>
            <Setter Property="Background" Value="{StaticResource SelectedHeaderBackground}"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Padding" Value="2"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="navigation:TreeNavigatorHeaderItem">
                        <Border Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Rectangle x:Name="PART_Selection" Grid.ColumnSpan="2"  Opacity="0"/>
                                <Rectangle x:Name="PART_Focus" Grid.ColumnSpan="2" Stroke="Black" Margin="2" Opacity="0" StrokeDashArray="2 2"/>
                                <Rectangle x:Name="PART_Hover" Grid.ColumnSpan="2" Fill="#FFF0F0F0" Opacity="0"/>
                                <Rectangle x:Name="PART_Pressed" Grid.ColumnSpan="2"  Fill="#FFF0F0F0" Opacity="0"/>
                                <Grid Margin="{TemplateBinding Padding}" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Background="Transparent">
                                    <Grid x:Name="contentControl1" RenderTransformOrigin="0.5,0.5">
                                        <Grid.RenderTransform>
                                            <TranslateTransform/>
                                        </Grid.RenderTransform>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <ContentPresenter x:Name="contentControl" 
                                                      ContentTemplate="{TemplateBinding HeaderTemplate}"     
                                                      ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                                      Content="{TemplateBinding Header}" >
                                        </ContentPresenter>
                                        <Path Data="F1M568.254,-7.43524L568.159,-7.34277 567.977,-7.52246 546.559,-28.9417 525.484,-28.9417 549.787,-4.63446 557.439,3.01532 557.619,3.19629 550.067,10.7549 525.758,35.0583 546.834,35.0583 568.254,13.6429 578.792,3.10254 568.254,-7.43524z" 
                                          Stretch="Uniform" Fill="{TemplateBinding Foreground}" Margin="5"
                                          Width="7" Height="12" x:Name="PART_Arrow" RenderTransformOrigin="0.5,0.5"
                                          Grid.Column="1" HorizontalAlignment="Right"
                                          >
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="180"></RotateTransform>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="navigation:TreeNavigatorItemsHost">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="navigation:TreeNavigatorItemsHost">
                        <Grid>
                            <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <ScrollViewer VerticalScrollBarVisibility="Auto">
                                        <ItemsPresenter Grid.Row="1"/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
        <Grid>
        <navigation:SfTreeNavigator Header="EssentialStudio" NavigationMode="Extended" Style="{StaticResource SfTreeNavigatorStyle1}">
                <navigation:SfTreeNavigatorItem Header="WinRT">
                    <navigation:SfTreeNavigatorItem Header="SfTreeNavigator"/>
                    <navigation:SfTreeNavigatorItem Header="SfTileView"/>
                    <navigation:SfTreeNavigatorItem Header="SfRadialMenu"/>
                </navigation:SfTreeNavigatorItem>
                <navigation:SfTreeNavigatorItem Header="WPF">
                    <navigation:SfTreeNavigatorItem Header="Ribbon"/>
                    <navigation:SfTreeNavigatorItem Header="DockingManager"/>
                </navigation:SfTreeNavigatorItem>
                <navigation:SfTreeNavigatorItem Header="Silverlight"/>
                <navigation:SfTreeNavigatorItem Header="Windows Phone"/>
            </navigation:SfTreeNavigator>
    </Grid>

 

Figure 1: Customized Mouse Hover Background

 

Figure 2: Customized Background for SelectedItem

Conclusion

I hope you enjoyed learning about how to customize the style of WPF SfrTreeNavigator.

You can refer to our WPF SfrTreeNavigator page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinRT DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied