Creating Multicolumn TreeView

[Darren996]

Hi,

Hope you are well.

Not sure what I am doing here. I don't need sorting or caching. I don't need column sizing. I am trying to make a rudimentary multicolumn treeview in mvux. My GenerationTreeItem data template is not being selected by the TreeItemTemplateSelector?

HomePage.xaml

<Page.Resources>
    <!-- DataTemplate for Pool Rows -->
    <DataTemplate x:Key="PoolTemplate" x:DataType="local:PoolTreeItem">
        <Grid ColumnDefinitions="100,100">
            <TextBlock Grid.Column="0" Text="{Binding Id}" FontWeight="Bold" />
            <TextBlock Grid.Column="1" Text="PoolItemType" Foreground="Gray" />
        </Grid>
    </DataTemplate>

    <!-- DataTemplate for Generation Rows -->
    <DataTemplate x:Key="GenerationTemplate" x:DataType="local:GenerationTreeItem">
        <Grid ColumnDefinitions="100,100">
            <TextBlock Grid.Column="0" Text="{Binding Count}" />
            <TextBlock Grid.Column="1" Text="GenerationItemType" Foreground="Green" />
        </Grid>
    </DataTemplate>

    <!-- Template Selector Configuration -->
    <local:TreeItemTemplateSelector x:Key="MyTreeTemplateSelector"
        PoolTemplate="{StaticResource PoolTemplate}"
        GenerationTemplate="{StaticResource GenerationTemplate}" />

    <Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
        <Setter Property="ItemsSource" Value="{Binding Children}" />
    </Style>
</Page.Resources>

<Grid>
    <mvux:FeedView Source="{Binding Pools}">
        <DataTemplate>
            <TreeView ItemsSource="{Binding Data}">
                      <TreeView.ItemTemplate>
                          <DataTemplate x:DataType="local:ITreeItem">
                              <TreeViewItem ItemsSource="{Binding Children}">
                                  <ContentControl
                                      Content="{Binding}"
                                      ContentTemplateSelector="{StaticResource MyTreeTemplateSelector}" />
                              </TreeViewItem>
                          </DataTemplate>
                      </TreeView.ItemTemplate>
                 </TreeView> 
         </DataTemplate>
    </mvux:FeedView>
</Grid>

HomePage.xaml.cs
[using System.Collections.ObjectModel;

namespace SomeDumbApp.Presentation;

public partial class HomePage : Page
{
public HomePage()
{
InitializeComponent();
}

}

public interface ITreeItem
{
string Type { get; }
IReadOnlyList Children { get; }
}

public partial record PoolTreeItem(
string? Id,
string Type,
IReadOnlyList Children
) : ITreeItem;

public partial record GenerationTreeItem
(
int? Count,
string Type,
IReadOnlyList Children = null
) : ITreeItem
{
public IReadOnlyList Children { get; init; } = Array.Empty();
}

public class TreeItemTemplateSelector : DataTemplateSelector
{
public DataTemplate PoolTemplate { get; set; }
public DataTemplate GenerationTemplate { get; set; }

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
return item switch
{
PoolTreeItem => PoolTemplate,
GenerationTreeItem => GenerationTemplate,
_ => base.SelectTemplateCore(item, container)
};
}
](url)

HomeModel.cs
using System.Runtime.CompilerServices;
using SomeDumbApp.Domain;
usin```
g SomeDumbApp.Services;
using Uno.Extensions.Reactive;
using System.Collections.Immutable;
using Uno.Extensions.Reactive.Config;
using Uno.Extensions.Reactive.Bindings;

namespace SomeDumbApp.Presentation;

[Uno.Extensions.Reactive.ReactiveBindable(false)]
public partial record HomeModel
{

private readonly ISignalRService _signalRService;

public IListFeed Pools => ListFeed.AsyncEnumerable(FetchPoolsAsync);

public HomeModel(ISignalRService signalRService)
{

_signalRService = signalRService;

}

private async IAsyncEnumerable<IImmutableList> FetchPoolsAsync([EnumeratorCancellation] CancellationToken ct)
{
await _signalRService.StartAsync(ct);

var currentPools = ImmutableList<Pool>.Empty;

yield return ImmutableList<ITreeItem>.Empty;

await foreach (var domainPool in _signalRService.GetPoolStreamAsync(ct))
{
    var existingIndex = currentPools.FindIndex(p => p.Id == domainPool.Id);

    if (existingIndex >= 0)
    {
        currentPools = currentPools.SetItem(existingIndex, domainPool);
    }
    else
    {
        currentPools = currentPools.Add(domainPool);
    }

    var treeItems = currentPools.Select(p => (ITreeItem)new PoolTreeItem(
        Id: p.Id,
        Type: "Pool",
        Children: p.Generations?.Select(g => (ITreeItem)new GenerationTreeItem(Count: g.Count,
          Type: "Generation")).ToList() ?? new List<ITreeItem>()
        )).ToImmutableList();

    yield return treeItems; // Emit new immutable state to MVUX
}

}

~HomeModel()
{
_signalRService?.StopAsync().GetAwaiter();

}

AI wrote most of this. The pool object should be one single object? Not sure if it came out that way.  It's not displaying the child objects or the chevron?

Thanks,
Darren

[Darren996]

Okay I got the Chevron working in the TreeView. Looks like you can have multiple columns but only one child? In my case it would be:

public interface ITreeItem
{
    string Type { get; }
    IReadOnlyList<ITreeItem> Children { get; }
}

<TreeView ItemsSource="{Binding Data}">
    <TreeView.ItemTemplate>
        <DataTemplate x:DataType="local:ITreeItem">
            <TreeViewItem ItemsSource="{Binding Children}">
                <ContentControl
                    Content="{Binding}"
                    ContentTemplateSelector="{StaticResource MyTreeTemplateSelector}" />
            </TreeViewItem>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView> 


Whatever is in Children?  Is that right?

Thanks,
Darren

[Darren996]

I weren't thinking about it roight! Just add records to Children. Let OO sort it. Uno does support TreeView with multiple columns if you think about it that way. I would change the example to reflect this.

[Darren996]

Like this! Not that this is finished...

[Darren996]

That story is done! Uno must be faster than Avalonia because I don't have to call "await Task.Delay(1);?" I can take that out when Avalonia is gone?

[Darren996]

I don't need any more help...