This is a migrated thread and some comments may be shown as answers.
Tree Lines - Control Template

1 Answer 166 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
coco asked on 14 Feb 2010, 06:29 AM
picture-1.png
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>
1 Answer, 1 is accepted

answered on 17 Feb 2010, 02:14 PM
treeview-line.zip
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.