ItemTemplateSelector not working with ItemContainerStyle

[Tayyaba]

Hi,

I'm facing issue that my ItemTemplateSelector doesn't work with my ItemContainerStyle.

If i comment out my ItemCOntainerStyle then ItemTemplateSelector works fine.
ItemContainerStyle which i'm using is as follows:

<Style x:Key="SelectionStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
        <Setter Property="IsSelected"  Value="{Binding IsSelected, Mode=TwoWay}" />
        <Setter Property="IsExpanded"  Value="{Binding IsExpanded, Mode=TwoWay}" />
        <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="CheckState" Value="Off"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                    <Grid x:Name="RootElement">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <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="White" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                                <Border BorderBrush="#CCE6FF" BorderThickness="1" CornerRadius="0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#CCE6FF" Offset="1"/>
                                            <GradientStop Color="#CCE6FF" Offset="0"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                            </Border>
                            <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#B3DAFF" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="#B3DAFF" BorderThickness="1" CornerRadius="0">
                                    <Border.Background>
                                        <!--<LinearGradientBrush EndPoint="0,1">
                                                <GradientStop Color="#FFF8F6F9" Offset="0"/>
                                                <GradientStop Color="#FFF0F0F0" Offset="1"/>
                                            </LinearGradientBrush>-->
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#B3DAFF" Offset="1" />
                                            <GradientStop Color="#B3DAFF" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                            </Border>
                            <Border x:Name="SelectionVisual" BorderBrush="#80C1FF" BorderThickness="1" Grid.ColumnSpan="5" Grid.Column="3" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="#80C1FF" BorderThickness="1" CornerRadius="0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#80C1FF" Offset="1"/>
                                            <GradientStop Color="#80C1FF"/>
                                        </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" IsEnabled="{Binding HasChildren, Mode=OneWay}" 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.Triggers>
                        <Trigger Property="IsInEditMode" Value="True">
                            <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsSelectionActive" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="SelectionVisual" Value="0"/>
                            <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Header" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsLoadingOnDemand" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="LoadingVisualTransform">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="LoadingVisualTransform"/>
                            </Trigger.ExitActions>
                            <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsDragOver" Value="True">
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" SourceName="HeaderRow" Value="True"/>
                                <Condition Property="IsEnabled" SourceName="CheckBoxElement" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Kindly let me know what is the issue in my ItemContainerStyle.

 

Regards,

Tayyaba

[Petar Mladenov]

Hello Tayyaba,

You have custom ControlTemplate for RadTreeViewItem but you don't bind the following:

ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"

in the HEADER (x:Name=Header) and:

ContentTemplateSelector="{TemplateBinding HeaderEditTemplateSelector}"

in the EditHeaderElement (x:Name=EditHeaderElement).

Could you please try adding these two lines and see if the problem still persist ? If yes, can you try giving more details regarding your scenario ?


Regards,
Petar Mladenov
Progress Telerik

[Tayyaba]

Hi Petar,

 

Thank you for helping me out, yes adding these two lines solved some of my problem, but I still have some problem left with me.

I am using contextMenu on these treeViewItems which is using the same "SelectionStyle" and it stopped working when I used the ItemTemplateSelector. I thought it is not working because of some issue in "SelectionStyle" which you told me. But even after resolving that part which you suggested still contextMenu is not working for treeViewItems. ContextMenu was working fine before using the ItemTemplateSelector.

My contextMenu is this:

<Style x:Key="MenuItemContainerCustom" TargetType="telerik:RadMenuItem">
        <Setter Property="Header" Value="{Binding Text}"/>
        <Setter Property="InputGestureText" Value="{Binding InputGestureText}"/>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>

                    <Grid Margin="-27,0,-30,0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <StackPanel  Grid.Column="0"  Orientation="Horizontal" Margin="0 0 5 0">
                            <CheckBox  IsChecked="{Binding Path=DataContext.IsChecked, Mode=OneWay ,  RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadMenuItem}}}"  Command="{Binding Path=DataContext.Command, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadMenuItem}}}"  Visibility="{Binding Path=DataContext.IsCheckboxEnabled, Mode=TwoWay,  RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadMenuItem}},Converter={StaticResource CheckBoxVisibilityConverter}}">
                            </CheckBox>
                        </StackPanel>
                        <StackPanel  Grid.Column="1" Orientation="Horizontal" Margin="0">
                            <TextBlock Text="{Binding}"/>
                        </StackPanel>
                    </Grid>

                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
        <Setter Property="Command" Value="{Binding Command}"/>
        <Setter Property="IsEnabled" Value="{Binding IsMenuItemEnabled}"/>
    </Style>

    <Style x:Key="ContextMenuStyle" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource SelectionStyle}">
        <Setter Property="telerik:RadContextMenu.ContextMenu">
            <Setter.Value>
                <telerik:RadContextMenu Width="{Binding ContextMenu.Width}"  Visibility="{Binding ContextMenu.MenuItems.Count, Converter={StaticResource ParentContextMenuVisibilityConverter}}"
                                            InheritDataContext="False" IsOpen="{Binding ContextMenu.IsOpened, Mode=TwoWay}"
                                            DataContext="{Binding UIElement.ParentTreeView.DataContext, RelativeSource={RelativeSource Self}}"
                                            ItemsSource="{Binding ContextMenu.MenuItems}"
                        ItemContainerStyle="{StaticResource MenuItemContainerCustom}">
                    <telerik:EventToCommandBehavior.EventBindings>
                        <telerik:EventBinding EventName="Opening" Command="{Binding ContextMenuOpeningCommand}" CommandParameter="{Binding Path=UIElement.Item, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadContextMenu}}" />
                    </telerik:EventToCommandBehavior.EventBindings>
                </telerik:RadContextMenu>
            </Setter.Value>
        </Setter>
    </Style>

 

Thank you in advance.

 

Regards,

Tayyaba

[Tayyaba]

Hi Petar,

 

Ignore my previous reply, in that i was missing this line

ItemContainerStyle="{StaticResource ContextMenuStyle}"

 

in my treeGroupNode template.

 

Thank you for helping me out.

 

Regards,

Tayyaba