Using Treeview from Microsoft.UI.Xaml.Controls in UWP

Question

I'm dynamically creating a Tree in code using Treeview from Microsoft.UI.Xaml.Controls. This can have up to 40 levels so far, but this may increase. The only way I have found of adding children is by using a statement like this:

TestTree.RootNodes(0).Children.Add(childnode1)

When I wish to add a child at the next level down I then use:

TestTree.RootNodes(0).Children(0).Children.Add(childnode2)

ie I keep having to add another .children to the line. This works fine for a couple of levels, but becomes unwieldy for 30

I have created a SELECT CASE structure to pick the correct command depending on where I am in the hierarchy.

Its exactly the same when I try to read a specific leaf back again.

Is there a more elegant way of doing this so that I can iterate rather than using this very clumsy method?

Answer 1

Hello, Welcome to Micorosoft Q&A,

>ie I keep having to add another .children to the line. This works fine for a couple of levels, but becomes unwieldy for 30

I have created a SELECT CASE structure to pick the correct command depending on where I am in the hierarchy.

For your scenario, we suggest you use bind way to replace adding child node in the code behind, TreeView allow to use DataTemplate to render the collection, you could use TreeViewItem that with ItemsSource to render each node, and use TreeViewItem without ItemsSource to render each leaf. for more please refer this document. if you want to add node or leaf, you just need to edit your itemsoure.

Xaml Code

<Page.Resources>  
    <DataTemplate x:Key="FolderTemplate" x:DataType="local:ExplorerItem">  
        <muxc:TreeViewItem ItemsSource="{x:Bind Children}">  
            <StackPanel Orientation="Horizontal">  
                <Image Width="20" Source="Assets/folder.png"/>  
                <TextBlock Text="{x:Bind Name}" />  
            </StackPanel>  
        </muxc:TreeViewItem>  
    </DataTemplate>  

    <DataTemplate x:Key="FileTemplate" x:DataType="local:ExplorerItem">  
        <muxc:TreeViewItem>  
            <StackPanel Orientation="Horizontal">  
                <Image Width="20" Source="Assets/file.png"/>  
                <TextBlock Text="{x:Bind Name}"/>  
            </StackPanel>  
        </muxc:TreeViewItem>  
    </DataTemplate>  

    <local:ExplorerItemTemplateSelector  
            x:Key="ExplorerItemTemplateSelector"  
            FolderTemplate="{StaticResource FolderTemplate}"  
            FileTemplate="{StaticResource FileTemplate}" />  
</Page.Resources>  

<Grid>  
    <muxc:TreeView  
        ItemsSource="{x:Bind DataSource}"  
        ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"/>  
</Grid>  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks NicoZhu-MSFT.

I have been struggling to get this to work in vb.net. Just to confirm what I'm trying to do.

1. I am using recursion to find a particular leaf in my tree.
2. In doing so I keep a track of the route through the tree (ie child1 followed by child3 followed by child 2 etc)
3. I then add children to the leaf by adding enough .children clauses to simulate the tracking of my route
4. I use the length of the route (ie number of steps) to define how many .children clauses to add.

If I persevere in trying to get your method to work, will I be able to replace this inelegant method?

Thanks