ItemContainerStyle only applies for the first level of items

2 posts, 0 answers
  1. Andrey
    Andrey avatar
    1 posts
    Member since:
    Jul 2015

    Posted 29 Jul 2015 Link to this post

    Hi there.

     I ran into a problem when changing the template for TreeView control. I modified the ItemContainerStyle as follows:

            <Style x:Key="FileBrowserItemStyle" 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="BorderThickness" Value="1"/>
                <Setter Property="Padding" Value="1,4,5,4"/>
                <Setter Property="MinHeight" Value="24"/>
                <Setter Property="IsDropAllowed" Value="True"/>
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                            <Grid x:Name="RootElement" UseLayoutRounding="True">
                                <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="#FF838383" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFDADADA" Offset="1"/>
                                                <GradientStop Color="#FFB6B6B6" Offset="0"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
                                    </Border>
                                    <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0,1">
                                                <GradientStop Color="#FFF8F6F9" Offset="0"/>
                                                <GradientStop Color="#FFCBCBCB" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
                                    </Border>
                                    <Border x:Name="SelectionVisual" BorderBrush="#FF494949" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFBBBBBB" Offset="1"/>
                                                <GradientStop Color="#FF959595"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/>
                                    </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="21">
                                        <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>
                                    <Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="20" MaxHeight="20" 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 x:Name="HeaderContentPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="4">
                                        <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" 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>
                                    <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>
                                </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>

     

    and assigned the template to the control:

            <telerik:RadTreeView x:Name="FileList" FontSize="18" FontFamily="Courier New" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="150" Background="#FFEEEEEE" Style="{DynamicResource FileBrowserStyl}" ItemContainerStyle="{DynamicResource FileBrowserItemStyle}"/>

    All I really did was changing the color of the selected item from orange to grey  but it only seems to change the color for the first level of hierarchy (image attached). I thought the ItemContainerStyle applies for all levels. Am I missing something?

     Would really appreciate your help.

    Thank you

  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 30 Jul 2015 Link to this post

    Hello Andrey,

    As stated in our documentation, when you use ItemContainerStyle with static RadTreeViewItems, it will get applied only to the top-level children of the RadTreeView. If you need to have it applied to all items, you need to set the ItemContainerStyle to the top-level RadTreeViewItems also:
    <telerik:RadTreeView Width="250" ItemContainerStyle="{StaticResource FileBrowserItemStyle}">
        <telerik:RadTreeViewItem Header="item 1" IsExpanded="True" ItemContainerStyle="{StaticResource FileBrowserItemStyle}">
            <telerik:RadTreeViewItem Header="item 1.1" />
            <telerik:RadTreeViewItem Header="item 1.2" />
            <telerik:RadTreeViewItem Header="item 1.3" />
            <telerik:RadTreeViewItem Header="item 1.4" />
        </telerik:RadTreeViewItem>
    </telerik:RadTreeView>

    Another option is to use implicit style instead that will get applied to all items.


    Regards,
    Sia
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top