TreeViewItem background

[Cesar]

Hi, 

I am triying to set background under entire row by items in a RadTreeView, but I don´t have expected result.

This is my actual result:



And this is what I want:



My xaml code:

<Window x:Class="RadControlsWpf_DataBinding_Demo_CodeBehind.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ani="clr-namespace:RadControlsWpf_DataBinding_Demo_CodeBehind"
xmlns:vm="clr-namespace:RadControlsWpf_DataBinding_Demo_CodeBehind.ViewModels"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow" Height="350" BorderThickness="0,2,0,0" Margin="0,0,0,2" Visibility="Collapsed">

    <Window.Resources>
        <vm:DataSource x:Key="TreeViewDataSource"/>
        
        <Style x:Key="RadTreeViewItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <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="30"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                        <Grid x:Name="RootElement" Background="{Binding Background, ElementName=HeaderRow}" >
                            <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"/>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="HeaderRow">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FFE1E1E1"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </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>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</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">
                                    </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>
                            <Rectangle Grid.ColumnSpan="1" 
Fill="#FFF4F4F5" 
HorizontalAlignment="Left" 
Height="1" Stroke="#FFEDEDED" 
VerticalAlignment="Top" 
Width="{Binding ActualWidth, ElementName=RootElement}" 
StrokeThickness="0" 
Margin="0,-1,0,0"/>

                            <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"/>
                                <Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="0" Opacity="0">
                                    <Border BorderBrush="White" BorderThickness="0" CornerRadius="0" Visibility="Collapsed">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                                <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="0" Grid.Column="0" Visibility="Collapsed">
                                    <Border BorderBrush="Transparent" BorderThickness="0" 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="0" Grid.Column="0" Visibility="Collapsed">
                                    <Border x:Name="border" BorderBrush="White" BorderThickness="0" 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" Visibility="Visible">
                                    <Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
                                </StackPanel>
                                <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" Visibility="Collapsed">
                                    <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" Visibility="Collapsed"/>
                                <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 x:Name="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>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate DataType="{x:Type ani:Animal}">
            <Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Height="Auto" Margin="0,1">
            <StackPanel VerticalAlignment="Center">
                <Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
                <TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
        </DataTemplate>

        <HierarchicalDataTemplate DataType="{x:Type vm:SubEspecie}" ItemsSource="{Binding Animales}">
            <HierarchicalDataTemplate.Resources>
                <Storyboard x:Key="OnMouseEnter1">
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFE1E1E1"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="OnMouseLeave1">
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFF4F4F4"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </HierarchicalDataTemplate.Resources>
            <Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Background="#FFF4F4F4" Height="Auto" Margin="0,1">
                <StackPanel VerticalAlignment="Center">
                    <Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
                    <TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
                </StackPanel>
            </Grid>
            <HierarchicalDataTemplate.Triggers>
                <EventTrigger RoutedEvent="UIElement.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.MouseLeave">
                    <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
                </EventTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate DataType="{x:Type vm:Especie}" ItemsSource="{Binding EspeciesAnimales}">
            <HierarchicalDataTemplate.Resources>
                <Storyboard x:Key="OnMouseEnter1">
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFCDCDCD"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="OnMouseLeave1">
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFE2E2E2"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </HierarchicalDataTemplate.Resources>
            <Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Background="#FFE2E2E2" Height="Auto" Margin="0,1">
                <StackPanel VerticalAlignment="Center">
                    <Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
                    <TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
                </StackPanel>
            </Grid>
            <HierarchicalDataTemplate.Triggers>
                <EventTrigger RoutedEvent="UIElement.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.MouseLeave">
                    <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
                </EventTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>

        <Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
            <Setter Property="IsSelected" Value="{Binding Path=Selected, Mode=TwoWay}"/>
            <Setter Property="IsExpanded" Value="{Binding Path=Expanded, Mode=TwoWay}"/>
        </Style>



    </Window.Resources>
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image" Source="logoA3.png" Stretch="Fill" Height="81" HorizontalAlignment="Left" Width="220"/>
        <telerik:RadTreeView  
            Margin="8"
            SelectionMode="Multiple"
            HorizontalAlignment="Left"
            ItemsSource="{Binding Source={StaticResource TreeViewDataSource}}"
            ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"
            IsExpandOnSingleClickEnabled="True" />
    </StackPanel>
</Window>

Anyone knows how to do it?

Regards!! :)

[Cesar]

Sorry, I add the images.

Thank you!

[Peshito]

Hello,

I see you are on the right track with retemplating the RadTreeViewItem. The solution is to edit the Backgruond property of the HeaderRow grid in the extracted template like this:

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

Attached is a sample project with the approach applied.

Regards,
Peshito
Telerik