ItemTemplateSelector and ItemContainerStyle not working together

[Ryan Black]

Hello,

I am on my way to trying to solve my issues that I posted here

One problem that I have noticed so far is that it seems that I can not have both ItemTemplateSelector and ItemContainerStyle for a TreeView.  Is this a bug?  If not, how would I go about using a custom TreeViewItemStyle?

Thanks

Ryan

 <Window.Resources>
        <!-- List Item Selected -->
        <LinearGradientBrush x:Key="GotFocusStyle"  EndPoint="0.5,1" StartPoint="0.5,0">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Black" Offset="0.501"/>
                <GradientStop Color="#FF091F34"/>
                <GradientStop Color="#FF002F5C" Offset="0.5"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

        <!-- List Item Hover -->
        <LinearGradientBrush x:Key="MouseOverFocusStyle" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF013B73" Offset="0.501"/>
                <GradientStop Color="#FF091F34"/>
                <GradientStop Color="#FF014A8F" Offset="0.5"/>
                <GradientStop Color="#FF003363" Offset="1"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

        <!-- List Item UnSelected -->
        <LinearGradientBrush x:Key="LostFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0">
            <LinearGradientBrush.RelativeTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5"/>
                    <SkewTransform CenterX="0.5" CenterY="0.5"/>
                    <RotateTransform CenterX="0.5" CenterY="0.5"/>
                    <TranslateTransform/>
                </TransformGroup>
            </LinearGradientBrush.RelativeTransform>
            <GradientStop Color="#FF091F34" Offset="1"/>
            <GradientStop Color="#FF002F5C" Offset="0.4"/>
        </LinearGradientBrush>

        <!-- List Item Highlight -->
        <SolidColorBrush x:Key="ListItemHighlight" Color="#FFE38E27" />

        <!-- List Item UnHighlight -->
        <SolidColorBrush x:Key="ListItemUnHighlight" Color="#FF6FB8FD" />

        <!-- Button Gradient -->
        <LinearGradientBrush x:Key="ButtonGradient" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF0E3D70"/>
            <GradientStop Color="#FF001832" Offset="1"/>
        </LinearGradientBrush>
    </Window.Resources>

    <Grid>
        <Grid.Resources>

            <ControlTemplate TargetType="Telerik:RadTreeViewItem" x:Key="TreeViewItemDefaultTemplate">
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">

                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="SelectionVisual"
                                            Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="FocusVisual"
                                            Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsExpanded" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Opacity" From="0.1" To="1.0"
                                            Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Opacity" From="1" To="0.1"
                                            Duration="0:0:0.2" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                            Storyboard.TargetProperty="Visibility" Duration="0"
                                            BeginTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
                <Grid Margin="2" Height="Auto" VerticalAlignment="Top">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom">
                        <!-- Selection -->
                        <Border x:Name="SelectionVisual" Visibility="Collapsed"
                                BorderBrush="#FFA8C9D8" BorderThickness="1,1,1,1"
                                CornerRadius="3,3,3,3">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF00CCFF" Offset="0" />
                                    <GradientStop Color="#FF9BB1FF" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <Border CornerRadius="2,2,2,2" BorderBrush="#FFFFFFFF"
                                    BorderThickness="2">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#E5FFFFFF" Offset="0" />
                                        <GradientStop Color="#33FFFFFF" Offset="1" />
                                        <GradientStop Color="#4DFFFFFF" Offset="0.5" />
                                        <GradientStop Color="#00FFFFFF" Offset="0.511" />
                                    </LinearGradientBrush>
                                </Border.Background>

                            </Border>
                        </Border>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                <ContentControl Name="Header"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </StackPanel>
                            <ToggleButton x:Name="Expander" Margin="0,0,0,5"></ToggleButton>
                        </StackPanel>

                        <Rectangle x:Name="FocusVisual" RadiusX="3" RadiusY="3"
                                Visibility="Collapsed" Stroke="Black" StrokeThickness="0.75"
                                StrokeDashArray="1,2" IsHitTestVisible="False" />
                    </Grid>
                    <ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed" />
                </Grid>

            </ControlTemplate>

            <Style TargetType="Telerik:RadTreeViewItem" x:Key="TreeViewItemStyle">
                <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
            </Style>

            <Style TargetType="ToggleButton" x:Key="Expander">
                <Setter Property="IsEnabled" Value="True" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Cursor" Value="Hand" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="ExpandedStates"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                                <DoubleAnimation Duration="0:0:0.2"
                                                        Storyboard.TargetName="CollapsedStates"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <XmlDataProvider x:Key="MyList" Source="XML/Scenes.xml" />

            <HierarchicalDataTemplate x:Key="Procedures" ItemsSource="{Binding XPath=Procedures/Procedure}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="300" />
                    </Grid.ColumnDefinitions>
                    <Label
                        VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent"
                        Foreground="Aqua"
                        FontSize="18"
                        Tag="{Binding XPath=@name}"
                        MinHeight="55"
                        Cursor="Hand"
                        FontFamily="Arial"
                        FocusVisualStyle="{x:Null}"
                        KeyboardNavigation.TabNavigation="None"
                        Background="{StaticResource LostFocusStyle}"
                        Name="SubItem"
                    >
                        <Label.ContextMenu>
                            <ContextMenu Name="editMenu">
                                <MenuItem Header="Edit"/>
                            </ContextMenu>
                        </Label.ContextMenu>
                        <TextBlock Text="{Binding XPath=@name}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock>
                    </Label>
                </Grid>
            </HierarchicalDataTemplate>

            <HierarchicalDataTemplate x:Key="Scenes" ItemsSource="{Binding XPath=Procedures/Procedure}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="300" />
                    </Grid.ColumnDefinitions>
                    <Label
                        VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent"
                        Foreground="White"
                        FontSize="18"
                        Tag="{Binding XPath=@name}"
                        MinHeight="55"
                        Cursor="Hand"
                        FontFamily="Arial"
                        FocusVisualStyle="{x:Null}"
                        KeyboardNavigation.TabNavigation="None"
                        Background="{StaticResource LostFocusStyle}"
                        Name="SubItem"
                    >
                        <Label.ContextMenu>
                            <ContextMenu Name="editMenu">
                                <MenuItem Header="Edit"/>
                            </ContextMenu>
                        </Label.ContextMenu>
                        <TextBlock Text="{Binding XPath=@name}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock>
                    </Label>
                </Grid>
            </HierarchicalDataTemplate>

            <local:LeagueDataTemplateSelector x:Key="SceneSelector" ScenesTemplate="{StaticResource Scenes}" ProceduresTemplate="{StaticResource Procedures}" />

        </Grid.Resources>
        <Grid Width="300" Height="320" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Border BorderBrush="#FF000000" CornerRadius="5" BorderThickness="5" Background="#FFFFFFFF">

                <Telerik:RadTreeView
                    ExpanderStyle="{StaticResource Expander}"
                    ItemsSource="{Binding Source={StaticResource MyList}, XPath=/Scenes/Scene}"
                    ItemTemplateSelector="{StaticResource SceneSelector}"
                    ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                />
            </Border>
        </Grid>
    </Grid>

Code Behind

public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

        }
    }

    public class LeagueDataTemplateSelector : DataTemplateSelector
    {
        private HierarchicalDataTemplate scenes;
        private HierarchicalDataTemplate procedures;

        public LeagueDataTemplateSelector()
        {
        }

        public HierarchicalDataTemplate ScenesTemplate
        {
           get
           {
               return this.scenes;
           }
           set
           {
               this.scenes = value;
           }
        }

        public HierarchicalDataTemplate ProceduresTemplate
        {
           get
           {
               return this.procedures;
           }
           set
           {
               this.procedures = value;
           }
        }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            string itemName = ((System.Xml.XmlElement)item).Name;

            if (itemName == "Procedure")
            {
                return this.procedures;
            }
            else if (itemName == "Scene")
            {
                return this.scenes;
            }
            return null;
        }
    }

[Bobi]

Hello Ryan Black,

We investigated this issue and found out that the problem was in the custom styles.
We answered to your previous ticket in this forum thread and also provided a sample project:
http://www.telerik.com/community/forums/wpf/treeview/select-entire-row-and-remove-expand-buttons.aspx

Let us know if you need some more help or have any other questions.

All the best,
Bobi
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Tina]

I have the same problem. I migrated my application from Silverlight to WPF. I have quite a few different trees with ItemContainerStyle and ItemTemplateSelectors and all of them stopped working. If I remove the ItemContainerStyle then the ItemTemplateSelector works and vice versa but not together.

Could you provide some pointers to what is the problem?


For example as soon as I set the ItemContainerStyle on the tree=view below no templates are applied,  even though the style that I am refering to RadTreeViewItemContainerStyle1 is the default style extracted using Blend:

   <HierarchicalDataTemplate x:Key="ItemTemplateX" ItemsSource="{Binding References}">
         <TextBlock Text="{Binding Title}"/>
   </HierarchicalDataTemplate>
 
   <UI1:NoteTemplateSelector x:Key="ItemTemplateSelector"
                                 Template1="{StaticResource ItemTemplateX}"
                                 Template2="{StaticResource ItemTemplateX}"
                                 Template3="{StaticResource ItemTemplateX}"
                                 />

<telerik:RadTreeView x:Name="_radTreeView"

ItemsSource="{Binding Path=References}"

 

Style="{StaticResource RadTreeViewTaskStyle}"

 

ItemContainerStyle="{StaticResource RadTreeViewItemContainerStyle1}"

ItemTemplateSelector="{StaticResource ItemTemplateSelector}"

>

Thanks,
Tina 

[Petar Mladenov]

Hello Tina,

 Could you please check out the attached project? I tried to reproduce this issue but I did not succeed. Both ItemContainerStyle and ItemTemplateSelector work fine.

Regards,
Petar Mladenov
the Telerik team

[Tina]

Actually I found the problem. It's explained here:

http://www.telerik.com/community/forums/wpf/treeview/itemtemplateselector-combined-with-itemcontainerstyle.aspx

In the extracted template for TreeItem the ContentPresenter "Header" style should have this line:
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" and it is missing it because of a bug.  

Thanks,
Tina