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

Tree Lines - Control Template

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

Sort by
0
Dimitrina
Telerik team
answered on 17 Feb 2010, 02:14 PM
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.
Tags
TreeView
Asked by
coco
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Share this question
or