This is a migrated thread and some comments may be shown as answers.

ItemTemplateSelector not working with ItemContainerStyle

3 Answers 358 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Tayyaba asked on 07 Mar 2018, 10:19 AM

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="*"/>

</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 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 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>

<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>

<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>

<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

3 Answers, 1 is accepted

answered on 08 Mar 2018, 04:30 PM

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

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 12 Mar 2018, 04:38 AM

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