Simple example needed

[Janene]

I am trying to use the RadTreeView in our application and I would like to change the background color of an item when either selected or the mouse is over it. I found some examples, but they are far more complex than I need and I'm unable to simplify them without breaking them. Is there a very simple example of just changing the background color, please?

Janene Pappas-McCrillis
Wireless Seismic

[Lancelot]

Hi Janene,

In order to change the default behavior of a mouseover, you need to access the following property:

ControlSubItem_Background_MouseOver - a brush that represents the background of the RadTreeViewItem, when the mouse is over it.

You can quickly and easily do this by editing a copy of the style and just changing the color assigned to that property.  If you go to this documentation, you'll find a tutorial that takes you step by step through the process. Look under the title "Modifying the Default Style"

It should only take a couple minutes make the changes. However, if you find yourself getting hung up on something, let me know and we'll go through it together (I would need the XAML from the file you want the changes to take place in).

Good Luck,
Lancelot

[Janene]

Hi Lancelot, thanks for the reply.

I do not have Expression Blend, just VS 2010. How do I get the default style?

Janene

[Lancelot]

What color do you want the background to change to on the mouse over? You can give me the hex value also. I'll create a style for you, and then you'll be able to see where the change was made.

Can you provide me with your xaml of the control you are using? Use the little Code block button above, next to the spell checker to paste in the xaml.

[Janene]

For both mouse-over and selected, we'd like it to be a LinearGradient from PowderBlue to AliceBlue.

Sorry, here's the XAML for the tree:

<!-- resources -->

           <Style x:Key="LayerItemStyle" TargetType="telerik:RadTreeViewItem">
                <Setter Property="Margin" Value="0" />
                <!--  <Setter Property="Height" Value="18" />  -->
               <Setter Property="FontWeight" Value="Normal" />
                <Setter Property="Header" Value="{Binding DisplayName}" />
                <Setter Property="CheckState" Value="{Binding Path=IsChecked, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}" />
            </Style>
            <Style x:Key="GroupItemStyle" TargetType="telerik:RadTreeViewItem">
                <Setter Property="Margin" Value="0" />
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="Header" Value="{Binding DisplayName}" />
                <Setter Property="Foreground" Value="#000000" />
                 <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
                <Setter Property="CheckState" Value="{Binding Path=IsChecked, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}" />
            </Style>


             <LayerManager:LayerNodeStyleSelector x:Key="StyleSelector"
                                                GroupItemStyle="{StaticResource GroupItemStyle}"
                                                 LayerItemStyle="{StaticResource LayerItemStyle}" />

            <DataTemplate x:Key="MapLayerTemplate">
                <TextBlock Text="{Binding DisplayName}"/>
            </DataTemplate>

            <HierarchicalDataTemplate x:Key="MapLayerGroupTemplate" ItemsSource="{Binding Children}">
                <TextBlock VerticalAlignment="Center"
                           FontWeight="Bold"
                           Text="{Binding DisplayName}" />
            </HierarchicalDataTemplate>

            <LayerManager:LayerNodeTemplateSelector x:Key="layerDataTemplateSelector"
                                                    LayerGroupTemplate="{StaticResource MapLayerGroupTemplate}"
                                                    LayerTemplate="{StaticResource MapLayerTemplate}" />


<!-- tree -->
                <telerik:RadTreeView x:Name="RadTree"
                                     Grid.Row="1"
                                     BorderThickness="0"
                                     IsOptionElementsEnabled="True"
                                     IsTriStateMode="True"
                                     ItemContainerStyleSelector="{StaticResource StyleSelector}"
                                     ItemsOptionListType="CheckList"
                                     ItemsSource="{Binding LayerManagerMapLayers}"
                                     ItemTemplateSelector="{StaticResource layerDataTemplateSelector}"
                                     PreviewSelectionChanged="radTreeView_PreviewSelectionChanged"
                                     SelectedItem="{Binding SelectedItem,
                                                            Mode=TwoWay,
                                                            UpdateSourceTrigger=PropertyChanged}" >

Thank you!

Janene

[Janene]

I've also been struggling to get the space between the lines to be tighter. No matter what Heights, Padding or Margins I change, it has little to no effect. How do I tighten it up?

Janene

[Lancelot]

Hi Janene,

Thank you for your code, I'll get started on it right now. I highly recommend you get Expression Blend. It is an extremely powerful tool when coupled with telerik's controls. Thats why you see the styling examples done with Blend. Here is the link to get the trial, you have full access in the trial.

I'll let you know when I am done with your styling.
Lancelot

[Lancelot]

Okay I'm back,

I had a little trouble using your XAML due to the other dependencies, so I started from scratch where you could get a better look at the template. The code block below contains a full resource of all the parts of a RadTreeViewItem. You'll find the part where I altered simply by doing a quicker search for AliceBlue. The principle is the same for all the other parts. With this template you have complete control over it's appearance. You could go in there and shorten the margins of the parts you'd like. Instead of reading through the whole style to see what is what, use this documentation to know where to look.


I added a small RadTreeView in the root grid to demonstrate how you can apply a template to a TreeViewItem. I hope this helps you achieve what you're looking for!


Good luck Janene,
Lancelot

<Window.Resources>
        <ControlTemplate x:Key="RadTreeViewItemControlTemplate1" TargetType="{x:Type 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" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                <DoubleAnimation Duration="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}" SnapsToDevicePixels="True">
                    <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="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                        <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="PowderBlue" Offset="1"/>
                                    <GradientStop Color="AliceBlue" Offset="0"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Border>
                    <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                        <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0,1">
                                    <GradientStop Color="#FFF8F6F9" Offset="0"/>
                                    <GradientStop Color="#FFF0F0F0" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Border>
                    <Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                        <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFCE79F" Offset="1"/>
                                    <GradientStop Color="#FFFDD3A8"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Border>
                    <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                        <Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
                    </StackPanel>
                    <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">
                        <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>
                        <Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>
                        <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 Angle="0" CenterY="0.5" CenterX="0.5"/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
                            <Path Data="M0,-1.1L0.1,-1 0,-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" Visibility="Collapsed" VerticalAlignment="Center">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme/>
                        </telerik:StyleManager.Theme>
                    </CheckBox>
                    <RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme/>
                        </telerik:StyleManager.Theme>
                    </RadioButton>
                    <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="Black" 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" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
            </Grid>
        </ControlTemplate>
    </Window.Resources>

    <Grid>
        <telerik:RadTreeView Margin="8" IsDragDropEnabled="True"
        SelectionMode="Multiple" IsSingleExpandPath="True">

            <telerik:RadTreeViewItem Header="Sport Categories" Template="{DynamicResource RadTreeViewItemControlTemplate1}">
                <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:RadTreeViewItem Header="SecondDown"/>
            <telerik:RadTreeViewItem Header="ThirdDown"/>
        </telerik:RadTreeView>
    </Grid>

[Janene]

Wow, do I really need all of that? I just want to change the color - it's surrounded by so much other customization.

Janene

[Lancelot]

Except for the coloring I did to the mouseover, it is the default template. It contains the animations and visual states. I dont recommend removing anything unless you are absolutely sure you are not going to need that particular state.

When we edit the template, we are overriding the style built in by telerik. This is an exact copy of the the control's style (excpet a swap out of the gradient you wanted) that comes with the controls, except now it is in your pages resources section.

Have no worries, you'll see the same performance you see when using the control right out of the box. However, now you can see what telerik puts into the visuals of their controls. Thats why they are smooth and responsive =)

If it makes it easier, just use this Visual Studio shortcut ctrl-M followed by ctrl-L. This will collapse/expand all nodes. Its how I personally find my way through a large visual tree ;)

Lancelot