Category / Section
How to customize the style of WindowsPhone SfTreeNavigator ?
1 min read
You can customize the SfTreeNavigator by editing its Style property.
In the following code example, the style is edited and new keys such as SelectedBackground and SelectedHeaderBackground are defined for modifying its color. By using Selected VisualState, you can modify the selected foreground.
XAML
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.Resources>
<SolidColorBrush x:Key="SelectedBackground" Color="LightSalmon"/>
<SolidColorBrush x:Key="SelectedHeaderBackground" Color="Green"/>
<SolidColorBrush x:Key="AccentBrush">#FFFFFFFF</SolidColorBrush>
<converter:BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
<Style TargetType="ContentControl" x:Key="TreeNavigatorHeaderStyle">
<Setter Property="FontSize" Value="25"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="IsTabStop" Value="False"/>
</Style>
<Style TargetType="navigation:SfTreeNavigator" x:Key="SfTreeNavigatorStyle1">
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
<Setter Property="HeaderStyle" Value="{StaticResource TreeNavigatorHeaderStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="navigation:SfTreeNavigator">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="PART_ExtendedModeHeader">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl Background="Yellow" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{TemplateBinding HeaderStyle}"
></ContentControl>
<navigation:TreeNavigatorItemsHost Grid.Row="1"
HorizontalAlignment="Stretch"
ItemTemplate="{TemplateBinding ItemTemplate}"
TabNavigation="Once"
IsHeaderHost="True"
x:Name="PART_DrillDownItemsHost"
ItemsSource="{TemplateBinding DrillDownItems}"
>
</navigation:TreeNavigatorItemsHost>
</Grid>
<shared:SfNavigator ActiveIndex="0" TabNavigation="Once" x:Name="PART_Navigator" Grid.Row="1" IsTabStop="False">
<navigation:TreeNavigatorItemsHost Header="{TemplateBinding Header}" TabNavigation="Once"
ItemTemplate="{TemplateBinding ItemTemplate}"
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="TabNavigation" Value="Once"/>
<Setter Property="Padding" Value="15"/>
<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>
<ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="contentControl" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentControl1" RenderTransformOrigin="0.5 0.5" >
<Grid >
<Rectangle x:Name="PART_Selection" Grid.ColumnSpan="2" Fill="{StaticResource SelectedBackground}" Opacity="0"/>
<Border Background="Transparent"
Padding="{TemplateBinding Padding}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl Background="AliceBlue" x:Name="contentControl" HorizontalAlignment="Left"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}" >
</ContentControl>
<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="12" Height="17" x:Name="PART_Arrow"
Grid.Column="1" HorizontalAlignment="Right"
Visibility="{Binding HasItems, Converter={StaticResource VisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</Border>
</Grid>
<ContentPresenter.RenderTransform >
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="navigation:TreeNavigatorHeaderItem">
<Setter Property="BorderThickness" Value="0 0 0 0"/>
<Setter Property="BorderBrush" Value="#5D5D5D"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="Background" Value="{StaticResource SelectedHeaderBackground}"/>
<Setter Property="Padding" Value="15"/>
<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>
<ColorAnimation Duration="0" To="{StaticResource PhoneAccentColor}"
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>
<ColorAnimation Duration="0" To="{TemplateBinding Foreground}"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="contentControl" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentControl1" RenderTransformOrigin="0.5 0.5" >
<Grid >
<Border Background="Transparent"
Padding="{TemplateBinding Padding}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="contentControl" HorizontalAlignment="Left"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}" >
</ContentControl>
<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="12" Height="17" x:Name="PART_Arrow" RenderTransformOrigin="0.5,0.5"
Grid.Column="1" HorizontalAlignment="Right"
>
<Path.RenderTransform>
<RotateTransform Angle="180"></RotateTransform>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
</Grid>
<ContentPresenter.RenderTransform >
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="navigation:TreeNavigatorItemsHost">
<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>
</Grid.Resources>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<navigation:SfTreeNavigator Header="EssentialStudio" 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>
</Grid>
Figure 1: Customized Background for SelectedItem
Conclusion
I hope you enjoyed learning about how toto customize the style of WindowsPhone SfTreeNavigator.
You can refer to our WindowsPhone SfTreeNavigator featuretour 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
