Category / Section
How to customize the style of Winrt SfTreeNavigator?
1 min read
By default, SfTreeNavigator is Blue color for the SelectedItem and a gray to denote Mouse hover. But the SfTreeNavigator style can be edited to customize the SelectedItem and Mouse hover Background. In the following code example of SfTreeNavigator Style, the highlighted code changes customize the style.
In this code example, style is edited and define new keys such as 'SelectedBackground', 'SelectedHeaderForeground', 'Hovercolor', 'HeaderBackground' for modifying its color. And using Selected Visualstate, you can modify selected foreground.
MainWindow.Xaml
<Page.Resources>
<SolidColorBrush x:Key="SelectedBackground" Color="AliceBlue"/>
<SolidColorBrush x:Key="SelectedHeaderForeground" Color="Green"/>
<SolidColorBrush x:Key="Hovercolor" Color="LemonChiffon"/>
<SolidColorBrush x:Key="HeaderBackground" Color="LightSalmon"/>
<SolidColorBrush x:Key="AccentBrush1">#FFFFFFFF</SolidColorBrush>
<x:String x:Key="BackButtonGlyph"></x:String>
<converter:BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
<Primitives:HierarchicalDataTemplate x:Key="Template" ItemsSource="{Binding Models}">
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
<Primitives:HierarchicalDataTemplate.ItemTemplate>
<Primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}">
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</Primitives:HierarchicalDataTemplate>
</Primitives:HierarchicalDataTemplate.ItemTemplate>
</Primitives:HierarchicalDataTemplate>
<Style x:Key="TreeHeaderStyle" TargetType="ContentControl">
<Setter Property="FontSize" Value="25"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<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">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="BackgroundGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FFF0F0F0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="BackgroundGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ArrowGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FFFFFFFF"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="-1,-16,0,0">
<TextBlock x:Name="BackgroundGlyph" Foreground="{StaticResource BackButtonBackgroundThemeBrush}" Text=""/>
<TextBlock x:Name="NormalGlyph" Foreground="Black" Text="{StaticResource BackButtonGlyph}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Opacity="0" Foreground="{StaticResource BackButtonPressedForegroundThemeBrush}"/>
</Grid>
<Rectangle x:Name="FocusVisualWhite" StrokeDashArray="1,1" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashOffset="1.5" Opacity="0" IsHitTestVisible="False"/>
<Rectangle x:Name="FocusVisualBlack" StrokeDashArray="1,1" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashOffset="0.5" Opacity="0" IsHitTestVisible="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Navigation:SfTreeNavigatorItem">
<Setter Property="BorderThickness" Value="0 0 0 0"/>
<Setter Property="BorderBrush" Value="#5D5D5D"/>
<Setter Property="MinHeight" Value="40"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="AccentBrush" Value="#FF1196CD"/>
<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="Red" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="contentControl" />
<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="PART_Arrow" />
</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">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_Hover" />
</Storyboard>
</VisualState>
<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).(CompositeTransform.ScaleX)" Storyboard.TargetName="contentControl1" >
<DiscreteDoubleKeyFrame KeyTime="0" Value=".97" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="contentControl1" >
<DiscreteDoubleKeyFrame KeyTime="0" Value=".97" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="PART_Selection" Grid.ColumnSpan="2" Fill="{StaticResource SelectedBackground}" 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="{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>
<CompositeTransform/>
</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>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Navigation:TreeNavigatorHeaderItem">
<Setter Property="BorderBrush" Value="#5D5D5D"/>
<Setter Property="Background" Value="{StaticResource HeaderBackground}"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Foreground" Value="{StaticResource SelectedHeaderForeground}"/>
<Setter Property="Padding" Value="2"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="AccentBrush" Value="#FF1196CD"/>
<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>
<CompositeTransform/>
</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 x:Key="SfTreeNavigatorStyle1" TargetType="Navigation:SfTreeNavigator">
<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="HeaderStyle" Value="{StaticResource TreeHeaderStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Navigation:SfTreeNavigator">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid Margin="{TemplateBinding Padding}" x:Name="maingrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="PART_DefaultModeHeader">
<Grid x:Name="PART_DefaultHeaderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="PART_BackButton" Style="{StaticResource BackButtonStyle}"
Visibility="Collapsed" IsTabStop="{TemplateBinding IsTabStop}"/>
<ContentControl Foreground="{StaticResource SelectedHeaderForeground}"
Content="{Binding DrillDownItem.Header, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ContentTemplate="{Binding DrillDownItem.HeaderTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Style="{Binding DrillDownItem.HeaderStyle, RelativeSource={RelativeSource Mode=TemplatedParent}}" ContentTemplateSelector="{Binding DrillDownItem.HeaderTemplateSelector, RelativeSource={RelativeSource Mode=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}"
Style="{TemplateBinding HeaderStyle}"
HorizontalAlignment="Left" FontSize="25"
/>
<Navigation:TreeNavigatorItemsHost Grid.Row="1"
HorizontalAlignment="Stretch" ItemTemplate="{TemplateBinding ItemTemplate}"
IsHeaderHost="True"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
ItemContainerTransitions="{TemplateBinding ItemContainerTransitions}"
x:Name="PART_DrillDownItemsHost"
ItemsSource="{TemplateBinding DrillDownItems}"
/>
</Grid>
<Controls:SfNavigator ActiveIndex="0" Background="{TemplateBinding Background}" TabNavigation="Once" x:Name="PART_Navigator" Grid.Row="2" IsTabStop="False">
<Navigation:TreeNavigatorItemsHost Header="{TemplateBinding Header}" TabNavigation="Once"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}"
ItemContainerTransitions="{TemplateBinding ItemContainerTransitions}"
ItemsSource="{Binding Items, RelativeSource={RelativeSource Mode=TemplatedParent}}"
x:Name="PART_Host" IsTabStop="False"/>
</Controls:SfNavigator>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.DataContext>
<local:TreeViewModel/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Navigation:SfTreeNavigator ItemsSource="{Binding Models}" NavigationMode="Extended" ItemTemplate="{StaticResource Template}" x:Name="TreeNavy" Height="250" Width="350" Style="{StaticResource SfTreeNavigatorStyle1}" />
</Grid>
Figure 1: Customized Mouse hover Background
Figure 2: Customized Background for SelectedItem
