Hi there.
I ran into a problem when changing the template for TreeView control. I modified the ItemContainerStyle as follows:
<Style x:Key="FileBrowserItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1,4,5,4"/>
<Setter Property="MinHeight" Value="24"/>
<Setter Property="IsDropAllowed" Value="True"/>
<Setter Property="IsEnabled" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
<Grid x:Name="RootElement" UseLayoutRounding="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Display"/>
<VisualState x:Name="Edit">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LoadingOnDemandStates">
<VisualState x:Name="LoadingOnDemand">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="LoadingOnDemandReverse"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>
<Border x:Name="MouseOverVisual" BorderBrush="#FF838383" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDADADA" Offset="1"/>
<GradientStop Color="#FFB6B6B6" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF8F6F9" Offset="0"/>
<GradientStop Color="#FFCBCBCB" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<Border x:Name="SelectionVisual" BorderBrush="#FF494949" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBBBBBB" Offset="1"/>
<GradientStop Color="#FF959595"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
</Border>
<StackPanel x:Name="IndentContainer" Orientation="Horizontal">
<Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
</StackPanel>
<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="21">
<Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>
<Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>
<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
<Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
</TransformGroup>
</Grid.RenderTransform>
<Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
<Path Data="M0,-1.1L0.1,-1 0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
</Grid>
</Grid>
<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="20" MaxHeight="20" Margin="2" VerticalAlignment="Center"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
<Grid x:Name="HeaderContentPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="4">
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="EditHeaderElement" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</CheckBox>
<RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</RadioButton>
</Grid>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
and assigned the template to the control:
<telerik:RadTreeView x:Name="FileList" FontSize="18" FontFamily="Courier New" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="150" Background="#FFEEEEEE" Style="{DynamicResource FileBrowserStyl}" ItemContainerStyle="{DynamicResource FileBrowserItemStyle}"/>
All I really did was changing the color of the selected item from orange to grey but it only seems to change the color for the first level of hierarchy (image attached). I thought the ItemContainerStyle applies for all levels. Am I missing something?
Would really appreciate your help.
Thank you