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

Customizing the hierarchical treelistview

12 Answers 158 Views
TreeListView
This is a migrated thread and some comments may be shown as answers.
Todd Millett
Top achievements
Rank 1
Todd Millett asked on 07 Jun 2011, 04:49 AM
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.

12 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 07 Jun 2011, 07:06 AM
Hi,

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

Kind regards,
Vlad
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 07:19 AM
Are you referring to RadTreeListView.RowDetailsTemplate ?
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 07:41 AM
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...
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 02:25 PM
It would be very helpful if you can provide a sample for the same, as we are stuck with that.
0
Vlad
Telerik team
answered on 07 Jun 2011, 02:35 PM
Hi,

 Have you tried to extract TreeListViewRow template with Blend? 

Regards,
Vlad
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 03:03 PM
Yes I Tried editing its template, but the expand and collapse functionality stopped working.
0
Vlad
Telerik team
answered on 07 Jun 2011, 03:05 PM
Hi,

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

Regards,
Vlad
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 03:14 PM
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>
0
Vanya Pavlova
Telerik team
answered on 07 Jun 2011, 03:37 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 04:10 PM
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.
0
Todd Millett
Top achievements
Rank 1
answered on 07 Jun 2011, 04:12 PM
If you can give some pointers on that, would be helpful.
0
Vanya Pavlova
Telerik team
answered on 07 Jun 2011, 04:21 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TreeListView
Asked by
Todd Millett
Top achievements
Rank 1
Answers by
Vlad
Telerik team
Todd Millett
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Share this question
or