[TreeView] Add Items and LazyLoadItems properties

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -8489,6 +8489,16 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipService.Remove(System.Guid)">
             <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.ITooltipService.Remove(System.Guid)"/>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.#ctor">
+            <summary>
+            Initializes a new instance of the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem"/> class.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.Items">
+            <summary>
+            Gets or sets the list of sub-items to bind to the tree item
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.Text">
             <summary>
             Gets or sets the text of the tree item
@@ -8537,6 +8547,20 @@
             be selected when it is created.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.IconCollapsed">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Icon"/> displayed at the start of tree item,
+            when the node is collapsed.
+            If this icon is not set, the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.IconExpanded"/> will be used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.IconExpanded">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Icon"/> displayed at the start of tree item,
+            when the node is expanded.
+            If this icon is not set, the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.IconCollapsed"/> will be used.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem.Owner">
             <summary>
             Gets or sets the owning FluentTreeView
@@ -8581,6 +8605,46 @@
             item within the tree.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeView.ItemTemplate">
+            <summary>
+            Gets or sets the template for rendering tree items.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTreeView.LazyLoadItems">
+            <summary>
+            Gets or sets whether the tree should use lazy loading when expanding nodes
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.Text">
+            <summary>
+            Gets or sets the text of the tree item
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.Items">
+            <summary>
+            Gets or sets the sub-items of the tree item
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.IconCollapsed">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Icon"/> displayed at the start of tree item,
+            when the node is collapsed.
+            If this icon is not set, the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.IconExpanded"/> will be used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.IconExpanded">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Icon"/> displayed at the start of tree item,
+            when the node is expanded.
+            If this icon is not set, the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.IconCollapsed"/> will be used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ITreeViewItem.Disabled">
+            <summary>
+            When true, the control will be immutable by user interaction.
+            See <see href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled">disabled</see> HTML attribute for more information.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.ClassValue">
             <summary />
         </member>

examples/Demo/Shared/Pages/TreeView/Examples/TreeViewWithItems.razor

@@ -0,0 +1,55 @@
+<FluentTreeView Items="@Items" LazyLoadItems="true">
+    <ItemTemplate>
+        @context.Text
+        <span style="color: var(--accent-fill-rest); margin: 0 4px;">
+            @(context.Items == null ? "" : $"[{context.Items.Count()}]")
+        </span>
+    </ItemTemplate>
+</FluentTreeView>
+
+Total items: @Count
+
+@code
+{
+    private Icon IconCollapsed = new Icons.Regular.Size20.Folder();
+    private Icon IconExpanded = new Icons.Regular.Size20.FolderOpen();
+
+    private int Count = -1;
+    private IEnumerable<ITreeViewItem>? Items = new List<ITreeViewItem>();
+
+    protected override void OnInitialized()
+    {
+        Items = CreateTree(maxLevel: 5, maxItemsPerLevel: 12).Items;
+    }
+
+    // Recursive method to create tree
+    public TreeViewItem CreateTree(int maxLevel, int maxItemsPerLevel, int level = 0)
+    {
+        Count++;
+
+        int nbItems = Random.Shared.Next(maxItemsPerLevel - 3, maxItemsPerLevel);
+
+        var treeItem = new TreeViewItem
+            {
+                Text = $"Item {Count}",
+                Disabled = Count % 7 == 0,
+                IconCollapsed = IconCollapsed,
+                IconExpanded = IconExpanded,
+                Items = level == maxLevel
+                      ? null
+                      : new List<TreeViewItem>(Enumerable.Range(1, nbItems)
+                                                         .Select(i => CreateTree(maxLevel, maxItemsPerLevel, level + 1)))
+            };
+        return treeItem;
+    }
+
+
+    public class TreeViewItem : ITreeViewItem
+    {
+        public string Text { get; set; } = "";
+        public IEnumerable<ITreeViewItem>? Items { get; set; }
+        public Icon? IconCollapsed { get; set; }
+        public Icon? IconExpanded { get; set; }
+        public bool Disabled { get; set; }
+    }
+}

examples/Demo/Shared/Pages/TreeView/TreeViewPage.razor

@@ -24,6 +24,8 @@
 
 <DemoSection Title="Default with event handling" Component="@typeof(TreeViewDefault)"/>
 
+<DemoSection Title="With Items" Component="@typeof(TreeViewWithItems)" />
+
 <DemoSection Title="Flat tree" Component="@typeof(TreeViewFlat)"/>
 
 <DemoSection Title="Some expanded" Component="@typeof(TreeViewSomeExpanded)"/>

src/Core/Components/TreeView/FluentTreeItem.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 <fluent-tree-item @ref=Element
                   class="@Class"
@@ -12,9 +12,33 @@
                   @onselectedchange="@HandleSelectedChangeAsync"
                   @onexpandedchange="@HandleExpandedChangeAsync"
                   @attributes="AdditionalAttributes">
+
     @if (!string.IsNullOrWhiteSpace(Text))
     {
         <span class="treeitem-text">@Text</span>
     }
+
+    @if (IconExpanded != null || IconCollapsed != null)
+    {
+        <FluentIcon Value="@(Expanded ? (IconExpanded ?? IconCollapsed) : (IconCollapsed ?? IconExpanded))" Slot="start" />
+    }
+
     @ChildContent
+
+    @if (Items != null)
+    {
+        @if (Owner.LazyLoadItems && Items.Any() && !Expanded)
+        {
+            @* Lazy loading required a "fake" sub-item to simulate the [+] *@
+            <fluent-tree-item>@FluentTreeView.LoadingMessage</fluent-tree-item>
+        }
+        else
+        {
+            foreach (var item in Items)
+            {
+                @FluentTreeItem.GetFluentTreeItem(Owner, item)
+            }
+        }
+    }
+
 </fluent-tree-item>

src/Core/Components/TreeView/FluentTreeItem.razor.cs

@@ -6,6 +6,20 @@ public partial class FluentTreeItem : FluentComponentBase, IDisposable
 {
     private bool _disposed;
 
+    /// <summary>
+    /// Initializes a new instance of the <see cref="FluentTreeItem"/> class.
+    /// </summary>
+    public FluentTreeItem()
+    {
+        Id = Identifier.NewId();
+    }
+
+    /// <summary>
+    /// Gets or sets the list of sub-items to bind to the tree item
+    /// </summary>
+    [Parameter]
+    public IEnumerable<ITreeViewItem>? Items { get; set; }
+
     /// <summary>
     /// Gets or sets the text of the tree item
     /// </summary>
@@ -63,6 +77,22 @@ public partial class FluentTreeItem : FluentComponentBase, IDisposable
     [Parameter]
     public bool InitiallySelected { get; set; }
 
+    /// <summary>
+    /// Gets or sets the <see cref="Icon"/> displayed at the start of tree item,
+    /// when the node is collapsed.
+    /// If this icon is not set, the <see cref="IconExpanded"/> will be used.
+    /// </summary>
+    [Parameter]
+    public Icon? IconCollapsed { get; set; }
+
+    /// <summary>
+    /// Gets or sets the <see cref="Icon"/> displayed at the start of tree item,
+    /// when the node is expanded.
+    /// If this icon is not set, the <see cref="IconCollapsed"/> will be used.
+    /// </summary>
+    [Parameter]
+    public Icon? IconExpanded { get; set; }
+
     /// <summary>
     /// Gets or sets the owning FluentTreeView
     /// </summary>
@@ -75,11 +105,6 @@ public partial class FluentTreeItem : FluentComponentBase, IDisposable
     /// </summary>
     public bool Collapsed => !Expanded;
 
-    public FluentTreeItem()
-    {
-        Id = Identifier.NewId();
-    }
-
     void IDisposable.Dispose()
     {
         // Do not change this code. Put cleanup code in 'Dispose(bool disposing)' method
@@ -142,6 +167,7 @@ private async Task HandleExpandedChangeAsync(TreeChangeEventArgs args)
         }
 
         Expanded = args.Expanded.Value;
+
         if (ExpandedChanged.HasDelegate)
         {
             await ExpandedChanged.InvokeAsync(Expanded);
@@ -167,4 +193,34 @@ private async Task HandleSelectedChangeAsync(TreeChangeEventArgs args)
             await tree.ItemSelectedChangeAsync(this);
         }
     }
+
+    internal static RenderFragment GetFluentTreeItem(FluentTreeView owner, ITreeViewItem item)
+    {
+        RenderFragment fluentTreeItem = builder =>
+        {
+            int i = 0;
+            builder.OpenComponent<FluentTreeItem>(i++);
+            builder.AddAttribute(i++, "Items", item.Items);
+            builder.AddAttribute(i++, "Text", owner.ItemTemplate == null ? item.Text : string.Empty);
+            builder.AddAttribute(i++, "Disabled", item.Disabled);
+            builder.AddAttribute(i++, "IconCollapsed", item.IconCollapsed);
+            builder.AddAttribute(i++, "IconExpanded", item.IconExpanded);
+
+            if (owner.ItemTemplate != null)
+            {
+                builder.AddAttribute(i++, "ChildContent", owner.ItemTemplate(item));
+            }
+
+            builder.CloseComponent();
+
+            //builder.AddAttribute(i++, "Expanded", Expanded);
+            //builder.AddAttribute(i++, "ExpandedChanged", EventCallback.Factory.Create<bool>(this, HandleExpandedChangeAsync));
+            //builder.AddAttribute(i++, "Selected", Selected);
+            //builder.AddAttribute(i++, "SelectedChanged", EventCallback.Factory.Create<bool>(this, HandleSelectedChangeAsync));
+            //builder.AddAttribute(i++, "InitiallyExpanded", InitiallyExpanded);
+            //builder.AddAttribute(i++, "InitiallySelected", InitiallySelected); builder.CloseComponent();
+        };
+
+        return fluentTreeItem;
+    }
 }

src/Core/Components/TreeView/FluentTreeView.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 <CascadingValue Value="this" IsFixed="true">
     <fluent-tree-view @ref=Element
@@ -8,5 +8,13 @@
                       @onselectedchange="@HandleCurrentSelectedChangeAsync"
                       @attributes="AdditionalAttributes">
         @ChildContent
+
+        @if (Items != null)
+        {
+            foreach (var item in Items)
+            {
+                @FluentTreeItem.GetFluentTreeItem(this, item)
+            }
+        }
     </fluent-tree-view>
 </CascadingValue>

src/Core/Components/TreeView/FluentTreeView.razor.cs

@@ -10,6 +10,11 @@ public partial class FluentTreeView : FluentComponentBase, IDisposable
     private readonly Debouncer _currentSelectedChangedDebouncer = new();
     private bool _disposed;
 
+    public static string LoadingMessage = "Loading...";
+
+    [Parameter]
+    public IEnumerable<ITreeViewItem>? Items { get; set; }
+
     /// <summary>
     /// Gets or sets whether the tree should render nodes under collapsed items
     /// Defaults to false
@@ -49,6 +54,18 @@ public partial class FluentTreeView : FluentComponentBase, IDisposable
     [Parameter]
     public EventCallback<FluentTreeItem> OnExpandedChange { get; set; }
 
+    /// <summary>
+    /// Gets or sets the template for rendering tree items.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<ITreeViewItem>? ItemTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether the tree should use lazy loading when expanding nodes
+    /// </summary>
+    [Parameter]
+    public bool LazyLoadItems { get; set; } = false;
+
     [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(TreeChangeEventArgs))]
     public FluentTreeView()
     {
@@ -91,6 +108,8 @@ internal void Unregister(FluentTreeItem fluentTreeItem)
 
     private async Task HandleCurrentSelectedChangeAsync(TreeChangeEventArgs args)
     {
+        Console.WriteLine("HandleCurrentSelectedChangeAsync");
+
         if (!_allItems.TryGetValue(args.AffectedId!, out FluentTreeItem? treeItem))
         {
             return;

src/Core/Components/TreeView/ITreeViewItem.cs

@@ -0,0 +1,38 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public interface ITreeViewItem
+{
+    /// <summary>
+    /// Gets or sets the text of the tree item
+    /// </summary>
+    public string Text { get; set; }
+
+    /// <summary>
+    /// Gets or sets the sub-items of the tree item
+    /// </summary>
+    public IEnumerable<ITreeViewItem>? Items { get; set; }
+
+    /// <summary>
+    /// Gets or sets the <see cref="Icon"/> displayed at the start of tree item,
+    /// when the node is collapsed.
+    /// If this icon is not set, the <see cref="IconExpanded"/> will be used.
+    /// </summary>
+    public Icon? IconCollapsed { get; set; }
+
+    /// <summary>
+    /// Gets or sets the <see cref="Icon"/> displayed at the start of tree item,
+    /// when the node is expanded.
+    /// If this icon is not set, the <see cref="IconCollapsed"/> will be used.
+    /// </summary>
+    public Icon? IconExpanded { get; set; }
+
+    /// <summary>
+    /// When true, the control will be immutable by user interaction.
+    /// See <see href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled">disabled</see> HTML attribute for more information.
+    /// </summary>
+    public bool Disabled { get; set; }
+}