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

Treeview Styles

6 Answers 130 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

Thomas Kroll asked on 16 Sep 2010, 04:00 PM

I've been around all the documentation and reading that I can get my hands on but cannot find "the proper solution."

I have a binding treeview to a TemplateSelector Hierarchy based treeviewitem builder and am trying to simply style the treeviewitems. I've tried installing BLEND 4 and copying the style from it, without success. I append the style code but it seems to ignore it in the rendering. So I've poked around the Style Project that comes with the source code and plucked out the only thing I can get to actually change the styles but I'm missing things like foreground and background -- so I'm not sure where to go from here.

This is what I have that DOES in fact change the styles: (All I want is an easy background color change like the old 2009 version of SUMMER used to do... HELP!)

Thanks in advance!

<ControlTemplate TargetType="telerikNav:RadTreeViewItem" x:Key="TreeViewItemDesignerStyle">

<Grid x:Name="RootElement">

<Grid.Resources>

<SolidColorBrush x:Key="LineColor" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="FocusBrush" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="SelectionOuterBorderBrush" Color="#FFA8C9D8"></SolidColorBrush>

<Color x:Key="SelectionOuterFillColor1">#FF00CCFF</Color>

<Color x:Key="SelectionOuterFillColor2">#FF9BB1FF</Color>

<SolidColorBrush x:Key="SelectionInnerBorderBrush" Color="#FFFFFFFF"></SolidColorBrush>

<Color x:Key="SelectionInnerFillColor1">#E5FFFFFF</Color>

<Color x:Key="SelectionInnerFillColor2">#4DFFFFFF</Color>

<Color x:Key="SelectionInnerFillColor3">#00FFFFFF</Color>

<Color x:Key="SelectionInnerFillColor4">#33FFFFFF</Color>

<SolidColorBrush x:Key="SelectionUnfocusedOuterBorderBrush" Color="#FFA8C9D8"></SolidColorBrush>

<Color x:Key="SelectionUnfocusedOuterFillColor1">#FFB7C6D0</Color>

<Color x:Key="SelectionUnfocusedOuterFillColor2">#FFA2A9C1</Color>

<SolidColorBrush x:Key="SelectionUnfocusedInnerBorderBrush" Color="#FFFFFFFF"></SolidColorBrush>

<Color x:Key="SelectionUnfocusedInnerFillColor1">#E5FFFFFF</Color>

<Color x:Key="SelectionUnfocusedInnerFillColor2">#4DFFFFFF</Color>

<Color x:Key="SelectionUnfocusedInnerFillColor3">#00FFFFFF</Color>

<Color x:Key="SelectionUnfocusedInnerFillColor4">#33FFFFFF</Color>

<SolidColorBrush x:Key="MouseOverOuterBorderBrush" Color="#FFC3DCE8"></SolidColorBrush>

<Color x:Key="MouseOverOuterFillColor1">#FF00CCFF</Color>

<Color x:Key="MouseOverOuterFillColor2">#FF9BB1FF</Color>

<SolidColorBrush x:Key="MouseOverInnerBorderBrush" Color="#FFFFFFFF"></SolidColorBrush>

<Color x:Key="MouseOverInnerFillColor1">#FFFFFFFF</Color>

<Color x:Key="MouseOverInnerFillColor2">#99FFFFFF</Color>

<Color x:Key="MouseOverInnerFillColor3">#4CFFFFFF</Color>

<Color x:Key="MouseOverInnerFillColor4">#66FFFFFF</Color>

<SolidColorBrush x:Key="LoadingVisualBrush" Color="#FF1562B7"></SolidColorBrush>

</Grid.Resources>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" >

<Storyboard>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Header"

To="0.5" Duration="0:0:0.0"

/>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Image"

To="0.5" Duration="0:0:0.0"

/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="MouseOverVisual"

To="0.5" Duration="0:0:0.2"

/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected">

<Storyboard>

</Storyboard>

</VisualState>

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionUnfocusedVisual" Storyboard.TargetProperty="Visibility" Duration="0">

<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 Storyboard.TargetName="LoadingVisual" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Expander" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever"

Storyboard.TargetName="LoadingVisualAngleTransform"

Storyboard.TargetProperty="Angle"/>

</Storyboard>

</VisualState>

<VisualState x:Name="LoadingOnDemandReverse">

<Storyboard>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused">

<Storyboard>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded">

<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>

</VisualState>

<VisualState x:Name="Collapsed">

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="ItemsHost"

Storyboard.TargetProperty="Opacity"

From="1" To="0.1" Duration="0:0:0" />

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition />

</Grid.RowDefinitions>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid x:Name="HeaderRow" Background="Transparent">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Border Grid.Column="3" Grid.ColumnSpan="2" x:Name="SelectionUnfocusedVisual" Visibility="Collapsed" BorderBrush="{StaticResource SelectionUnfocusedOuterBorderBrush}" BorderThickness="1" CornerRadius="3">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource SelectionUnfocusedOuterFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource SelectionUnfocusedOuterFillColor2}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Border CornerRadius="2" BorderBrush="{StaticResource SelectionUnfocusedInnerBorderBrush}" BorderThickness="2">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource SelectionUnfocusedInnerFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource SelectionUnfocusedInnerFillColor2}" Offset="0.5"/>

<GradientStop Color="{StaticResource SelectionUnfocusedInnerFillColor3}" Offset="0.511"/>

<GradientStop Color="{StaticResource SelectionUnfocusedInnerFillColor4}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Border Grid.Column="3" Grid.ColumnSpan="2" x:Name="SelectionVisual" Visibility="Collapsed" BorderBrush="{StaticResource SelectionOuterBorderBrush}" BorderThickness="1" CornerRadius="3">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource SelectionOuterFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource SelectionOuterFillColor2}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Border CornerRadius="2" BorderBrush="{StaticResource SelectionInnerBorderBrush}" BorderThickness="2">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource SelectionInnerFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource SelectionInnerFillColor2}" Offset="0.5"/>

<GradientStop Color="{StaticResource SelectionInnerFillColor3}" Offset="0.511"/>

<GradientStop Color="{StaticResource SelectionInnerFillColor4}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<Border Grid.Column="3" Grid.ColumnSpan="2" x:Name="MouseOverVisual" Opacity="0" BorderBrush="{StaticResource MouseOverOuterBorderBrush}" BorderThickness="1" CornerRadius="3" >

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource MouseOverOuterFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource MouseOverOuterFillColor2}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Border CornerRadius="2" BorderBrush="{StaticResource MouseOverInnerBorderBrush}" BorderThickness="2">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="{StaticResource MouseOverInnerFillColor1}" Offset="0"/>

<GradientStop Color="{StaticResource MouseOverInnerFillColor2}" Offset="0.5"/>

<GradientStop Color="{StaticResource MouseOverInnerFillColor3}" Offset="0.511"/>

<GradientStop Color="{StaticResource MouseOverInnerFillColor4}" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

</Border>

<StackPanel x:Name="IndentContainer" Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine" Width="1" Visibility="Collapsed" Stroke="{StaticResource LineColor}" VerticalAlignment="Top">

<Rectangle.Clip>

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

</Rectangle.Clip>

</Rectangle>

</StackPanel>

<Grid Grid.Column="1" x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20">

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

<Rectangle.Clip>

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

</Rectangle.Clip>

</Rectangle>

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

<Rectangle.Clip>

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

</Rectangle.Clip>

</Rectangle>

<ToggleButton x:Name="Expander" IsTabStop="False" Background="{TemplateBinding Background}" />

<Grid x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">

<Grid.RenderTransform>

<TransformGroup>

<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5"/>

</TransformGroup>

</Grid.RenderTransform>

<Path Width="10" Height="10" Stretch="Fill" Stroke="{StaticResource LoadingVisualBrush}" StrokeThickness="1" StrokeStartLineCap="Round" Data="M1,0 A1,1,90,1,1,0,-1"/>

<Path Margin="5,-1.5,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="4" Height="4" Stretch="Fill" Fill="{StaticResource LoadingVisualBrush}" Data="M0,-1.1 L0.1,-1 L0,-0.9" StrokeThickness="1"/>

</Grid>

<CheckBox IsTabStop="False" Grid.Column="2" Margin="2,0,-10,0" x:Name="CheckBoxElement" Visibility="Collapsed"></CheckBox>

<RadioButton IsTabStop="False" Grid.Column="2" Margin="2,0,-10,0" x:Name="RadioButtonElement" Visibility="Collapsed"></RadioButton>

<Image Grid.Column="3" x:Name="Image" Source="{TemplateBinding DefaultImageSrc}"

MaxWidth="16" MaxHeight="16" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" />

<Rectangle x:Name="FocusVisual" RadiusX="3" RadiusY="3" Visibility="Collapsed" Grid.Column="3" Grid.ColumnSpan="2" Stroke="{StaticResource FocusBrush}" StrokeThickness="0.75" StrokeDashArray="1,2"

IsHitTestVisible="False"/>

<ContentControl x:Name="Header"

Grid.Column="4"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

HorizontalAlignment="Left"

VerticalAlignment="Center"

IsTabStop="False"

Margin="1 0 5 0"

Padding="{TemplateBinding Padding}"

VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentControl>

<Grid Grid.Column="4" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Center" x:Name="EditElementContainer">

<TextBox x:Name="EditElement" />

</Grid>

<Rectangle x:Name="DisabledVisual" Grid.Column="2" Grid.ColumnSpan="3" IsHitTestVisible="true" Visibility="Collapsed"/>

</Grid>

</Border>

<ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed"/>

</Grid>

</ControlTemplate>

<Style TargetType="telerikNav:RadTreeViewItem">

<!--<Setter Property="CheckState" Value="Off" />

<Setter Property="IsDropAllowed" Value="True" />

<Setter Property="ItemsOptionListType" Value="CheckList" />

<Setter Property="IsEnabled" Value="True" />

<Setter Property="Background" Value="Transparent"/>-->

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

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

<Setter Property="FontFamily" Value="Tahoma"></Setter>

<Setter Property="FontSize" Value="11"></Setter>-->

</Style>

6 Answers, 1 is accepted

Accepted

answered on 21 Sep 2010, 03:31 PM

silverlightapplication2.zip

Hello Thomas,

Please find attached an example.

If you have further questions please do not hesitate to ask us.
I hope this will help you.

Kind regards,
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

answered on 28 Oct 2010, 08:21 PM

silverlightapplication2.zip

Hello David Cardona,

Here is what you should do to change the foreground colors:
- In normal state you should set a Foreground property in the Header ContentControl.
- In focused state you should change the value in the MouseOver Storyboard.
And to remove the dotted border you should remove the Focused Storyboard or set the FocusVisual's StrokeDashArray property to 0.
I've updated the attached project, so could you please examine it and if you have further questions feel free to ask?

Greetings,

Zarko

the Telerik team

answered on 28 Oct 2010, 08:35 PM

treeview.png

Hello Zarco.

The first question is resolved, but the second maybe you don't understand me. My question is for the TreeView LinesRoot style.

Please can you see the atach picture ?

answered on 03 Nov 2010, 03:50 PM

silverlightapplication2.zip

Hi David Cardona,

First of all I want to apologize for the late response.
It appears that the dotted line is caused by the MinHeight of the Grid named "HeaderRow" . When you remove it, it accepts default value that doesn`t work correctly. Therefore its best to bind it as shown below.

You can also remove the Border outside the "HeaderRow" by setting its Thickness property to 0 or you can set its BorderBrush color to be the same as the tree`s lines color.

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="0">

<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">

We modified the solution we gave you last time in order to implement this scenario. We hope it will help you and we would be glad to assist you further.

Sincerely yours,
Petar Mladenov
the Telerik team