TreeView vertical lines

[Richard]

Hi,

I am trying to style the lines for the treeview like in the attached image file "treeviewlines_asitshouldbe.jpg".
In the theme xaml I have removed the horizontal lines. But as you can see in the other attached image file, the vertical lines are cutting through the togglevisual.

How can I prevent the vertical lines of cutting through the togglevisuals ?

Some other questions I have:

- What does the IndentFirstVerticalLine do ? (I see this one in the theme xaml but can not figure out what it does)
- How can I position the vertical lines so they are directly under the visual ?

With regards,

Richard Bergmans

[Lancelot]

Hi Richard,

To answer your second question first:

IndentContainer - is of type StackPanel and contains the indentation for the Item.

• IndentFirstVerticalLine - is of type Rectangle (this is the line that you want to alter)

Ok, now that you know what that item is since you asked about it, we can move forward with your next problem. all you need to do is set a top margin on this so that it won't overlap the image you are using. I've written an example below for you. If you look into the Template Styling, you'll see that I added a 5 pixel top margin. This will push the line down and not interfere with your other visual elements.

This code block contains the <UserControl.Resources> and root grid of an example TreeView with the altered IndentFirstVerticalLine.

<UserControl.Resources>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B"/>
        <Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness>
        <LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
        </LinearGradientBrush>
        <CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>
        <CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus" Color="#FFdbdbdb"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_UnFocus" Color="Transparent"/>
        <LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">
            <GradientStop Color="#FFf8f6f9" Offset="0"/>
            <GradientStop Color="#FFf0f0f0" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
        <LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFCE79F" Offset="1"/>
            <GradientStop Color="#FFFDD3A8"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TreeView_LineColor" Color="#FFCCCCCC"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000"/>
        <ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="telerik:RadTreeViewItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="EditStates">
                        <VisualState x:Name="Display"/>
                        <VisualState x:Name="Edit">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                <DoubleAnimation Duration="0:0:0.0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedUnfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="LoadingOnDemandStates">
                        <VisualState x:Name="LoadingOnDemand">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="LoadingOnDemandReverse"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>
                    <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="SelectionUnfocusedVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_UnFocus}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                    </Border>
                    <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                        <Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Top" Width="1" Margin="0,5,0,0">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,1,10000"/>
                            </Rectangle.Clip>
                        </Rectangle>
                    </StackPanel>
                    <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">
                        <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Center">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,10000,1"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Top" Width="1">
                            <Rectangle.Clip>
                                <RectangleGeometry Rect="0,0,1,10000"/>
                            </Rectangle.Clip>
                        </Rectangle>
                        <ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
                        <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterY="0.5" CenterX="0.5"/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Path Data="M1,0 A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
                            <Path Data="M0,-1.1 L0.1,-1 L0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
                        </Grid>
                    </Grid>
                    <CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>
                    <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    <Grid Grid.ColumnSpan="2" Grid.Column="4">
                        <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="RadTreeViewItemStyle1" TargetType="telerik:RadTreeViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="CheckState" Value="Off"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1 0 5 0"/>
            <Setter Property="IsDropAllowed" Value="True"/>
            <Setter Property="ItemsOptionListType" Value="Default"/>
            <Setter Property="IsEnabled" Value="True"/>
            <Setter Property="MinHeight" Value="24"/>
            <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TreeViewPanel VerticalAlignment="Bottom"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <telerik:RadTreeView Margin="8" IsDragDropEnabled="True"
                             SelectionMode="Multiple" IsSingleExpandPath="True"
                             telerik:StyleManager.Theme="Vista" Background="#FF2B52EF">
           <telerik:RadTreeViewItem Header="Sport Categories" Style="{StaticResource RadTreeViewItemStyle1}">
               <telerik:RadTreeViewItem Header="Football">
                   <telerik:RadTreeViewItem Header="Futsal"/>
                   <telerik:RadTreeViewItem Header="Soccer"/>
               </telerik:RadTreeViewItem>
               <telerik:RadTreeViewItem Header="Tennis"/>
               <telerik:RadTreeViewItem Header="Cycling"/>
           </telerik:RadTreeViewItem>

        </telerik:RadTreeView>

    </Grid>

I hope this helps you achieve the effect you are looking for.  Another alternative if this doesn't give you what you want, is to remove the transparency from the indent image, but the above example is more elegant and is adaptable.

Good Luck,
Lancelot

PS: Check the other question asked about the RadRibbon tab shadow. I placed an answer there for you as well. :)