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:
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: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
>-->
<!--causes exception-->
<
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
=
"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
=
"#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
>
<
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
>
<
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
>
</
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
>
</
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
>
</
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
>