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

ItemTemplateSelector and ItemContainerStyle not working together

4 Answers 274 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ryan Black
Top achievements
Rank 1
Ryan Black asked on 10 May 2010, 09:55 PM
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; 
        } 
    } 

4 Answers, 1 is accepted

Sort by
0
Bobi
Telerik team
answered on 13 May 2010, 11:33 AM
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.
0
Tina
Top achievements
Rank 1
answered on 18 Jun 2012, 11:45 PM
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 
0
Petar Mladenov
Telerik team
answered on 21 Jun 2012, 12:04 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Tina
Top achievements
Rank 1
answered on 21 Jun 2012, 04:16 PM
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
Tags
TreeView
Asked by
Ryan Black
Top achievements
Rank 1
Answers by
Bobi
Telerik team
Tina
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or