Tree Lines - Control Template

2 posts, 0 answers
  1. coco
    coco avatar
    1 posts
    Member since:
    Feb 2010

    Posted 14 Feb 2010 Link to this post

    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> 
     
  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 17 Feb 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top