This is a migrated thread and some comments may be shown as answers.

ItemTemplateSelector combined with ItemContainerStyle?

4 Answers 529 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Erik asked on 09 Mar 2012, 02:46 PM

I have a RadTreeView bound to a collection that contains two types of objects, "Container" and "Item". I use an ItemTemplateSelector to set the correct (Hierarchical)DataTemplate. So far so good, but now I want to style the RadTreeViewItem so I can change selected visual styles and indents and such. I've added an ItemContainerStyle to the RadTreeView, but now the ItemTemplateSelector doesn't work anymore, the RadTreeView is rendered showing type names for all the items.

Is there a way to combine ItemTemplateSelector with an ItemContainerStyle? Should I be using another approach?

My sample code:

public class Container : INotifyPropertyChanged

{

public Container()

{

Children = new ObservableCollection<object>();

}

// Public properties

public ObservableCollection<object> Children { get; private set; }

private string _displayName;

public string DisplayName

{

get { return _displayName; }

set

{

_displayName = value;

OnPropertyChanged("DisplayName");

}

// INotifyPropertyChanged members

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(string propertyName)

{

if(PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

public class Item : INotifyPropertyChanged

{

// Public properties

private string _displayName;

public string DisplayName

{

get { return _displayName; }

set

{

_displayName = value;

OnPropertyChanged("DisplayName");

}

// INotifyPropertyChanged members

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(string propertyName)

{

if(PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

public partial class MainWindow

{

// Constructors

public MainWindow()

{

InitializeComponent();

CreateDummyData();

DataContext = this;

}

// Public properties

public ObservableCollection<object> Items { get; private set; }

// Private methdods

private void CreateDummyData()

{

Items = new ObservableCollection<object>();

// level 0

var i1 = new Item { DisplayName = "Item 1" };

Items.Add(i1);

var i2 = new Item { DisplayName = "Item 2" };

Items.Add(i2);

var c1 = new Container { DisplayName = "Container 1" };

Items.Add(c1);

var c2 = new Container { DisplayName = "Container 2" };

Items.Add(c2);

var i8 = new Item { DisplayName = "Item 8" };

Items.Add(i8);

var c3 = new Container { DisplayName = "Container 3" };

Items.Add(c3);

var i11 = new Item { DisplayName = "Item 11" };

Items.Add(i11);

// Level 1.0

var c1S1 = new Container { DisplayName = "Subcontainer 1" };

c1.Children.Add(c1S1);

var c1S2 = new Container { DisplayName = "Subcontainer 2" };

c1.Children.Add(c1S2);

var i3 = new Item { DisplayName = "Item 3" };

c1.Children.Add(i3);

var i4 = new Item { DisplayName = "Item 4" };

c1.Children.Add(i4);

var i12 = new Item { DisplayName = "Item 12" };

c1.Children.Add(i12);

// Level 1.0.0

var c1S1S1 = new Container { DisplayName = "Subsubcontainer 1" };

c1S1.Children.Add(c1S1S1);

var i5 = new Item { DisplayName = "Item 5" };

c1S1.Children.Add(i5);

var i6 = new Item { DisplayName = "Item 6" };

c1S1.Children.Add(i6);

var i7 = new Item { DisplayName = "Item 7" };

c1S1S1.Children.Add(i7);

// Level 1.0.1

var i15 = new Item { DisplayName = "Item 15" };

c1S2.Children.Add(i15);

var i16 = new Item { DisplayName = "Item 16" };

c1S2.Children.Add(i16);

var i17 = new Item { DisplayName = "Item 17" };

c1S2.Children.Add(i17);

// Level 1.0.0.0

var i13 = new Item { DisplayName = "Item 13" };

c1S1S1.Children.Add(i13);

var i14 = new Item { DisplayName = "Item 14" };

c1S1S1.Children.Add(i14);

// Level 3.0

var i9 = new Item { DisplayName = "Item 9" };

c3.Children.Add(i9);

var i10 = new Item { DisplayName = "Item 10" };

c3.Children.Add(i10);

}

public class MyDataTemplateSelector : DataTemplateSelector

{

public HierarchicalDataTemplate ContainerTemplate { get; set; }

public DataTemplate ItemTemplate { get; set; }

public override DataTemplate SelectTemplate(object item, DependencyObject container)

{

if(item is Item)

{

return ItemTemplate;

}

return ContainerTemplate;

}

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:TreeViewTest="clr-namespace:TreeViewTest"

xmlns:System_Windows_Automation="clr-namespace:System.Windows.Automation;assembly=UIAutomationTypes"

x:Class="TreeViewTest.MainWindow"

Title="MainWindow" Height="350" Width="525">

<Window.Resources>

<HierarchicalDataTemplate x:Key="ContainerTemplate" ItemsSource="{Binding Children}">

<TextBlock Text="{Binding DisplayName}" Background="Red"/>

</HierarchicalDataTemplate>

<DataTemplate x:Key="ItemTemplate">

<TextBlock Text="{Binding DisplayName}" Background="Green"/>

</DataTemplate>

<TreeViewTest:MyDataTemplateSelector

x:Key="MyDataTemplateSelector"

ContainerTemplate="{StaticResource ContainerTemplate}"

ItemTemplate="{StaticResource ItemTemplate}"/>

<Style x:Key="RadTreeViewItemStyle" 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>

<Setter.Value>

<System_Windows_Automation:ToggleState>Off</System_Windows_Automation:ToggleState>

</Setter.Value>

</Setter>--> 

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Padding" Value="1,0,5,0"/>

<Setter Property="IsDropAllowed" Value="True"/>

<Setter Property="ItemsOptionListType" Value="Default"/>

<Setter Property="IsEnabled" Value="True"/>

<Setter Property="MinHeight" Value="24"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">

<Grid x:Name="RootElement">

<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="*"/>

</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="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">

<Border BorderBrush="White" BorderThickness="1" CornerRadius="0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFBA3" Offset="1"/>

<GradientStop Color="#FFFFFBDA" Offset="0"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">

<Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="0">

<Border.Background>

<LinearGradientBrush EndPoint="0,1">

<GradientStop Color="#FFF8F6F9" Offset="0"/>

<GradientStop Color="#FFF0F0F0" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">

<Border BorderBrush="White" BorderThickness="1" CornerRadius="0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFCE79F" Offset="1"/>

<GradientStop Color="#FFFDD3A8"/>

</LinearGradientBrush>

</Border.Background>

</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="20">

<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>

<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>

<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" 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 Grid.ColumnSpan="2" Grid.Column="4">

<ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 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>

<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>

</Window.Resources>

<Grid>

<telerik:RadTreeView

ItemsSource="{Binding Items}"

ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"

ItemContainerStyle="{DynamicResource RadTreeViewItemStyle}"/>

</Grid>

</Window>

4 Answers, 1 is accepted

Accepted

answered on 14 Mar 2012, 05:07 PM

TreeViewTest.zip

Hi Erik,

You've just hit a bug in the RadTreeView so we updated your telerik account points. Unfortunately, when you extract the Style of the RadTreeViewItem , there is a line that is not extracted properly :

<ContentPresenter x:Name="Header"

ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Content="{TemplateBinding Header}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

You can see this fixed in the attached project . Please excuse us for the inconvenience caused.

Greetings,
Petar Mladenov
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

answered on 07 Mar 2018, 06:53 AM

Hi,

I'm facing same problem. My ItemTemplateSelector doesn't work with my ItemContainerStyle.

ItemContainerStyle which i'm using is as follows:

<Style x:Key="SelectionStyle" TargetType="{x:Type telerik:RadTreeViewItem}">

<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />

<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />

<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="CheckState" Value="Off"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition/>

</Grid.RowDefinitions>

<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Border x:Name="MouseOverVisual" BorderBrush="White" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">

<Border BorderBrush="#CCE6FF" BorderThickness="1" CornerRadius="0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#CCE6FF" Offset="1"/>

<GradientStop Color="#CCE6FF" Offset="0"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Border x:Name="SelectionUnfocusedVisual" BorderBrush="#B3DAFF" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">

<Border BorderBrush="#B3DAFF" BorderThickness="1" CornerRadius="0">

<Border.Background>

<!--<LinearGradientBrush EndPoint="0,1">

<GradientStop Color="#FFF8F6F9" Offset="0"/>

<GradientStop Color="#FFF0F0F0" Offset="1"/>

</LinearGradientBrush>-->

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B3DAFF" Offset="1" />

<GradientStop Color="#B3DAFF" />

</LinearGradientBrush>

</Border.Background>

</Border>

<Border x:Name="SelectionVisual" BorderBrush="#80C1FF" BorderThickness="1" Grid.ColumnSpan="5" Grid.Column="3" CornerRadius="1" Visibility="Collapsed">

<Border BorderBrush="#80C1FF" BorderThickness="1" CornerRadius="0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#80C1FF" Offset="1"/>

<GradientStop Color="#80C1FF"/>

</LinearGradientBrush>

</Border.Background>

</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="20">

<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"/>

</Grid>

<CheckBox x:Name="CheckBoxElement" IsEnabled="{Binding HasChildren, Mode=OneWay}" 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>

<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>

<Grid Grid.ColumnSpan="2" Grid.Column="4">

</Grid>

<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsInEditMode" Value="True">

<Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>

<Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>

</Trigger>

<Trigger Property="IsSelected" Value="True">

<Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>

<Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>

</Trigger>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="IsSelected" Value="True"/>

<Condition Property="IsSelectionActive" Value="False"/>

</MultiTrigger.Conditions>

<Setter Property="Opacity" TargetName="SelectionVisual" Value="0"/>

<Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>

</MultiTrigger>

<Trigger Property="IsEnabled" Value="False">

<Setter Property="Opacity" TargetName="Header" Value="0.5"/>

</Trigger>

<Trigger Property="IsExpanded" Value="True">

<Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>

</Trigger>

<Trigger Property="IsLoadingOnDemand" Value="True">

<Trigger.EnterActions>

<BeginStoryboard x:Name="LoadingVisualTransform">

<Storyboard>

<DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<StopStoryboard BeginStoryboardName="LoadingVisualTransform"/>

</Trigger.ExitActions>

<Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>

<Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>

</Trigger>

<Trigger Property="IsDragOver" Value="True">

<Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>

</Trigger>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="IsMouseOver" SourceName="HeaderRow" Value="True"/>

<Condition Property="IsEnabled" SourceName="CheckBoxElement" Value="True"/>

</MultiTrigger.Conditions>

<Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>

</MultiTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

Kindly let me know about the issue in my ItemCOntainerStyle.

Regards,

Tayyaba