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>

 

Drop a brain bomb

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s