Customizing the hierarchical treelistview

[Todd Millett]

We have a hierarchical data structure which is bind properly with the treelistview and displays proper hierarchy. I want to style it somewhat like the one here : http://demos.telerik.com/silverlight/#GridView/CustomRowLayout. I tried that way, but the expand collapse functionality disappears. Can you please help me out with it.

[Vlad]

Hi,

 You can extract the TreeListViewRow template using Blend if you want to customize the treelist rows layout. 

Kind regards,
Vlad
the Telerik team

[Todd Millett]

Are you referring to RadTreeListView.RowDetailsTemplate ?

[Todd Millett]

From the list of parts described here : http://www.telerik.com/help/silverlight/radtreelistview-templates-structure.html
for the listviewrow which part should i customize to get a custom style. I tried :

<telerik:DetailsPresenter x:Name="PART_DetailsPresenter" Grid.ColumnSpan="2" Grid.Column="2" DetailsProvider="{TemplateBinding DetailsProvider}" Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Body}" />
                        </StackPanel>
                    </telerik:DetailsPresenter>

but it didnt work...

[Todd Millett]

It would be very helpful if you can provide a sample for the same, as we are stuck with that.

[Vlad]

Hi,

 Have you tried to extract TreeListViewRow template with Blend? 

Regards,
Vlad
the Telerik team

[Todd Millett]

Yes I Tried editing its template, but the expand and collapse functionality stopped working.

[Vlad]

Hi,

 Can you post the template you've extracted from Blend? 

Regards,
Vlad
the Telerik team

[Todd Millett]

Please find the template extracted for the treelistviewrow : I tried changing the text highlighted in bold

<UserControl.Resources>

<SolidColorBrush x:Key="ItemOuterBorder_Over" Color="#FFFFC92B"/>
<SolidColorBrush x:Key="ItemInnerBorder_Over" Color="White"/>
<LinearGradientBrush x:Key="ItemBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ItemOuterBorder_Selected" Color="#FFFFC92B"/>
<SolidColorBrush x:Key="ItemInnerBorder_Selected" Color="White"/>
<LinearGradientBrush x:Key="ItemBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCE79F" Offset="1"/>
<GradientStop Color="#FFFDD3A8"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ItemOuterBorder_Invalid" Color="#FFCE7D7D"/>
<LinearGradientBrush x:Key="ItemInnerBorder_Invalid" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEBF4FD"/>
<GradientStop Color="#FFDBEAFD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ItemBackground_Invalid" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCDCDC"/>
<GradientStop Color="#FFFCC1C1" Offset="1"/>
</LinearGradientBrush>
<telerik:Office_BlackTheme x:Key="Theme"/>
<telerik:GridLineWidthToThicknessConverter x:Key="GridLineWidthToThicknessConverter"/>
<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>
<SolidColorBrush x:Key="ControlInnerBorder" Color="White"/>
<SolidColorBrush x:Key="GridView_RowIndicatorCellBackground" Color="#FFE4E4E4"/>
<SolidColorBrush x:Key="GridView_NavigatorIndicatorBackground" Color="#FF848484"/>
<SolidColorBrush x:Key="GridView_EditIndicatorBackground1" Color="#7F848484"/>
<SolidColorBrush x:Key="GridView_EditIndicatorBackground2" Color="#FFCBCBCB"/>
<SolidColorBrush x:Key="GridView_EditIndicatorBackground3" Color="#FF848484"/>
<SolidColorBrush x:Key="GridView_EditIndicatorBackground4" Color="White"/>
<LinearGradientBrush x:Key="GridView_ErrorIndicatorBackground1" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFC9999" Offset="0"/>
<GradientStop Color="#FFC26666" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="GridView_ErrorIndicatorBackground2" Color="White"/>
<LinearGradientBrush x:Key="GridView_ErrorIndicatorBackground3" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FF990000" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridView_RowIndicatorCellBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFE4E4E4" Offset="1"/>
</LinearGradientBrush>
<ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
<Grid>
<!--<ItemsPresenter/>-->
<StackPanel Height="40" Orientation="Horizontal">
<TextBlock Text="{Binding Property1}" />
<TextBlock Text=" --- " />
<TextBlock Text="{Binding Property2}" />
</StackPanel>
<telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left" telerik:StyleManager.Theme="{StaticResource Theme}"/>
</Grid>
</ControlTemplate>
<Style x:Key="DataCellsPresenterStyle1" TargetType="telerik:DataCellsPresenter">
<Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:GridViewCellsPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="TreeListViewRowTemplate" TargetType="telerik:TreeListViewRow">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<Style TargetType="telerik:GridViewToggleButton">
<Setter Property="PresentationMode" Value="Arrow"/>
</Style>
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NavigatorIndicator">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Over">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Selected">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="NavigatorIndicatorBackground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_RowIndicatorCellBackground_Selected}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValueStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="Invalid">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Invalid">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ErrorIndicator">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditIndicator">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NavigatorIndicator">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:SelectiveScrollingGrid x:Name="grid" Background="Transparent">
<telerik:SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</telerik:SelectiveScrollingGrid.ColumnDefinitions>
<telerik:SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</telerik:SelectiveScrollingGrid.RowDefinitions>
<Grid x:Name="PART_SelectiveScrollingElements" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="SelectionBackground" Background="{TemplateBinding Background}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="Background_Over" BorderBrush="{StaticResource ItemOuterBorder_Over}" BorderThickness="1" Grid.Column="1" CornerRadius="1" Margin="1,1,1,2" Visibility="Collapsed">
<Border BorderBrush="{StaticResource ItemInnerBorder_Over}" BorderThickness="1" Background="{StaticResource ItemBackground_Over}"/>
</Border>
<Border x:Name="Background_Selected" BorderBrush="{StaticResource ItemOuterBorder_Selected}" BorderThickness="1" Grid.Column="1" CornerRadius="1" Margin="1,1,1,2" Visibility="Collapsed">
<Border BorderBrush="{StaticResource ItemInnerBorder_Selected}" BorderThickness="1" Background="{StaticResource ItemBackground_Selected}"/>
</Border>
<Border x:Name="Background_Invalid" BorderBrush="{StaticResource ItemOuterBorder_Invalid}" BorderThickness="1" Grid.Column="1" CornerRadius="1" Margin="1,1,1,2" Visibility="Collapsed">
<Border BorderBrush="{StaticResource ItemInnerBorder_Invalid}" BorderThickness="1" Background="{StaticResource ItemBackground_Invalid}"/>
</Border>
</Grid>
<telerik:GridViewToggleButton x:Name="PART_ExpandButton" Grid.ColumnSpan="2" Grid.Column="1" HorizontalAlignment="Left" HorizontalContentAlignment="Center" IsTabStop="False" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" Width="20"/>
<telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.ColumnSpan="2" Grid.Column="1" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource DataCellsPresenterStyle1}">
<telerik:DataCellsPresenter.ItemsPanel>
<ItemsPanelTemplate>
<telerik:TreeListCellsPanel/>
</ItemsPanelTemplate>
</telerik:DataCellsPresenter.ItemsPanel>
</telerik:DataCellsPresenter>
<Border x:Name="PART_RowBorder" BorderBrush="{TemplateBinding HorizontalGridLinesBrush}" BorderThickness="{Binding HorizontalGridLinesWidth, ConverterParameter=Bottom, Converter={StaticResource GridLineWidthToThicknessConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.ColumnSpan="3" Grid.Column="1" Grid.RowSpan="4" VerticalAlignment="Bottom"/>
<telerik:DetailsPresenter x:Name="PART_DetailsPresenter" Grid.ColumnSpan="2" Grid.Column="2" DetailsProvider="{TemplateBinding DetailsProvider}" Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed"/>
<Border x:Name="PART_IndicatorPresenter" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,1,1" Grid.Column="0" Grid.RowSpan="3" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="25">
<Border x:Name="NavigatorIndicatorBackground" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{StaticResource GridView_RowIndicatorCellBackground}">
<Grid>
<Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" Height="11" Visibility="Collapsed" VerticalAlignment="Center" Width="11">
<Path Data="F1 M 32.0234,6.66669L 24.2923,0.0248413L 28.3697,0.0248413L 32,3.14362L 36.1492,6.70819L 32,10.2728L 28.4664,13.3085L 24.2923,13.3085L 32.0234,6.66669 Z " Fill="{StaticResource GridView_NavigatorIndicatorBackground}" HorizontalAlignment="Center" Height="8" Margin="0" Stretch="Fill" VerticalAlignment="Center" Width="8"/>
</Grid>
<Grid x:Name="EditIndicator" HorizontalAlignment="Center" Height="10" Visibility="Collapsed" VerticalAlignment="Center" Width="16">
<Path Data="M14,9 L15,9 15,10 14,10 z M1,9 L2,9 2,10 1,10 z M15,8 L16,8 16,9 15,9 z M0,8 L1,8 1,9 0,9 z M15,1 L16,1 16,2 15,2 z M0,1 L1,1 1,2 0,2 z M14,0 L15,0 15,1 14,1 z M1,0 L2,0 2,1 1,1 z" Fill="{StaticResource GridView_EditIndicatorBackground1}" Stretch="Fill"/>
<Path Data="M0.99999994,6.9999995 L2,6.9999995 3,6.9999995 4,6.9999995 5,6.9999995 6,6.9999995 7,6.9999995 8,6.9999995 9,6.9999995 10,6.9999995 11,6.9999995 12,6.9999995 13,6.9999995 13,7.9999995 12,7.9999995 11,7.9999995 10,7.9999995 9,7.9999995 8,7.9999995 7,7.9999995 6,7.9999995 5,7.9999995 4,7.9999995 3,7.9999995&#xa;2,7.9999995 0.99999994,7.9999995 z M13,0.99999994 L14,0.99999994 14,1.9999999 14,2.9999995 14,3.9999995 14,4.9999995 14,5.9999995 14,6.9999995 13,6.9999995 13,5.9999995 13,4.9999995 13,3.9999995 13,2.9999995 13,1.9999999 z M0,0.99999994 L0.99999994,0.99999994 0.99999994,1.9999999 0.99999994,2.9999995 0.99999994,3.9999995 0.99999994,4.9999995 0.99999994,5.9999995 0.99999994,6.9999995 0,6.9999995 0,5.9999995 0,4.9999995 0,3.9999995 0,2.9999995 0,1.9999999 z M11,0 L12,0 13,0 13,0.99999994 12,0.99999994 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 4,0.99999994 3,0.99999994 2,0.99999994 0.99999994,0.99999994 0.99999994,2.3841858E-07 2,2.3841858E-07 3,2.3841858E-07 4,2.3841858E-07 5,2.3841858E-07 6,2.3841858E-07 7,2.3841858E-07 8,2.3841858E-07&#xa;9,2.3841858E-07 10,2.3841858E-07 z" Fill="{StaticResource GridView_EditIndicatorBackground2}" Margin="1" Stretch="Fill"/>
<Path Data="M2,9 L3,9 4,9 5,9 6,9 7,9 8,9 9,9 10,9 11,9 12,9 13,9 14,9 14,10 13,10 12,10 11,10 10,10 9,10 8,10 7,10 6,10 5,10 4,10&#xa;3,10 2,10 z M14,8 L15,8 15,9 14,9 z M1,8 L2,8 2,9 1,9 z M15,2 L16,2 16,3 16,4 16,5 16,6 16,7 16,8 15,8 15,7 15,6 15,5 15,4 15,3 z M3,2 L4,2 5,2 6,2 6,3 5,3 5,4 5,5 5,6 5,7 6,7 6,8 5,8 4,8 3,8 3,7 4,7 4,6 4,5 4,4 4,3 3,3 z M0,2 L1,2 1,3 1,4 1,5 1,6 1,7 1,8 0,8 0,7 0,6 0,5 0,4 0,3 z M14,1 L15,1 15,2 14,2 z M1,1 L2,1 2,2 1,2 z M2,0 L3,0 4,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 13,0 14,0 14,1 13,1 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1&#xa;3,1 2,1 z" Fill="{StaticResource GridView_EditIndicatorBackground3}" Stretch="Fill"/>
<Path Data="M4,0 L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 12,2 12,3 12,4 12,5.0000001 12,6 11,6 10,6 9,6 8,6 7,6 6,6 5,6 4,6 4,5.0000001&#xa;3,5.0000001 3,4 3,3 3,2 3,1 4,1 z M0,0 L1,0 1,1 2,1 2,2 2,3 2,4 2,5.0000001 1,5.0000001 1,6 0,6 0,5.0000001 0,4 0,3 0,2 0,1 z" Fill="{StaticResource GridView_EditIndicatorBackground4}" Margin="2" Stretch="Fill"/>
</Grid>
<Grid x:Name="ErrorIndicator" HorizontalAlignment="Center" Height="16" Visibility="Collapsed" VerticalAlignment="Center" Width="16">
<Path Data="M3,12.999999 L4,12.999999 5,12.999999 6,12.999999 7,12.999999 8,12.999999 9,12.999999 10,12.999999 11,12.999999 11,13.999999 10,13.999999 9,13.999999 8,13.999999 7,13.999999 6,13.999999 5,13.999999 4,13.999999 3,13.999999 z M11,11.999999 L12,11.999999 12,12.999999 11,12.999999 z M2.0000001,11.999999 L3,11.999999 3,12.999999 2.0000001,12.999999 z M12,10.999999 L13,10.999999 13,11.999999 12,11.999999 z M1,10.999999 L2.0000001,10.999999 2.0000001,11.999999 1,11.999999 z M13,2.9999992 L14,2.9999992 14,3.9999992 14,4.9999992 14,5.9999992 14,6.9999992 14,7.9999992 14,8.9999992 14,9.9999992 14,10.999999 13,10.999999 13,9.9999992 13,8.9999992 13,7.9999992 13,6.9999992 13,5.9999992 13,4.9999992 13,3.9999992 z M0,2.9999992 L1,2.9999992 1,3.9999992 1,4.9999992 1,5.9999992 1,6.9999992 1,7.9999992 1,8.9999992 1,9.9999992 1,10.999999 0,10.999999 0,9.9999992 0,8.9999992 0,7.9999992 0,6.9999992 0,5.9999992 0,4.9999992 0,3.9999992 z M12,1.9999999 L13,1.9999999 13,2.9999992 12,2.9999992 z M1,1.9999999 L2.0000001,1.9999999 2.0000001,2.9999992 1,2.9999992 z M11,0.99999994 L12,0.99999994 12,1.9999999 11,1.9999999 z M2.0000001,0.99999994 L2.9999998,0.99999994 2.9999998,1.9999999 2.0000001,1.9999999 z M2.9999998,0 L3.9999998,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 3.9999998,0.99999994 2.9999998,0.99999994 z" Fill="{StaticResource GridView_ErrorIndicatorBackground1}" Margin="1" Stretch="Fill"/>
<Path Data="M1.4901161E-07,8 L1.0000001,8 2.0000002,8 2.0000002,9 2.0000002,10 1.0000003,10 1.0000003,9 1.0000001,10 1.4901161E-07,10 1.4901161E-07,9 z M1.4901161E-07,0 L1.0000001,0 2.0000002,0 2.0000002,1 2.0000002,2 2.0000002,3 2.0000002,4.0000001 2.0000002,5 2.0000002,5.9999999 2.0000002,7 1.0000001,7 1.4901161E-07,7 1.4901161E-07,5.9999999 1.4901161E-07,5 1.4901161E-07,4.0000001 1.4901161E-07,3 1.4901161E-07,2 0,1 z" Fill="{StaticResource GridView_ErrorIndicatorBackground2}" Margin="7,3" Stretch="Fill"/>
<Path Data="M4,15 L5,15 6,15 7,15 8,15 9,15 10,15 11,15 12,15 12,16 11,16 10,16 9,16 8,16 7,16 6,16 5,16 4,16 z M12,14 L13,14 13,15 12,15 z M3,14 L4,14 4,15 3,15 z M13,13 L14,13 14,14 13,14 z M2,13 L3,13 3,14 2,14 z M14,12 L15,12 15,13 14,13 z M1,12 L2,12 2,13 1,13 z M7,11 L7,12 7,13 8,13 9,13 9,12 9,11 8,11 z M15,4 L16,4 16,5 16,6 16,7 16,8 16,9 16,10 16,11 16,12 15,12 15,11 15,10 15,9 15,8 15,7 15,6 15,5 z M0,4 L1,4 1,5 1,6 1,7 1,8 1,9 1,10 1,11 1,12 0,12 0,11 0,10 0,9 0,8 0,7 0,6 0,5 z M14,3 L15,3 15,4 14,4 z M7,3 L7,4 7,5 7,6 7,7 7,8 7,9 7,10 8,10 9,10 9,9 9,8 9,7 9,6 9,5 9,4 9,3 8,3 z M1,3 L2,3 2,4 1,4 z M13,2 L14,2 14,3 13,3 z M4,2 L5,2 6,2 7,2 8,2 9,2 10,2 11,2 12,2 12,3 13,3 13,4 14,4 14,5 14,6 14,7 14,8 14,9 14,10 14,11 14,12 13,12 13,13 12,13&#xa;12,14 11,14 10,14 9,14 8,14 7,14 6,14 5,14 4,14 4,13 3,13 3,12 2,12 2,11 2,10 2,9 2,8 2,7 2,6 2,5 2,4 3,4 3,3&#xa;4,3 z M2,2 L3,2 3,3 2,3 z M12,1 L13,1 13,2 12,2 z M3,1 L4,1 4,2 3,2 z M4,0 L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1 z" Fill="{StaticResource GridView_ErrorIndicatorBackground3}" Stretch="Fill"/>
</Grid>
</Grid>
</Border>
</Border>
</telerik:SelectiveScrollingGrid>
</Border>
</ControlTemplate>
<SolidColorBrush x:Key="ItemBackground" Color="White"/>
<SolidColorBrush x:Key="GridView_GridLinesItemBorder" Color="#FFCBCBCB"/>
<Style x:Key="TreeListViewRowStyle1" TargetType="telerik:TreeListViewRow">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template" Value="{StaticResource TreeListViewRowTemplate}"/>
<Setter Property="Background" Value="{StaticResource ItemBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource GridView_GridLinesItemBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
</Style>

</UserControl.Resources>


<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource HierararchicalDS}}" Margin="0,1,0,-1">
<StackPanel Orientation="Vertical">
<telerik:RadTreeListView AutoGenerateColumns="True" ItemsSource="{Binding Collection,Mode=OneWay}" Height="200" VerticalAlignment="Top" BorderBrush="White" RowStyle="{StaticResource TreeListViewRowStyle1}">
<telerik:RadTreeListView.ChildTableDefinitions>
               <telerik:TreeListViewTableDefinition ItemsSource="{Binding Collection}">
</telerik:TreeListViewTableDefinition>
           </telerik:RadTreeListView.ChildTableDefinitions>
</telerik:RadTreeListView>


</StackPanel>
</Grid>

[Vanya Pavlova]

Hi Todd,

 

If you want to change different text properties when you select a row you have to add some additional animations targeted at DataCellsPresenter, which is responsible for displaying GridViewCells.

<VisualState x:Name="Selected">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Selected">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="NavigatorIndicatorBackground">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_RowIndicatorCellBackground_Selected}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PART_DataCellsPresenter">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="PART_DataCellsPresenter">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Bold"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

This will not break the expand collapse functionality since you have extracted the full template of TreeListViewRow. You may read more about styling in our online documenation, please follow this link.
Furthermore you may find attached a runnable project that demonstrates the proposed solution. 

All the best,
Vanya Pavlova
the Telerik team

[Todd Millett]

Thanks for that sample, that helped.
Our ultimate goal was to get something like : 
http://demos.telerik.com/silverlight/#GridView/CustomRowLayout
with hierarchical data in treelistview.

[Todd Millett]

If you can give some pointers on that, would be helpful.

[Vanya Pavlova]

Hello Todd,

 

Indeed there is no straightforward way to implement custom row layout in RadTreeListView in the same way as it is implemented in RadGridView. RadTreeListView "does not know" anything about your custom row layout. You have to built it manually. Within such layout you do not have the default indentation between a parent and child row which is internally handled. You may see a ToggleButton which is responsible for expanding and it has two different templates depending on a property of RadTreeListView's HierarchicalExpandButtonStyle property. Thinking in this way I would encourage you to modify the default template of TreeListViewRow rather than to create your own. 

Regards,
Vanya Pavlova
the Telerik team