Changing the DataTemplate of a TreeView in runtime

Question

I have a TreeView with 3 levels in my WPF application.

Level 1 and level 2 have their own HierarchicalDataTemplate. Level 3 has its own DataTemplate.

Here is the XAML code:

<Window.Resources>
    <HierarchicalDataTemplate x:Key="Level1Template" 
                          ItemsSource="{Binding Value}"
                          ItemTemplate="{StaticResource Level2RedTemplate}">
        <Border Background="Green">
            <TextBlock Text="Level1"/>
        </Border>
    </HierarchicalDataTemplate>

    <HierarchicalDataTemplate x:Key="Level2RedTemplate"
                          ItemsSource="{Binding Value}"
                          ItemTemplate="{StaticResource Level3Template}">
        <Border Background="Red">
            <TextBlock Text="Level2"/>
        </Border>
    </HierarchicalDataTemplate>

    <HierarchicalDataTemplate x:Key="Level2YellowTemplate"
                          ItemsSource="{Binding Value}"
                          ItemTemplate="{StaticResource Level3Template}">
        <Border Background="Yellow">
            <TextBlock Text="Level2"/>
    </HierarchicalDataTemplate>

    <DataTemplate x:Key="Level3Template">
        <Border Background="LightBlue">
            <TextBlock Text="Level3"/>
        </Border>
    </DataTemplate>

</Window.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Button Grid.Row="0"
            Content="Change Template"
            Click="ChangeTemplate" />

    <TreeView Grid.Row="1"
              Name="tv"
              ItemsSource="{Binding Items}"
              ItemTemplate="{StaticResource Level1Template}"/>
</Grid>

It works perfectly until here. The problem starts, when I want to change the DataTemplate of Level2 items by pressing a button in my window (see figure below).

I tried to assign a new HierarchicalDataTemplate to my TreeView from code behind (in the event handler of the button) like this:

Private Sub ChangeTemplate()

    CType(tv.ItemTemplate, HierarchicalDataTemplate).ItemTemplate = CType(Me.FindResource("Level2YellowTemplate"), HierarchicalDataTemplate)

End Sub

This is not possible, as I get an error, that "as soon as a Template-Object is used (sealed), it cannot be changed."

Is there any way, that I can change this template?

You should take a look at DataTemplateSelector. You will be able to switch from a template to another during runtime. — P.Manthe
@Bob But I think that DataTemplateSelector selects the DataTemplate based on some properties of my data, is that right? — Yvonnila
@Bob my data / any property of it doesn't change. I only want to change the template. So in more details: I change the ItemsSource (which has the same type as the old ItemsSource), and I want a new template for this new source. — Yvonnila
Ok, I don't know if this possible to do that way. But if you really want to follow the MVVM pattern, you'd better rely on your properties to change the DataTemplate => That is exactly the purpose of the MV... So you would create a specific property to switch your Template. — P.Manthe

Yvonnila Yvonnila · Accepted Answer · 2017-11-08T12:58:41

Thanks to the helfupful comment from @Bob, I solved the problem like this:

I defined a property in the UserControl, where I have the TreeView.

I changed the HierarchicalDataTemplate of level 1 like this:

<HierarchicalDataTemplate x:Key="Level1Template" 
                      ItemsSource="{Binding Value}"
                      ItemTemplateSelector="{StaticResource MySelector}">
    <Border Background="Green">
        <TextBlock Text="Level1"/>
    </Border>
</HierarchicalDataTemplate>

I implemented the MySelector class and implemented the Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate function. Using the container, I could access my UserControl and its properties.

The ItemsSource of my TreeView changes when I press a button in my usercontrol. After each change, the TemplateSelector is called, and so the template is updated.

Changing the DataTemplate of a TreeView in runtime

1 Answers