Treeview Styles

[Thomas Kroll]

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>
                            <!-- indent -->
                            <ColumnDefinition Width="Auto"/>

                            <!-- collapse/expand -->
                            <ColumnDefinition Width="Auto"/>

                            <!-- checkbox, radio-->
                            <ColumnDefinition Width="Auto"/>

                            <!-- left image -->
                            <ColumnDefinition Width="Auto"/>

                            <!-- selection, text, edit element -->
                            <ColumnDefinition Width="Auto"/>

                            <!-- empty -->
                            <ColumnDefinition Width="*" />

                        </Grid.ColumnDefinitions>

                        <!-- Selection Unfocused-->
                        <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>

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

                        <!-- MouseOver  -->
                        <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>
                        </Border>

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

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

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


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

                            <!-- Loading ... -->
                            <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>

                        </Grid>
                        <!--/ ListRoot decoration -->

                        <!-- Checkbox/Radio -->
                        <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>
                        <!--/ Checkbox/Radio -->


                        <!-- Image and text -->
                        <Image Grid.Column="3" x:Name="Image" Source="{TemplateBinding DefaultImageSrc}"
                               MaxWidth="16" MaxHeight="16" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" />

                        <!-- Focus -->
                        <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"/>

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

                        <!-- Edit element -->
                        <Grid Grid.Column="4" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Center" x:Name="EditElementContainer">
                            <TextBox x:Name="EditElement"  />
                        </Grid>
                        <!-- Disabled -->
                        <Rectangle x:Name="DisabledVisual" Grid.Column="2" Grid.ColumnSpan="3" IsHitTestVisible="true"  Visibility="Collapsed"/>
                    </Grid>
                </Border>

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

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

[Dimitrina]

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

[David Cardona]

Hello Dimitrina

I Saw the example but I need your help, how to Change the foreground color in the normal and focus event that have the example. Actually normal is Black and on Focus is red...how can to Change these colors?

And the second help is How to change the LinesRoot style, in the example that is dotted but I like it normal.

Can you help me?

Thank you so much!

[Zarko]

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

[David Cardona]

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 ?

[Petar Mladenov]

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

[David Cardona]

Hi Petar Mladenov

Thank you so much!!!