Changing the look of a RadTreeViewItem

[GEB]

For some RadTreeViewItem's within the tree, I want to change the style such that it is a stack panel instead of an image followed by a header.  For example, I may want a horizontal stack panel that has a border object filled with a color, followed by a TextBlock, followed by an image, followed by a text block.  Can I accomplich this simply by applying a style to the specific RadTreeViewItem I want to change?

BTW, I want to be able to choose the style of each RadTreeViewItem,, depending on its level in the tree.  Thanks!

[GEB]

I have developed a small test program for attempting to change the templae of the RadTreeViewItem.  In this sample program, there is no change to the code-behind, only to the XAML.

I have the following questions:

1. How do I get the items to line up vertically at the same level of the tree, even though some items may have an expander, and some may not.  In my example, the items do not line up.
2. When I double-click an item (no effect), and then move the mouse over the item below it, I notice that the items in the tree move vertically slightly.  How do I get rid of this?
3. I cannot get the items to have no "white space" around them.  That is, there is always some space between items, even if all margins are set to 0.  How can I get the blank space out from between the items?
4. When the RadTreeViewItem is defined in the XAML file, I want to pass in item values that will influence the way the item is rendered.  For example, I pass in the color of the Border via the Background attribute.  I also want to pass in the text value shown inside the Border, as well as the color of that text.  Is there any way to pass values like this into the template, even though they are not defined as part of the standard RadTreeViewItem?  Notice that I have "highjacked" the Background attribute in order to set the Border background color.  But the text (ABC) and color of the text is hard-coded.
5. And finally, when I click to the far left of any item on my tree, it causes a dotted line to be drawn under the first Item.  What causes this?

<UserControl x:Class="TestRadTreeView.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <ControlTemplate TargetType="telerik:RadTreeViewItem" x:Key="TreeViewItemDefaultTemplate">
                <Grid Margin="6,0,0,0" Height="Auto" VerticalAlignment="Top">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                            </VisualState>
                            <VisualState x:Name="Selected">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ExpandStates">
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Opacity" From="0.1" To="1.0"
                                            Duration="0:0:0.2" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Opacity" From="1" To="0.1"
                                            Duration="0:0:0.2" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Visibility" Duration="0"
                                            BeginTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Grid Grid.Row="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="5,0,0,0">
                            <ToggleButton x:Name="Expander"></ToggleButton>
                            <Border Width="40" Height="20" Margin="20,0,5,0" Background="{TemplateBinding Background}" >
                                <TextBlock Text="ABC" Foreground="White" FontSize="10"
                                           HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                            </Border>
                            <ContentControl Name="Header"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        HorizontalAlignment="Left" VerticalAlignment="Center" />
                        </StackPanel>
                    </Grid>
                    <ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed" Margin="0,6,0,0"/>
                </Grid>
            </ControlTemplate>

            <Style TargetType="telerik:RadTreeViewItem" x:Key="TreeViewItemStyle">
                <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
                <Setter Property="IsExpanded" Value="True"></Setter>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <StackPanel HorizontalAlignment="Left" Margin="20,0,0,0" Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Grid.Resources>

        <telerik:RadTreeView>
            <telerik:RadTreeViewItem Header="Sample Tree" ItemContainerStyle="{StaticResource TreeViewItemStyle}" FontSize="12" IsExpanded="True">
                <telerik:RadTreeViewItem Header="1" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Red">
                    <telerik:RadTreeViewItem Header="1.1" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Chocolate">
                        <telerik:RadTreeViewItem Header="1.2" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Orange"/>
                    </telerik:RadTreeViewItem>
                </telerik:RadTreeViewItem>
                <telerik:RadTreeViewItem Header="2" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Green"/>
                <telerik:RadTreeViewItem Header="3" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Blue"/>
                <telerik:RadTreeViewItem Header="4" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Yellow"/>
                <telerik:RadTreeViewItem Header="5" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="DarkSalmon"/>
                <telerik:RadTreeViewItem Header="6" ItemContainerStyle="{StaticResource TreeViewItemStyle}" Background="Black"/>
            </telerik:RadTreeViewItem>
        </telerik:RadTreeView>

    </Grid>
</UserControl>

[Tihomir Petkov]

Hello Gary,

Please take a look at the attached project:

1. treeview items now line up vertically
2. I couldn't reproduce the vertical movement you mention
3. the whitespace around child items must be caused by some template part you miss. I am also attaching the original control template - I'd advise you to use it as a starting point when constructing your own control templates. In the original template there's no whitespace around the items.
4. For this scenario the easiest way to go would be to use the built-in functionality for displaying icons in the headers of treeview items. Just prepare images and display them instead of your current approach. The other possibility is that you inherit the treeview item class and add the properties you need. However, I believe this second approach would innecessarily complicate your code.
5. The dotted line around the root item appeared because you forgot to assign your custom style and template to that item and it used the default ones.

Best wishes,
Tihomir Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.