TreeViewItem background

3 posts, 0 answers
  1. Cesar
    Cesar avatar
    3 posts
    Member since:
    Nov 2013

    Posted 04 Mar 2015 Link to this post

    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!! :)
  2. Cesar
    Cesar avatar
    3 posts
    Member since:
    Nov 2013

    Posted 04 Mar 2015 Link to this post

    Sorry, I add the images.

    Thank you!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 05 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top