ItemTemplateSelector and ItemContainerStyle not working together

5 posts, 0 answers
  1. Ryan Black
    Ryan Black avatar
    54 posts
    Member since:
    Mar 2010

    Posted 10 May 2010 Link to this post

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

  2. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 13 May 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Tina
    Tina avatar
    17 posts
    Member since:
    May 2011

    Posted 18 Jun 2012 Link to this post

    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 
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 21 Jun 2012 Link to this post

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

  6. Tina
    Tina avatar
    17 posts
    Member since:
    May 2011

    Posted 21 Jun 2012 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready