Tree Lines - Control Template

[coco]

Hi ,

I had changed the Control Template of the tree (see the attached picture) but i had defficulties to add the lines. the code below is the tree template:

any suggestions?

<UserControl 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:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             x:Class="GSTAT.Xeligence.DTM.Client.DTMTemplate"
             Loaded="UserControl_Loaded" mc:Ignorable="d"
             xmlns:vsm="clr-namespace:System.Windows;assembly=PresentationFramework">
    <UserControl.Resources>
        <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}" x:Key="TreeViewItemDefaultTemplate">
            <ControlTemplate.Triggers>
                <Trigger Property="IsExpanded" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <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>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <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>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
            <Grid Height="Auto" VerticalAlignment="Center" Background="Beige" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" ></RowDefinition>
                </Grid.RowDefinitions>

                <!--<Rectangle x:Name="VerticalLine" Fill="Blue" Grid.Column="0" Height="2"></Rectangle>
                <Rectangle x:Name="HorizontalLine" Fill="Black" Grid.Column="0" Width="2"></Rectangle>-->

                <Grid Grid.Column="1" x:Name="HeaderRow"  Height="Auto" Grid.Row="0" VerticalAlignment="Center" Background="Bisque">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>

                    <ToggleButton x:Name="Expander" Margin="0,0,0,0" Grid.Column="0"></ToggleButton>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Column="1">
                        <Border HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            CornerRadius="3"
                                            Background="{DynamicResource BrushWindowDarkGrayBG}"
                                            Padding="3">
                            <ContentControl x:Name="Header"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                            Width="86.487" Height="13.277" Foreground="White" />
                        </Border>
                    </StackPanel>
                    <!--<StackPanel x:Name="IndentContainer" Orientation="Horizontal" />-->
                    <StackPanel x:Name="LoadingVisual" Orientation="Horizontal" />
                </Grid>
                <ItemsPresenter x:Name="ItemsHost" Grid.Column="2" Visibility="Collapsed" Height="Auto" VerticalAlignment="Center">
                </ItemsPresenter>
            </Grid>
        </ControlTemplate>

        <Style TargetType="ToggleButton" x:Key="ExpanderStyle">
            <Setter Property="IsEnabled" Value="True" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                            <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <Grid>
                            <Grid x:Name="CollapsedStates">
                                <Ellipse x:Name="CollapsedVisual" Width="10" Height="10" Fill="CornflowerBlue"></Ellipse>
                            </Grid>
                            <Grid x:Name="ExpandedStates">
                                <Ellipse x:Name="ExpandedVisual" Width="10" Height="10" Fill="BurlyWood"></Ellipse>
                            </Grid>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type telerik:RadTreeViewItem}" x:Key="RadTreeViewItemStyle">
            <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
            <Setter Property="IsExpanded" Value="True" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid>
                    <telerik:RadTreeView
                        x:Name="DTMTree"
                        AllowDrop="True"
                        IsDragDropEnabled="True"
                        IsLineEnabled="True"
                        ExpanderStyle="{StaticResource ExpanderStyle}"
                        ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"
                        IsExpandOnSingleClickEnabled="True"
                        Selected="DTMTree_Selected"
                        MouseDoubleClick="DTMTree_MouseDoubleClick"
                        SelectionChanged="DTMTree_SelectionChanged"
                        Margin="5,0,0,0"
                        IsRootLinesEnabled="True">

                        <telerik:RadTreeView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel VerticalAlignment="Center"
                                    Orientation="Horizontal"
                                    HorizontalAlignment="Left" />
                            </ItemsPanelTemplate>
                        </telerik:RadTreeView.ItemsPanel>

                        <telerik:RadTreeViewItem Header="Root"
                            AllowDrop="True"
                            ItemContainerStyle="{StaticResource RadTreeViewItemStyle}" ForceCursor="True">
                            <telerik:RadTreeViewItem Header="A"
                                ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"/>
                            <telerik:RadTreeViewItem Header="B"
                                ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"/>
                        </telerik:RadTreeViewItem>
                    </telerik:RadTreeView>
    </Grid>
</UserControl>

[Dimitrina]

Hi carmel h,

Please find attached an example.

If you have further  questions please do not hesitate to ask us.
I hope this will help you.

Best wishes,
Dimitrina
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.