ItemTemplateSelector combined with ItemContainerStyle?

3 posts, 1 answers
  1. Erik
    Erik avatar
    24 posts
    Member since:
    Nov 2010

    Posted 09 Mar 2012 Link to this post

    I have a RadTreeView bound to a collection that contains two types of objects, "Container" and "Item". I use an ItemTemplateSelector to set the correct (Hierarchical)DataTemplate. So far so good, but now I want to style the RadTreeViewItem so I can change selected visual styles and indents and such. I've added an ItemContainerStyle to the RadTreeView, but now the ItemTemplateSelector doesn't work anymore, the RadTreeView is rendered showing type names for all the items.

    Is there a way to combine ItemTemplateSelector with an ItemContainerStyle? Should I be using another approach?

    My sample code:
    public class Container : INotifyPropertyChanged
    {
       public Container()
       {
          Children = new ObservableCollection<object>();
       }
     
        
       // Public properties
     
       public ObservableCollection<object> Children { get; private set; }
     
       private string _displayName;
       public string DisplayName
       {
          get { return _displayName; }
          set
          {
             _displayName = value;
             OnPropertyChanged("DisplayName");
          }
       }
     
     
       // INotifyPropertyChanged members
     
       public event PropertyChangedEventHandler PropertyChanged;
       private void OnPropertyChanged(string propertyName)
       {
          if(PropertyChanged != null)
          {
             PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
       }
    }
     
    public class Item : INotifyPropertyChanged
    {
       // Public properties
     
       private string _displayName;
       public string DisplayName
       {
          get { return _displayName; }
          set
          {
             _displayName = value;
             OnPropertyChanged("DisplayName");
          }
       }
     
     
       // INotifyPropertyChanged members
     
       public event PropertyChangedEventHandler PropertyChanged;
       private void OnPropertyChanged(string propertyName)
       {
          if(PropertyChanged != null)
          {
             PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
       }
    }
     
    public partial class MainWindow
    {
       // Constructors
     
       public MainWindow()
       {
          InitializeComponent();
          CreateDummyData();
          DataContext = this;
       }
     
     
       // Public properties
     
       public ObservableCollection<object> Items { get; private set; }
     
     
       // Private methdods
     
       private void CreateDummyData()
       {
          Items = new ObservableCollection<object>();
     
          // level 0
          var i1 = new Item { DisplayName = "Item 1" };
          Items.Add(i1);
     
          var i2 = new Item { DisplayName = "Item 2" };
          Items.Add(i2);
     
          var c1 = new Container { DisplayName = "Container 1" };
          Items.Add(c1);
     
          var c2 = new Container { DisplayName = "Container 2" };
          Items.Add(c2);
     
          var i8 = new Item { DisplayName = "Item 8" };
          Items.Add(i8);
     
          var c3 = new Container { DisplayName = "Container 3" };
          Items.Add(c3);
     
          var i11 = new Item { DisplayName = "Item 11" };
          Items.Add(i11);
     
     
          // Level 1.0
          var c1S1 = new Container { DisplayName = "Subcontainer 1" };
          c1.Children.Add(c1S1);
     
          var c1S2 = new Container { DisplayName = "Subcontainer 2" };
          c1.Children.Add(c1S2);
     
          var i3 = new Item { DisplayName = "Item 3" };
          c1.Children.Add(i3);
     
          var i4 = new Item { DisplayName = "Item 4" };
          c1.Children.Add(i4);
     
          var i12 = new Item { DisplayName = "Item 12" };
          c1.Children.Add(i12);
     
     
          // Level 1.0.0
          var c1S1S1 = new Container { DisplayName = "Subsubcontainer 1" };
          c1S1.Children.Add(c1S1S1);
     
          var i5 = new Item { DisplayName = "Item 5" };
          c1S1.Children.Add(i5);
     
          var i6 = new Item { DisplayName = "Item 6" };
          c1S1.Children.Add(i6);
     
          var i7 = new Item { DisplayName = "Item 7" };
          c1S1S1.Children.Add(i7);
     
     
          // Level 1.0.1
     
          var i15 = new Item { DisplayName = "Item 15" };
          c1S2.Children.Add(i15);
     
          var i16 = new Item { DisplayName = "Item 16" };
          c1S2.Children.Add(i16);
     
          var i17 = new Item { DisplayName = "Item 17" };
          c1S2.Children.Add(i17);
     
          // Level 1.0.0.0
     
          var i13 = new Item { DisplayName = "Item 13" };
          c1S1S1.Children.Add(i13);
     
          var i14 = new Item { DisplayName = "Item 14" };
          c1S1S1.Children.Add(i14);
     
     
          // Level 3.0
     
          var i9 = new Item { DisplayName = "Item 9" };
          c3.Children.Add(i9);
     
          var i10 = new Item { DisplayName = "Item 10" };
          c3.Children.Add(i10);
       }
    }
     
    public class MyDataTemplateSelector : DataTemplateSelector
    {
       public HierarchicalDataTemplate ContainerTemplate { get; set; }
       public DataTemplate ItemTemplate { get; set; }
     
       public override DataTemplate SelectTemplate(object item, DependencyObject container)
       {
          if(item is Item)
          {
             return ItemTemplate;
          }
     
          return ContainerTemplate;
       }
    }

    <Window
       xmlns:TreeViewTest="clr-namespace:TreeViewTest"
       xmlns:System_Windows_Automation="clr-namespace:System.Windows.Automation;assembly=UIAutomationTypes"
       x:Class="TreeViewTest.MainWindow"
       Title="MainWindow" Height="350" Width="525">
       <Window.Resources>
     
          <HierarchicalDataTemplate x:Key="ContainerTemplate" ItemsSource="{Binding Children}">
             <TextBlock Text="{Binding DisplayName}" Background="Red"/>
          </HierarchicalDataTemplate>
     
          <DataTemplate x:Key="ItemTemplate">
             <TextBlock Text="{Binding DisplayName}" Background="Green"/>
          </DataTemplate>
     
          <TreeViewTest:MyDataTemplateSelector
             x:Key="MyDataTemplateSelector"
             ContainerTemplate="{StaticResource ContainerTemplate}"
             ItemTemplate="{StaticResource ItemTemplate}"/>
     
        <Style x:Key="RadTreeViewItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
            <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="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <!--<Setter>
                <Setter.Value>
                    <System_Windows_Automation:ToggleState>Off</System_Windows_Automation:ToggleState>
                </Setter.Value>
            </Setter>--> <!--causes exception-->
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1,0,5,0"/>
            <Setter Property="IsDropAllowed" Value="True"/>
            <Setter Property="ItemsOptionListType" Value="Default"/>
            <Setter Property="IsEnabled" Value="True"/>
            <Setter Property="MinHeight" Value="24"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                        <Grid x:Name="RootElement">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="EditStates">
                                    <VisualState x:Name="Display"/>
                                    <VisualState x:Name="Edit">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                            <DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="LoadingOnDemandStates">
                                    <VisualState x:Name="LoadingOnDemand">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="LoadingOnDemandReverse"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpandStates">
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Collapsed"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <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="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                                    <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                                <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                    <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0,1">
                                                <GradientStop Color="#FFF8F6F9" Offset="0"/>
                                                <GradientStop Color="#FFF0F0F0" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                    <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFCE79F" Offset="1"/>
                                                <GradientStop Color="#FFFDD3A8"/>
                                            </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" 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>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
     
       </Window.Resources>
       <Grid>
          <telerik:RadTreeView
             ItemsSource="{Binding Items}"
             ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"
             ItemContainerStyle="{DynamicResource RadTreeViewItemStyle}"/>
       </Grid>
    </Window>
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 14 Mar 2012 Link to this post

    Hi Erik,

     You've just hit a bug in the RadTreeView so we updated your telerik account points. Unfortunately, when you extract the Style of the RadTreeViewItem , there is a line that is not extracted properly :
     

    <ContentPresenter x:Name="Header"
                                                          ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                          Content="{TemplateBinding Header}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

    You can see this fixed in the attached project . Please excuse us for the inconvenience caused.


    Greetings,
    Petar Mladenov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Erik
    Erik avatar
    24 posts
    Member since:
    Nov 2010

    Posted 14 Mar 2012 Link to this post

    Thank you, the provided Style works :)
Back to Top