How to move xaml code inside HierarchicalDataTemplate to a resource

Question

I have the following TreeView with several HierarchicalDataTemplates. Inside every HierarchicalDataTemplate I have a block of xaml code to define the structure of my object X.

TreeView Example

<TreeView ItemsSource="{Binding Cars}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:Car}"
                                  ItemsSource="{Binding Children}">
            <StackPanel>
                <TextBlock Text="{Binding Path=Name}"
                           FontSize="15" 
                           FontWeight="Medium"
                           Foreground="Brown"/>
            </StackPanel>
        </HierarchicalDataTemplate>
</TreeView>

Now I would like to move the StackPanel to a resource, e.x. inside UserControl resource.
I tried defining a DataTemplate and using it as ItemTemplate for the HierarchicalDataTemplate but this does not work.

My attempt:

<DataTemplate x:Key="ModuleTemplate"
              DataType="{x:Type local:Module}">
    <StackPanel>
        <TextBlock Text="{Binding Path=Name}"
                   FontSize="15" 
                   FontWeight="Medium"
                   Foreground="Brown"/>
    </StackPanel>
</DataTemplate>

<!-- TreeView section-->
<HierarchicalDataTemplate DataType="{x:Type local:Car}"
                          ItemsSource="{Binding Children}"
                          ItemTemplate="{StaticResource ModuleTemplate}">

The idea from @mm8 is fine and would work, but in my case that would lead to many UserControls. I Would rather prefer something simpler.

Any ideas how can I achieve my goal?

Why are you not using the `{StaticResource}` markup? What makes you think you could use the name of the resource key, `"ModuleTemplate"`, as the _path_ for a binding expression? I would expect `ItemTemplate="{StaticResource ModuleTemplate}"` to work just fine. — Peter Duniho, Feb 03 '21 at 20:25
Note that the `ItemTemplate` will be applied to the children (modules) and not the the cars themselves. The question seems to be about how to move the "xaml code *inside* (the) HierarchicalDataTemplate to a resource". — mm8, Feb 03 '21 at 21:34
@PeterDuniho It was only a typo.. Of course I use `{StaticResource}` markup. **mm8** perfectly summarized my intention. I saw your proposal to use `UserControl` but this is not exactly what I am searching for. Has someone else an idea? — Stan1k, Feb 04 '21 at 10:01

score 1 · Accepted Answer · answered Feb 10 '21 at 15:39

I still just want to move the code inside (the) HierarchicalDataTemplate to UserControl.Resources ...

Then define the StackPanel as non-shared resource using the x:Shared attribute:

<UserControl.Resources>
    <StackPanel x:Key="sp" x:Shared="False">
        <TextBlock Text="{Binding Path=Name}"
                   FontSize="15" 
                   FontWeight="Medium"
                   Foreground="Brown"/>
    </StackPanel>

    <HierarchicalDataTemplate DataType="{x:Type local:Car}"
                              ItemsSource="{Binding Children}">
        <ContentControl Content="{StaticResource sp}" />
    </HierarchicalDataTemplate>
</UserControl.Resources>

There we go! That's the solution I searched from the start. To summarize, I didn't know that I could define a `StackPanel` with an **x:Key** and **x:Shared** propertys and then use it as a resource in a `ContentControl`. Was my question so bad to understand that people voted it down? Anyway thanks for your time and help! — Stan1k, Feb 10 '21 at 17:56

score -1 · Answer 2 · answered Feb 03 '21 at 20:49

-1

Now I would like to move the StackPanel to a resource, e.x. inside UserControl resource.

Try this:

<HierarchicalDataTemplate DataType="{x:Type local:Car}"
                          ItemsSource="{Binding Children}">
        <local:UserControl1 />
</HierarchicalDataTemplate>

...where UserControl1 is a UserControl with the StackPanel in it:

<UserControl...>
    <StackPanel>...</StackPanel>
</UserControl>

answered Feb 03 '21 at 20:49

mm8

163,881
10
57
88

Thanks for the suggestion! It would work, but like I mentioned above I don't want to have that many `UserControls`. Maybe someone else finds an other solution. – Stan1k Feb 05 '21 at 07:52
I don't understand what you are asking then.Why would you end up with "that many" UserControls? – mm8 Feb 08 '21 at 19:57
I know it sounds a bit confusing, but I would like to keep the resources **Inside the User Control** where I have my `TreeView` but just move it outside the `HierarchicalDataTemplate` declaration. Your solution will generate new classes (User Controls) and that's what I don't want. – Stan1k Feb 09 '21 at 12:28
@Stan1k: Can you give an example of such a resource? – mm8 Feb 09 '21 at 16:40
Of course. For example the `DataTemplate` "ModuleTemplate" which you can see under my question. This one I would like to put for example under `UserControl.Resources` where User Control is the same one, where my TreeView is. Shortly, I would like to have this all in one class, but the `TreeView` control be as small as possible. – Stan1k Feb 09 '21 at 18:04
So why don't you put the `HierarchicalDataTemplate` in `UserControl.Resources`? – mm8 Feb 09 '21 at 18:21
Because I still just want to move the code **inside (the) HierarchicalDataTemplate** to `UserControl.Resources`, not the entire `HierarchicalDataTemplate`. But it looks like this is not possible.. Anyway thanks for your help. – Stan1k Feb 10 '21 at 10:46
You mean that you want to move the `StackPanel`? – mm8 Feb 10 '21 at 15:29

How to move xaml code inside HierarchicalDataTemplate to a resource

2 Answers2