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

Remove Outer TreeView Line

18 Answers 454 Views

TreeView

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

Ryan Black asked on 04 Aug 2010, 10:03 PM

outer-line.png

I am trying to remove the outer line in the treeview as you can see highlighted in the red box.

My Inner RadTreeViewItemControl Template has the following code in the ListRootContainer section regarding the lines.

<Rectangle x:Name="HorizontalLine" Stroke="{StaticResource LineBrush}" Height="1" HorizontalAlignment="Right" VerticalAlignment="Center">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,10000,1"/>

</Rectangle.Clip>

</Rectangle>

<Rectangle x:Name="VerticalLine" Stroke="{StaticResource LineBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000"/>

</Rectangle.Clip>

</Rectangle>

Is this possible?

Thanks
Ryan

18 Answers, 1 is accepted

answered on 11 Aug 2010, 04:00 PM

I do have a custom template. Thanks for taking a look.
Ryan

<SolidColorBrush x:Key="FTV_ListItemBackground" Color="#FF051C2D" Opacity=".2" />

<LinearGradientBrush EndPoint="0.5,1"

x:Key="FTV_GotFocusSub1"

StartPoint="0.5,0">

<LinearGradientBrush.RelativeTransform>

<TransformGroup>

<ScaleTransform CenterX="0.5"

CenterY="0.5" />

<SkewTransform CenterX="0.5"

CenterY="0.5" />

<RotateTransform CenterX="0.5"

CenterY="0.5"

Angle="90" />

<TranslateTransform />

</TransformGroup>

</LinearGradientBrush.RelativeTransform>

<GradientStop Color="#00000506" />

<GradientStop Color="#FF004646"

Offset="1" />

</LinearGradientBrush>

<LinearGradientBrush EndPoint="0.5,1"

x:Key="FTV_GotFocusSub2"

StartPoint="0.5,0">

<LinearGradientBrush.RelativeTransform>

<TransformGroup>

<ScaleTransform CenterX="0.5"

CenterY="0.5" />

<SkewTransform CenterX="0.5"

CenterY="0.5" />

<RotateTransform CenterX="0.5"

CenterY="0.5"

Angle="90" />

<TranslateTransform />

</TransformGroup>

</LinearGradientBrush.RelativeTransform>

<GradientStop Color="#00000506" />

<GradientStop Color="#FF00262A"

Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="FTV_GotFocusSub3" Color="#FF00262A" />

<SolidColorBrush x:Key="FTV_LostFocusSub1"

Opacity="50" />

<LinearGradientBrush x:Key="FTV_GotFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0">

<LinearGradientBrush.GradientStops>

<GradientStop Color="#FF09282A" Offset="0.501"/>

<GradientStop Color="#FF033E43" Offset="0.5"/>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

<LinearGradientBrush x:Key="FTV_MouseOverFocusStyle" StartPoint="0,0" EndPoint="0,1">

<LinearGradientBrush.GradientStops>

<GradientStop Color="#FF01376A" Offset="0.501"/>

<GradientStop Color="#FF014789" Offset="0.5"/>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

<LinearGradientBrush x:Key="FTV_LostFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0">

<LinearGradientBrush.RelativeTransform>

<TransformGroup>

<ScaleTransform CenterX="0.5" CenterY="0.5"/>

<SkewTransform CenterX="0.5" CenterY="0.5"/>

<RotateTransform CenterX="0.5" CenterY="0.5"/>

<TranslateTransform/>

</TransformGroup>

</LinearGradientBrush.RelativeTransform>

<GradientStop Color="#FF091F34" Offset="1"/>

<GradientStop Color="#FF002F5C" Offset="0.4"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="FTV_ListItemHighlight"

Color="#FF02A08E" />

<SolidColorBrush x:Key="FTV_ListItemHighlightSub1"

Color="#FF4FBB82" />

<SolidColorBrush x:Key="FTV_ListItemUnHighlight"

Color="#FF72BAFF" />

<SolidColorBrush x:Key="FTV_ListItemUnHighlightSub3"

Color="White" />

<SolidColorBrush x:Key="LineBrush" Color="#FF193A29"/>

<LinearGradientBrush x:Key="FTV_ButtonGradient" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF0E3D70"/>

<GradientStop Color="#FF001832" Offset="1"/>

</LinearGradientBrush>

<Style x:Key="ExpanderStyleWhite"

TargetType="{x:Type ToggleButton}">

<Setter Property="IsEnabled"

Value="True" />

<Setter Property="IsTabStop"

Value="False" />

<Setter Property="Cursor"

Value="Hand" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver"

Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="Button"

Storyboard.TargetProperty="Opacity"

To="0" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="ButtonOver"

Storyboard.TargetProperty="Opacity"

To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

<Trigger Property="IsChecked"

Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity"

To="0" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity"

To="0" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity"

To="1" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity"

To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

<Grid>

<Grid x:Name="ButtonOver"

Margin="10,0,0,0"

HorizontalAlignment="Right"

Width="16"

Height="16">

<Rectangle HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Width="Auto"

Height="Auto"

RadiusX="3"

RadiusY="3">

</Rectangle>

<Rectangle x:Name="CollapsedVisualOver"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="2"

Height="8"

RadiusX="0"

RadiusY="0"

Fill="White"

Margin="7,4,0,0" />

<Rectangle RadiusX="0"

RadiusY="0"

Fill="White"

HorizontalAlignment="Left"

Margin="4,7,0,0"

VerticalAlignment="Top"

Width="8"

Height="2" />

</Grid>

<Grid x:Name="Button"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Width="16"

Height="16">

<Rectangle x:Name="CollapsedVisual" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="RadTreeViewItemControlTemplateSub2"

TargetType="{x:Type telerikNavigation:RadTreeViewItem}">

<Grid x:Name="RootElement" Cursor="Hand"

MinWidth="300">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Grid x:Name="HeaderRow"

MinHeight="{TemplateBinding MinHeight}"

SnapsToDevicePixels="True"

Background="Transparent">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Border Grid.ColumnSpan="6"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" />

<Border x:Name="MouseOverVisual"

Opacity="0"

Grid.Column="1"

Grid.ColumnSpan="5"

Background="{StaticResource FTV_GotFocusSub1}"

BorderBrush="Transparent"

BorderThickness="1"

CornerRadius="1" />

<Border x:Name="SelectionUnfocusedVisual"

Visibility="Collapsed"

Grid.ColumnSpan="6"

BorderBrush="Transparent"

Background="{StaticResource FTV_LostFocusSub1}"

BorderThickness="1" />

<Border x:Name="SelectionVisual"

Visibility="Collapsed"

Grid.Column="4"

Grid.ColumnSpan="5"

BorderBrush="#FF004646"

Background="{StaticResource FTV_GotFocusSub3}"

BorderThickness="1"

/>

<StackPanel x:Name="IndentContainer"

Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine" />

</StackPanel>

<Grid x:Name="ListRootContainer"

HorizontalAlignment="Center"

MinWidth="20"

Grid.Column="1">

<Rectangle x:Name="HorizontalLine" Stroke="{StaticResource LineBrush}" Height="1" HorizontalAlignment="Right" VerticalAlignment="Center">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,10000,1"/>

</Rectangle.Clip>

</Rectangle>

<Rectangle x:Name="VerticalLine" Stroke="{StaticResource LineBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000"/>

</Rectangle.Clip>

</Rectangle>

<ToggleButton Name="SubToggle1"

Style="{StaticResource ExpanderStyleWhite}"

IsTabStop="False"

IsChecked="{TemplateBinding IsExpanded}" />

</Grid>

<CheckBox x:Name="CheckBoxElement"

Margin="5,0,0,0"

VerticalAlignment="Center"

IsTabStop="False"

Visibility="Collapsed"

Grid.Column="2">

</CheckBox>

<RadioButton x:Name="RadioButtonElement"

Margin="5,0,0,0"

VerticalAlignment="Center"

IsTabStop="False"

Visibility="Collapsed"

Grid.Column="2">

</RadioButton>

<Image x:Name="Image"

HorizontalAlignment="Center"

Margin="2"

MaxHeight="16"

MaxWidth="16"

VerticalAlignment="Center"

Grid.Column="3"

Source="{TemplateBinding DefaultImageSrc}" />

<Rectangle x:Name="FocusVisual" />

<Grid Grid.Column="4"

Grid.ColumnSpan="2">

<ContentPresenter x:Name="Header"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

ContentSource="Header"/>

<ContentPresenter x:Name="EditHeaderElement"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Visibility="Collapsed"

ContentTemplate="{TemplateBinding HeaderEditTemplate}" />

</Grid>

<ItemsPresenter x:Name="ItemsHost"

Visibility="Collapsed"

Grid.Row="1" />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsInEditMode"

Value="True">

<Setter Property="Visibility"

TargetName="Header"

Value="Collapsed" />

<Setter Property="Visibility"

TargetName="EditHeaderElement"

Value="Visible" />

</Trigger>

<Trigger Property="IsSelected"

Value="True">

<Setter Property="Visibility"

TargetName="SelectionVisual"

Value="Visible" />

</Trigger>

<Trigger Property="IsFocused"

Value="True">

<Setter Property="Visibility"

TargetName="FocusVisual"

Value="Visible" />

</Trigger>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="IsSelected"

Value="True" />

<Condition Property="IsSelectionActive"

Value="False" />

</MultiTrigger.Conditions>

<Setter Property="Opacity"

TargetName="SelectionVisual"

Value="0" />

<Setter Property="Visibility"

TargetName="SelectionUnfocusedVisual"

Value="Visible" />

</MultiTrigger>

<Trigger Property="HasItems"

Value="False">

<Setter Property="Visibility"

TargetName="SubToggle1"

Value="Collapsed" />

</Trigger>

<Trigger Property="IsEnabled"

Value="False">

<Setter Property="Opacity"

TargetName="Header"

Value="0.5" />

</Trigger>

<Trigger Property="IsExpanded"

Value="True">

<Setter Property="Visibility"

TargetName="ItemsHost"

Value="Visible" />

</Trigger>

<Trigger Property="IsDragOver"

Value="True">

<Setter Property="Opacity"

TargetName="MouseOverVisual"

Value="1" />

</Trigger>

<Trigger Property="IsMouseOver"

SourceName="HeaderRow"

Value="True">

<Setter Property="Opacity"

TargetName="MouseOverVisual"

Value="1" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

<Style TargetType="{x:Type telerikNavigation:RadTreeViewItem}" x:Key="FileItemStyle">

<Setter Property="Foreground" Value="White"/>

<Setter Property="FontStyle" Value="Normal"/>

<Setter Property="DefaultImageSrc" Value="/Images/TreeView/file.png"/>

<Setter Property="BorderThickness" Value="0" />

<Setter Property="Template" Value="{StaticResource RadTreeViewItemControlTemplateSub2}" />

</Style>

answered on 16 Aug 2010, 02:10 PM

radtreeviewitemrefresh.zip

Hi Ryan Black,

I attached a project where the xaml is modified.

Please note that the TreeView has an "ExpanderStyle" property which can be used for customizing the look of the ToggleButton (I have used it in the project).

Best wishes,
Miroslav
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

answered on 19 Aug 2010, 02:11 PM

Hi Ryan Black,

In this case I suppose you have different ControlTemplates for the different styles you apply to the TreeViewItems using the ItemContainerStyle. If this is the case, you can define different styles for the expander ToggleButton element in each ControlTemplate.

For example you can implement the scenario from the radtreeviewitemrefresh.zip project by removing the ExpanderStyle from the RadTreeView definition and setting it as a style for the Expander ToggleButton in the corresponding ControlTemplate, like so:

<ControlTemplate x:Key="RadTreeViewItemControlTemplateSub2"

TargetType="{x:Type telerikNavigation:RadTreeViewItem}">

...

<ToggleButton x:Name="Expander" IsTabStop="False"

Style="{StaticResource ExpanderStyleWhite}"

Background="{TemplateBinding Background}" />

...

</ControlTemplate>

This will allow you to create different ToggleButton styles for each RadTreeViewItemStyle.

Give this approach a try and let us know if it works for you or if we can further assist you.

Sincerely yours,
Tina Stancheva
the Telerik team

answered on 23 Aug 2010, 05:57 PM

Hi Ryan Black,

The link still appears broken. However, I prepared a sample project illustrating how to apply different styles for the different levels of the RadTreeView. The tree represents a three-level hierarchy and for the first two levels different expander styles are applied.

Take a look at it and let me know if this is close to what you had in mind and if it works for you.

Best wishes,
Tina Stancheva
the Telerik team

answered on 24 Aug 2010, 09:55 AM

335371-treeviewstyleselector.zip

multiplelevelobject.zip

Hi Ryan Black,

First of all, I'd like to appologisze for leaving out the attachment. I attached it here.

Also, after I examined your code, I noticed that you have changed the name of the ToggleButton element in the RadTreeViewItemControlTemplates. This is disabling the "expander" behaviour of the ToggleButton and clicking it does not expand the TreeViewItem. In order to keep this functionality, you should keep the ToggleButton element name - "Expander".

Also, you don't have to apply a style to the button. You can simply edit its ControlTemplate. You can use Expression Blend to do so (more info) thus keeping the required parts of the template.

I modified your project accordingly to these suggestions. Take a look at it and let me know if it works for you. You can also take a look at the other project, since it illustrates a different approach towards similar scenario.

I hope this helps. Let me know if I can further assist you.

Greetings,
Tina Stancheva
the Telerik team

Accepted

answered on 31 Aug 2010, 12:17 PM

213804-multiplelevelobject.zip

Hello Ryan Black,

First of all, I'd like to apologize for the delayed response. I went through your code again and I noticed that in the ControlTemplates of the RadTreeViewItems the IndentFirstVerticalLine element has no width set. this is causing the strange behavior of the lines. I modified the corresponding lines like so:

<Rectangle x:Name="IndentFirstVerticalLine" Width="1" VerticalAlignment="Top" Visibility="Collapsed"/>

This fixes the issue. Can you give it a try and let us know if it works for you or if you need more info? Thank you in advance.

Best wishes,
Tina Stancheva
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Remove Outer TreeView Line

18 Answers, 1 is accepted