fix(treeview): typed data-driven TreeView<T> with per-container hosting (#447)

A node-mode WinUI TreeView stringifies TreeViewNode.Content and cannot host
a pre-built UIElement, so TreeViewNodeData.ContentElement rendered blank
rows (#447). Add a typed, data-driven TreeView<T> — the hierarchical peer of
ListView<T> — that renders each node from a data -> Element viewBuilder (the
WinUI ItemTemplate equivalent), with heterogeneous nodes handled by a switch
in the viewBuilder (the ItemTemplateSelector pattern).

Hosting mirrors the typed ListView<T>: the ItemTemplate is an empty
ContentControl shell and each node view is mounted imperatively into the
realized container via the internal TreeViewList's ContainerContentChanging
(fresh mount on realize, unmount on recycle). This keeps expand/collapse
robust under container recycling — fixing the "every other expand/collapse
blanks the first child row(s)" regression that the earlier declarative
{Binding Content} approach suffered (a recycled container retained the
element's visual parent). node.Content holds the data item; the ItemInvoked
and Expanding trampolines read T back from it.

TreeViewNodeData.ContentElement is marked [Obsolete] pointing at TreeView<T>;
the legacy path stays functional (CS0618 suppressed at internal use sites).

- Element.cs: TemplatedTreeViewElementBase (object-erased base) +
  TemplatedTreeViewElement<T>; OwnPropsEqual arm.
- Dsl.cs: TreeView<T> factory overloads (explicit + IReactorKeyed).
- Reconciler: empty-shell ItemTemplate, ContainerContentChanging hosting on
  the internal TreeViewList, keyed in-place node diff that reconciles only
  realized containers, full-tree unmount walk.
- Samples: DataTemplateDemo section 4 migrated to a discriminated PetNode model.
- Tests: TemplatedTreeViewFixtures (TTV_) — render, heterogeneous templates,
  keyed update, expand/collapse cycles, events, value-type T, unmount.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: codemonkeychris

samples/Reactor.TestApp/Demos/DataTemplateDemo.cs

@@ -44,7 +44,7 @@ public override Element Render()
 
         return ScrollView(VStack(16,
             Heading("DataTemplate Demo"),
-            TextBlock("Typed ListView<T>, GridView<T>, FlipView<T> with viewBuilder, plus TreeView ContentElement."),
+            TextBlock("Typed ListView<T>, GridView<T>, FlipView<T> and TreeView<T> — all data-driven with a viewBuilder."),
 
             // Filter + add/remove controls
             HStack(12,
@@ -154,48 +154,75 @@ public override Element Render()
 
             TextBlock($"Showing {flipIndex + 1} of {filtered.Count}").Foreground(SecondaryText),
 
-            // 4. TreeView with ContentElement
-            SubHeading("4. TreeView with ContentElement"),
-            TextBlock("Tree nodes render custom Reactor elements instead of plain text."),
+            // 4. Typed TreeView<T> — hierarchical peer of ListView<T>
+            SubHeading("4. Typed TreeView<T> with viewBuilder"),
+            TextBlock("Heterogeneous nodes render distinct templates via a switch in the viewBuilder (the ItemTemplateSelector pattern)."),
             Border(
-                TreeView(
-                    new TreeViewNodeData("Pets") { IsExpanded = true,
-                        ContentElement = HStack(8,
+                TreeView(BuildPetTree(filtered),
+                    keySelector: n => n.Key,
+                    childrenSelector: n => n.Children.Length > 0 ? n.Children : null,
+                    viewBuilder: n => n switch
+                    {
+                        PetRoot => HStack(8,
                             TextBlock("\U0001F3E0").FontSize(16),
                             TextBlock("All Pets").SemiBold()
                         ),
-                        Children = new[] { "Cat", "Dog", "Rabbit", "Hamster", "Parrot" }
-                            .Where(species => filtered.Any(a => a.Species == species))
-                            .Select(species => new TreeViewNodeData(species)
-                            {
-                                IsExpanded = true,
-                                ContentElement = HStack(8,
-                                    TextBlock(species switch
-                                    {
-                                        "Cat" => "\U0001F431",
-                                        "Dog" => "\U0001F436",
-                                        "Rabbit" => "\U0001F430",
-                                        "Hamster" => "\U0001F439",
-                                        "Parrot" => "\U0001F99C",
-                                        _ => "\U0001F43E"
-                                    }),
-                                    TextBlock(species).SemiBold(),
-                                    TextBlock($"({filtered.Count(a => a.Species == species)})").Foreground(TertiaryText)
-                                ),
-                                Children = filtered
-                                    .Where(a => a.Species == species)
-                                    .Select(a => new TreeViewNodeData(a.Name)
-                                    {
-                                        ContentElement = HStack(8,
-                                            TextBlock(a.Emoji),
-                                            TextBlock(a.Name),
-                                            Caption($"#{a.Id}").Foreground(TertiaryText)
-                                        )
-                                    }).ToArray()
-                            }).ToArray()
-                    }
-                )
-            ).CornerRadius(8).Height(300)
+                        PetSpecies s => HStack(8,
+                            TextBlock(s.Emoji),
+                            TextBlock(s.Species).SemiBold(),
+                            TextBlock($"({s.Count})").Foreground(TertiaryText)
+                        ),
+                        PetLeaf l => HStack(8,
+                            TextBlock(l.Animal.Emoji),
+                            TextBlock(l.Animal.Name),
+                            Caption($"#{l.Animal.Id}").Foreground(TertiaryText)
+                        ),
+                        _ => TextBlock("?")
+                    })
+                    // Expand every group; leaves have no children to expand.
+                    with { IsExpanded = n => n is not PetLeaf }
+            ).CornerRadius(8).Height(300).Margin(10)
         ));
     }
+
+    // ── §4 typed-tree model: a discriminated pet hierarchy ────────────────
+    // (root group → species groups → animal leaves). Distinct record shapes
+    // drive distinct per-node templates in the viewBuilder switch above.
+    abstract record PetNode(string Key)
+    {
+        public PetNode[] Children { get; init; } = [];
+    }
+    record PetRoot(string Key) : PetNode(Key);
+    record PetSpecies(string Key, string Species, string Emoji, int Count) : PetNode(Key);
+    record PetLeaf(string Key, Animal Animal) : PetNode(Key);
+
+    static string EmojiForSpecies(string species) => species switch
+    {
+        "Cat" => "\U0001F431",
+        "Dog" => "\U0001F436",
+        "Rabbit" => "\U0001F430",
+        "Hamster" => "\U0001F439",
+        "Parrot" => "\U0001F99C",
+        _ => "\U0001F43E"
+    };
+
+    static PetNode[] BuildPetTree(List<Animal> animals)
+    {
+        var speciesGroups = new[] { "Cat", "Dog", "Rabbit", "Hamster", "Parrot" }
+            .Where(species => animals.Any(a => a.Species == species))
+            .Select(species => (PetNode)new PetSpecies(
+                $"species:{species}",
+                species,
+                EmojiForSpecies(species),
+                animals.Count(a => a.Species == species))
+            {
+                Children = animals
+                    .Where(a => a.Species == species)
+                    .Select(a => (PetNode)new PetLeaf($"animal:{a.Id}", a))
+                    .ToArray()
+            })
+            .ToArray();
+
+        return [new PetRoot("root") { Children = speciesGroups }];
+    }
 }

src/Reactor/Core/Element.cs

@@ -701,6 +701,16 @@ internal static bool OwnPropsEqual(Element a, Element b)
                 && ta.GetIsItemClickEnabled() == tb.GetIsItemClickEnabled()
                 && !ta.HasSetters && !tb.HasSetters,
 
+            // Templated hierarchical TreeView — same rationale as the
+            // templated lists above: Items/selectors/ViewBuilder are factory
+            // inputs that drive child reconcile, not parent-control props.
+            (TemplatedTreeViewElementBase tta, TemplatedTreeViewElementBase ttb) =>
+                tta.GetSelectionMode() == ttb.GetSelectionMode()
+                && tta.GetCanDragItems() == ttb.GetCanDragItems()
+                && tta.GetAllowDrop() == ttb.GetAllowDrop()
+                && tta.GetCanReorderItems() == ttb.GetCanReorderItems()
+                && !tta.HasSetters && !ttb.HasSetters,
+
             // Lazy (virtualized) stacks: same rationale — Items/ViewBuilder
             // are factory inputs, not control properties.
             (LazyStackElementBase la, LazyStackElementBase lb) =>
@@ -1736,6 +1746,17 @@ public record TreeViewNodeData(string Content, TreeViewNodeData[]? Children = nu
     /// Optional Reactor element to render as the node's visual content.
     /// When null, a TextBlock showing Content is rendered.
     /// </summary>
+    /// <remarks>
+    /// Deprecated. WinUI's node-mode <c>TreeView</c> stringifies node content
+    /// and cannot host a pre-built <c>UIElement</c>, so rich per-node visuals
+    /// must come from a template (a <c>data → Element</c> function), never an
+    /// element instance. Use the typed, data-driven
+    /// <c>UI.TreeView&lt;T&gt;(items, keySelector, childrenSelector, viewBuilder)</c>
+    /// — the hierarchical peer of <c>ListView&lt;T&gt;</c> — instead. The legacy
+    /// path stays functional for back-compat but renders blank under
+    /// virtualization recycling.
+    /// </remarks>
+    [Obsolete("Use the typed UI.TreeView<T>(items, keySelector, childrenSelector, viewBuilder) overload (the hierarchical peer of ListView<T>); a pre-built Element cannot be hosted in a node-mode TreeViewNode. See issue #447.")]
     public Element? ContentElement { get; init; }
 }
 
@@ -3192,6 +3213,122 @@ public override void ApplyControlSetters(object control) =>
     internal override bool HasSetters => Setters.Length > 0;
 }
 
+// ════════════════════════════════════════════════════════════════════════
+//  Templated (data-driven) hierarchical TreeView
+// ════════════════════════════════════════════════════════════════════════
+
+/// <summary>
+/// Abstract non-generic base for the typed, data-driven <c>TreeView</c>.
+/// Non-generic so the reconciler can match a single type in its switch
+/// expression (same type-erasure pattern as <see cref="TemplatedListElementBase"/>).
+///
+/// <para>This is the hierarchical peer of <see cref="TemplatedListViewElement{T}"/>:
+/// the developer supplies their own data items, a key selector, a children
+/// selector (the hierarchy), and a <c>viewBuilder</c> (<c>data → Element</c>,
+/// the WinUI <c>ItemTemplate</c> equivalent). It exists because WinUI's
+/// node-mode <c>TreeView</c> stringifies <c>TreeViewNode.Content</c> and
+/// cannot host a pre-built <c>UIElement</c> — rich per-node visuals must come
+/// from a template, never an element instance (the root cause of issue #447).</para>
+///
+/// <para>The base exposes object-erased accessors; the generic leaf casts back
+/// to <c>T</c>. Reference-type <c>T</c> flows through the covariant
+/// <see cref="IReadOnlyList{T}"/> → <c>IReadOnlyList&lt;object&gt;</c>
+/// conversion; value-type <c>T</c> is boxed once via the leaf's projection
+/// helper.</para>
+/// </summary>
+public abstract record TemplatedTreeViewElementBase : Element
+{
+    /// <summary>The root data items (object-erased), in document order.</summary>
+    public abstract IReadOnlyList<object> GetRoots();
+    /// <summary>The children of <paramref name="item"/>, or null for a leaf.</summary>
+    public abstract IReadOnlyList<object>? GetChildren(object item);
+    /// <summary>The stable identity string for <paramref name="item"/> (the keyed-diff key).</summary>
+    public abstract string GetKey(object item);
+    /// <summary>Builds the per-node view (the <c>ItemTemplate</c> equivalent).</summary>
+    public abstract Element BuildView(object item);
+    /// <summary>Whether <paramref name="item"/>'s node should start expanded.</summary>
+    public abstract bool GetIsExpanded(object item);
+    /// <summary>Dispatches <c>OnItemInvoked</c> with the developer's own <c>T</c>.</summary>
+    public abstract void InvokeItemInvoked(object item);
+    /// <summary>Dispatches <c>OnExpanding</c> with the developer's own <c>T</c>.</summary>
+    public abstract void InvokeExpanding(object item);
+
+    public abstract TreeViewSelectionMode GetSelectionMode();
+    public abstract bool GetCanDragItems();
+    public abstract bool GetAllowDrop();
+    public abstract bool GetCanReorderItems();
+    public abstract void ApplyControlSetters(object control);
+
+    /// <summary>
+    /// True when programmatic setter actions (.Set(...)) are attached. Used by
+    /// <see cref="Element.OwnPropsEqual"/> to suppress the reconcile-highlight
+    /// short-circuit (same rationale as <see cref="TemplatedListElementBase.HasSetters"/>).
+    /// </summary>
+    internal virtual bool HasSetters => false;
+}
+
+/// <summary>
+/// Typed, data-driven <c>TreeView</c>. The hierarchical peer of
+/// <see cref="TemplatedListViewElement{T}"/>. See
+/// <see cref="TemplatedTreeViewElementBase"/>.
+/// </summary>
+public record TemplatedTreeViewElement<T>(
+    IReadOnlyList<T> Items,
+    Func<T, string> KeySelector,
+    Func<T, IReadOnlyList<T>?> ChildrenSelector,
+    Func<T, Element> ViewBuilder
+) : TemplatedTreeViewElementBase
+{
+    /// <summary>Invoked with the developer's <c>T</c> when a node is clicked/invoked.</summary>
+    public Action<T>? OnItemInvoked { get; init; }
+    /// <summary>Invoked with the developer's <c>T</c> just before a node expands.</summary>
+    public Action<T>? OnExpanding { get; init; }
+    /// <summary>Per-item initial-expansion selector. Defaults to collapsed.</summary>
+    public Func<T, bool>? IsExpanded { get; init; }
+    public TreeViewSelectionMode SelectionMode { get; init; } = TreeViewSelectionMode.Single;
+    public bool CanDragItems { get; init; }
+    public bool AllowDrop { get; init; }
+    public bool CanReorderItems { get; init; }
+    internal Action<WinUI.TreeView>[] Setters { get; init; } = [];
+
+    public override IReadOnlyList<object> GetRoots() => Project(Items);
+    public override IReadOnlyList<object>? GetChildren(object item)
+    {
+        var children = ChildrenSelector((T)item);
+        return children is null ? null : Project(children);
+    }
+    public override string GetKey(object item) => KeySelector((T)item);
+    public override Element BuildView(object item) => ViewBuilder((T)item);
+    public override bool GetIsExpanded(object item) => IsExpanded?.Invoke((T)item) ?? false;
+    public override void InvokeItemInvoked(object item) => OnItemInvoked?.Invoke((T)item);
+    public override void InvokeExpanding(object item) => OnExpanding?.Invoke((T)item);
+
+    public override TreeViewSelectionMode GetSelectionMode() => SelectionMode;
+    public override bool GetCanDragItems() => CanDragItems;
+    public override bool GetAllowDrop() => AllowDrop;
+    public override bool GetCanReorderItems() => CanReorderItems;
+    public override void ApplyControlSetters(object control) =>
+        Reconciler.ApplySetters(Setters, (WinUI.TreeView)control);
+
+    internal override bool HasCallbacks => OnItemInvoked is not null || OnExpanding is not null;
+    internal override bool HasSetters => Setters.Length > 0;
+
+    /// <summary>
+    /// Object-erases the source list. Reference-type <c>T</c> reuses the same
+    /// instance through covariance (no copy); value-type <c>T</c> is boxed into
+    /// a fresh <c>object[]</c>. Identity-stable mapping back to <c>T</c> is via
+    /// <see cref="GetKey"/> (a string), not object reference, so the per-call
+    /// boxing of value types is harmless.
+    /// </summary>
+    private static IReadOnlyList<object> Project(IReadOnlyList<T> source)
+    {
+        if (source is IReadOnlyList<object> covariant) return covariant;
+        var boxed = new object[source.Count];
+        for (int i = 0; i < source.Count; i++) boxed[i] = source[i]!;
+        return boxed;
+    }
+}
+
 // ════════════════════════════════════════════════════════════════════════
 //  Virtualized collection elements (backed by ItemsRepeater)
 // ════════════════════════════════════════════════════════════════════════