How to implement TreeView in c# markup

[mpa74]

I try to implement TreeView in my app, but have serious problems: can't see all tree levels, can't expand, can't click any items. Can anyone help me, please?

I have a View like this with TreeView component

public sealed partial class KaliberCanvasTabView : Page {
    public KaliberCanvasTabView() {
        this.DataContext<KaliberCanvasTabViewModel>((page, vm) => page
            .Content(
                new Grid()
                    .Children(
                        new TreeView()
                            .HorizontalAlignment(HorizontalAlignment.Left)
                            .VerticalAlignment(VerticalAlignment.Top)
                            .Background(Colors.DarkBlue)
                            .ItemsSource(() => vm.TreeItems)
                            .ItemTemplate<CanvasObject>(GraphItemTemplate.PointStructureTemplate)
                        )
                    )
            );
    }


}

Item template:

public static class GraphItemTemplate {
    public static UIElement PointStructureTemplate(CanvasObject canvasO) =>
        new TreeViewItem()
        .ItemsSource(x => x.Bind(() => canvasO.Children))
        .IsExpanded(true)
        .Content(x => x.Bind(() => canvasO.ObjectName))
        ;
}

Method for TreeItems creation

private void RecreateTreeItems() {
    TreeItems.Clear();
        
    WorkpieceGeometry parent = new WorkpieceGeometry() { ObjectName = "Level 1-1" };
        
    WorkpieceGeometry child11 = new WorkpieceGeometry() { ObjectName = "Level 2-1" };
    WorkpieceGeometry child12 = new WorkpieceGeometry() { ObjectName = "Level 2-2" };
    parent.Children.Add(child11);
    parent.Children.Add(child12);
    TreeItems.Add(parent);

    WorkpieceGeometry parent2 = new WorkpieceGeometry() { ObjectName = "Level 1-1" };
    WorkpieceGeometry parent3 = new WorkpieceGeometry() { ObjectName = "Level 1-3" };
    TreeItems.Add(parent2);
    TreeItems.Add(parent3);
}

So, we have at least 2 levels of tree, but in app we have only top level. Result is on the video:

KaliberURP_TreeView.mp4

Additional info:

• I use "IsExpanded" for tree item, but we can see only top level items
• in video we can see that each top item contains two "regions": external and internal (more dark). When I click on external - nothing happen, when click on internal - app crashed and video ends
• I use this page https://platform.uno/docs/articles/external/workshops/tube-player/modules/09-FeedView-None-and-Error-templates/README.html?tabs=direct to adapt XAML to C# Markup

[francoistanguay]

My guess is that it's not a C# Markup problem.

Are you able to share source code of a repro of just cod trying to create the TreeView in C# with some items?

Also share more details about the exception you get when you click on an item?

Thank you!

[kazo0]

Hi @mpa74!

Taking a look at your markup code for the bindings of the ItemTemplate and ItemsSource of the TreeView, I think the wrong extension methods are being used here. You can take a look at the docs here on Templates and Bindings in C# Markup. Following that doc I created some sample code that generates the following TreeView structure:

Here's the markup code that creates that:

namespace UnoApp29;

public sealed partial class MainPage : Page
{
  public record Item(string Name, Item[] Children)
  {
    public Item() : this(string.Empty, [])
    {
    }
  }

  private Item[] _items =
  [
    new Item()
    {
      Name = "Flavors",
      Children =
      [
        new Item() { Name = "Vanilla" },
        new Item() { Name = "Strawberry" },
        new Item() { Name = "Chocolate" }
      ]
    },
    new Item()
    {
      Name = "Toppings",
      Children =
      [
          new Item()
          {
              Name = "Candy",
              Children =
              [
                new Item() { Name = "Chocolate" },
                new Item() { Name = "Mint" },
                new Item() { Name = "Sprinkles" }
              ]
          },
          new Item()
          {
              Name = "Fruits",
              Children =
              [
                new Item() { Name = "Mango" },
                new Item() { Name = "Peach" },
                new Item() { Name = "Kiwi" }
              ]
          },
          new Item()
          {
              Name = "Berries",
              Children =
              [
                new Item() { Name = "Strawberry" },
                new Item() { Name = "Blueberry" },
                new Item() { Name = "Blackberry" }
              ]
          }
      ]
    }
  ];
  public MainPage()
  {
    this
      .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
      .Content(new StackPanel()
      .VerticalAlignment(VerticalAlignment.Center)
      .HorizontalAlignment(HorizontalAlignment.Center)
      .Children(
          new TreeView()
              .ItemsSource(_items)
              .ItemTemplate<Item>(item =>
                  new TreeViewItem()
                      .Content(() => item.Name)
                      .ItemsSource(() => item.Children))
      ));
  }
}

[mpa74]

Hi @kazo0 !
Just tested this code in new project and got this:

• in WASM looks fine
• in Windows (packaged and unpackaged) - same problem
  

Repo for test: https://github.com/mpa74/UnoTreeViewRenderProblem