Dynamic Templated TreeViewItem in WPF

I struggled with this for a long time for some reason so I decided to post a simple example here for everyone who may be encountering the same thing. The scenario I have here is when you have a treeview with several hardcoded treeview items and at the lowest levels of leafs you have them bound to some data provider. The trick is trying to dynamically bind the treeview items to different data templates based on some criteria.

The real example was to have a label and a text box for the dynamic items based on whether you are trying to edit it or not. The trick turned out to be to wrap your DataTemplate in a control and use styling to dynamically switch it.

 Download Sample Project

<Window

 x:Class=”DynamicTemplatedTreeViewItem.Window1″

 xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

 xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

 Title=”Window1″

 Height=”300″

 Width=”551″>

 <Window.Resources>

  <ResourceDictionary>

   <ControlTemplate x:Key=”SelectedTemplate” TargetType=”{x:Type Control}”>

    <Label Content=”{Binding XPath=title}” Foreground=”Red” FontWeight=”Bold”  />

   </ControlTemplate>

   <ControlTemplate x:Key=”DefaultTemplate” TargetType=”{x:Type Control}”>

    <Label Content=”{Binding XPath=title}” />

   </ControlTemplate>

   <DataTemplate x:Key=”template”>

    <Control Focusable=”False”>

     <Control.Style>

      <Style TargetType=”{x:Type Control}”>

       <Setter Property=”Template” Value=”{StaticResource DefaultTemplate}” />                           

        <Style.Triggers>

         <Trigger Property=”IsMouseOver” Value=”True”>

          <Setter Property=”Template” Value=”{StaticResource SelectedTemplate}” />

         </Trigger>

        </Style.Triggers>

       </Style>

      </Control.Style>

     </Control>

    </DataTemplate>

    <XmlDataProvider x:Key=”justnbusiness” Source=”http://www.justnbusiness.com/feed.aspx&#8221; />           

   </ResourceDictionary>

  </Window.Resources>

  <Grid>

  <Grid.ColumnDefinitions>

   <ColumnDefinition/>

   <ColumnDefinition/>

  </Grid.ColumnDefinitions>

  <TreeView

   HorizontalAlignment=”Stretch”

   x:Name=”treeView”

   SelectedValuePath=”description”

   BorderBrush=”#00000000″

   Background=”#00000000″>

   <TreeViewItem

    ItemsSource=”{Binding

     Mode=Default,

     Source={StaticResource justnbusiness},

     XPath=/rss/channel/item}”

    ItemTemplate=”{StaticResource template}”

    Header=”Blog Posts”/>

   </TreeView>

   <Border

    Grid.Column=”1″

    CornerRadius=”5,5,5,5″

    BorderThickness=”1,1,1,1″

    BorderBrush=”#FF000000″

    Padding=”5,5,5,5″

    Margin=”20,20,20,20″>

   <TextBlock

    Text=”{Binding

     Path=SelectedValue,

     ElementName=treeView,

     Mode=Default}”

     TextWrapping=”Wrap”/>

  </Border>

 </Grid>

</Window>

 

Author: justinmchase

I'm a Software Developer from Minnesota.

%d bloggers like this: