From 85760e433980c98bae3713f66afe3efba8423013 Mon Sep 17 00:00:00 2001
From: Oleksandr Liakhevych <liakh.oleksandr32@gmail.com>
Date: Sat, 11 Mar 2023 19:02:11 +0200
Subject: [PATCH 1/3] WIP

---
 .../CollectionView/InfiniteScrollPage.razor   |  23 ++--
 .../Collections/CollectionView/ItemB.razor    |  13 ++
 .../ControlTemplateItemsComponent.cs          |  10 +-
 .../DataTemplateItemsComponent.cs             |  10 +-
 .../DataTemplateSelectorComponent.cs          | 126 ++++++++++++++++++
 .../DataTemplates/InitializedContentView.cs   |  25 ++++
 .../InitializedVerticalStackLayout.cs         |  28 ----
 .../Elements/ItemsView.generated.cs           |   5 +
 .../RenderTreeBuilderHelper.cs                |  19 +++
 .../Elements/IndicatorViewTests.razor         |  12 +-
 .../Templates/DataTemplateSelectorTests.razor |  50 +++++++
 .../Templates/DataTemplateTests.razor         |   2 +-
 .../Extensions/ControlsExtensions.cs          |   8 +-
 13 files changed, 271 insertions(+), 60 deletions(-)
 create mode 100644 samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor
 create mode 100644 src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateSelectorComponent.cs
 create mode 100644 src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedContentView.cs
 delete mode 100644 src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedVerticalStackLayout.cs
 create mode 100644 src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor

diff --git a/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor b/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
index 13f16946..703d8041 100644
--- a/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
+++ b/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
@@ -11,9 +11,14 @@
                 <Label Text="Scroll to load more items." />
             </Header>
 
-            <ItemTemplate>
-                <Item Value="@context" />
-            </ItemTemplate>
+            <ItemTemplateSelector>
+                @if (@context % 7 != 0) {
+                    <Item Value="@context" />
+                }
+                else {
+                    <ItemB Value="@context" />
+                }
+            </ItemTemplateSelector>
 
             <Footer>
                 <ActivityIndicator IsRunning="_loading" />
@@ -26,22 +31,18 @@
     ObservableCollection<int> _intItems = new(Enumerable.Range(1, 20));
     bool _loading;
 
-    async Task RefreshItems()
-    {
+    async Task RefreshItems() {
         await Task.Delay(1000);
         _intItems = new(Enumerable.Range(_intItems.Min() + 5, 20));
     }
 
-    async Task LoadItems()
-    {
-        if (!_loading)
-        {
+    async Task LoadItems() {
+        if (!_loading) {
             _loading = true;
 
             await Task.Delay(1000);
 
-            foreach (var item in Enumerable.Range(_intItems.Max() + 1, 20))
-            {
+            foreach (var item in Enumerable.Range(_intItems.Max() + 1, 20)) {
                 _intItems.Add(item);
             }
 
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor b/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor
new file mode 100644
index 00000000..10e460f4
--- /dev/null
+++ b/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor
@@ -0,0 +1,13 @@
+<Frame BackgroundColor="Colors.Blue"
+       CornerRadius="5"
+       Margin="5" 
+       MinimumHeightRequest="24"
+       MinimumWidthRequest="24"
+       HorizontalOptions="LayoutOptions.Start">
+
+    <Label Text="@Value.ToString()" />
+</Frame>
+
+@code {
+[Parameter] public int Value { get; set; }
+}
diff --git a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/ControlTemplateItemsComponent.cs b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/ControlTemplateItemsComponent.cs
index e3f4c506..86470990 100644
--- a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/ControlTemplateItemsComponent.cs
+++ b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/ControlTemplateItemsComponent.cs
@@ -18,9 +18,9 @@ protected override RenderFragment GetChildContent()
         {
             foreach (var itemRoot in _itemRoots)
             {
-                builder.OpenComponent<InitializedVerticalStackLayout>(1);
+                builder.OpenComponent<InitializedContentView>(1);
 
-                builder.AddAttribute(2, nameof(InitializedVerticalStackLayout.NativeControl), itemRoot);
+                builder.AddAttribute(2, nameof(InitializedContentView.NativeControl), itemRoot);
                 builder.AddAttribute(3, "ChildContent", (RenderFragment)(builder =>
                 {
                     Template.Invoke(builder);
@@ -35,11 +35,11 @@ protected override RenderFragment GetChildContent()
     [Parameter] public Action<T, MC.DataTemplate> SetDataTemplateAction { get; set; }
     [Parameter] public RenderFragment Template { get; set; }
 
-    private readonly List<MC.VerticalStackLayout> _itemRoots = new();
+    private readonly List<MC.ContentView> _itemRoots = new();
 
     private MC.View AddTemplateRoot()
     {
-        var templateRoot = new MC.VerticalStackLayout();
+        var templateRoot = new MC.ContentView();
         _itemRoots.Add(templateRoot);
         StateHasChanged();
 
@@ -67,7 +67,7 @@ void INonPhysicalChild.RemoveFromParent(object parentElement) { }
     void IElementHandler.ApplyAttribute(ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName) { }
     void IMauiContainerElementHandler.AddChild(MC.BindableObject child, int physicalSiblingIndex) { }
     void IMauiContainerElementHandler.RemoveChild(MC.BindableObject child) { }
-    int IMauiContainerElementHandler.GetChildIndex(MC.BindableObject child) => _itemRoots.IndexOf((MC.VerticalStackLayout)child);
+    int IMauiContainerElementHandler.GetChildIndex(MC.BindableObject child) => _itemRoots.IndexOf((MC.ContentView)child);
     MC.BindableObject IMauiElementHandler.ElementControl => null;
     object IElementHandler.TargetElement => null;
 }
diff --git a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateItemsComponent.cs b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateItemsComponent.cs
index ec29c3da..373ce6f8 100644
--- a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateItemsComponent.cs
+++ b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateItemsComponent.cs
@@ -13,9 +13,9 @@ protected override RenderFragment GetChildContent() => builder =>
     {
         foreach (var itemRoot in _itemRoots)
         {
-            builder.OpenComponent<InitializedVerticalStackLayout>(1);
+            builder.OpenComponent<InitializedContentView>(1);
 
-            builder.AddAttribute(2, nameof(InitializedVerticalStackLayout.NativeControl), itemRoot);
+            builder.AddAttribute(2, nameof(InitializedContentView.NativeControl), itemRoot);
             builder.AddAttribute(3, "ChildContent", (RenderFragment)(builder =>
             {
                 builder.OpenComponent<DataTemplateItemComponent<TItem>>(4);
@@ -31,11 +31,11 @@ protected override RenderFragment GetChildContent() => builder =>
     [Parameter] public Action<TControl, MC.DataTemplate> SetDataTemplateAction { get; set; }
     [Parameter] public RenderFragment<TItem> Template { get; set; }
 
-    private readonly List<MC.VerticalStackLayout> _itemRoots = new();
+    private readonly List<MC.ContentView> _itemRoots = new();
 
     public MC.View AddTemplateRoot()
     {
-        var templateRoot = new MC.VerticalStackLayout();
+        var templateRoot = new MC.ContentView();
         _itemRoots.Add(templateRoot);
         StateHasChanged();
         return templateRoot;
@@ -54,6 +54,6 @@ void INonPhysicalChild.RemoveFromParent(object parentElement) { }
     object IElementHandler.TargetElement => null;
     void IMauiContainerElementHandler.AddChild(MC.BindableObject child, int physicalSiblingIndex) { }
     void IMauiContainerElementHandler.RemoveChild(MC.BindableObject child) { }
-    int IMauiContainerElementHandler.GetChildIndex(MC.BindableObject child) => _itemRoots.IndexOf((MC.VerticalStackLayout)child);
+    int IMauiContainerElementHandler.GetChildIndex(MC.BindableObject child) => _itemRoots.IndexOf((MC.ContentView)child);
     void IElementHandler.ApplyAttribute(ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName) { }
 }
diff --git a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateSelectorComponent.cs b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateSelectorComponent.cs
new file mode 100644
index 00000000..be7108e1
--- /dev/null
+++ b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/DataTemplateSelectorComponent.cs
@@ -0,0 +1,126 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.RenderTree;
+using MC = Microsoft.Maui.Controls;
+
+namespace BlazorBindings.Maui.Elements.DataTemplates;
+
+internal class DataTemplateSelectorComponent<TControl, TItem> : NativeControlComponentBase, IMauiContainerElementHandler, INonChildContainerElement
+{
+    protected override RenderFragment GetChildContent() => builder =>
+    {
+        for (var groupIndex = 0; groupIndex < _itemRootsGroups.Count; groupIndex++)
+        {
+            builder.OpenRegion(groupIndex);
+
+            foreach (var itemRoot in _itemRootsGroups[groupIndex])
+            {
+                builder.OpenComponent<InitializedContentView>(1);
+
+                builder.AddAttribute(2, nameof(InitializedContentView.NativeControl), itemRoot);
+                builder.AddAttribute(3, "ChildContent", (RenderFragment)(builder =>
+                {
+                    builder.OpenComponent<DataTemplateItemComponent<TItem>>(4);
+                    builder.AddAttribute(5, nameof(DataTemplateItemComponent<TItem>.ContentView), itemRoot);
+                    builder.AddAttribute(6, nameof(DataTemplateItemComponent<TItem>.Template), TemplateSelector);
+                    builder.CloseComponent();
+                }));
+
+                builder.CloseComponent();
+            }
+
+            builder.CloseRegion();
+        }
+    };
+
+    [Parameter] public Action<TControl, MC.DataTemplateSelector> SetDataTemplateSelectorAction { get; set; }
+    [Parameter] public RenderFragment<TItem> TemplateSelector { get; set; }
+
+    private readonly List<List<MC.ContentView>> _itemRootsGroups = new();
+
+    private MC.View AddTemplateRootToGroup(int groupIndex)
+    {
+        var templateRoot = new MC.ContentView();
+        _itemRootsGroups[groupIndex].Add(templateRoot);
+        StateHasChanged();
+        return templateRoot;
+    }
+
+    private int AddTemplateGroup()
+    {
+        _itemRootsGroups.Add(new List<MC.ContentView>());
+        return _itemRootsGroups.Count - 1;
+    }
+
+    void INonPhysicalChild.SetParent(object parentElement)
+    {
+        var parent = (TControl)parentElement;
+        var dataTemplate = new DataTemplateSelector(TemplateSelector, AddTemplateGroup, AddTemplateRootToGroup);
+        SetDataTemplateSelectorAction(parent, dataTemplate);
+    }
+
+    void INonPhysicalChild.RemoveFromParent(object parentElement) { }
+
+    MC.BindableObject IMauiElementHandler.ElementControl => null;
+    object IElementHandler.TargetElement => null;
+    void IMauiContainerElementHandler.AddChild(MC.BindableObject child, int physicalSiblingIndex) { }
+    void IMauiContainerElementHandler.RemoveChild(MC.BindableObject child) { }
+    int IMauiContainerElementHandler.GetChildIndex(MC.BindableObject child) => -1;
+    void IElementHandler.ApplyAttribute(ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName) { }
+
+    class DataTemplateSelector : MC.DataTemplateSelector
+    {
+        private readonly RenderFragment<TItem> _renderFragment;
+        private readonly Func<int> _addGroupFunc;
+        private readonly Func<int, MC.View> _addRootToGroupFunc;
+        private readonly Dictionary<Type, MC.DataTemplate> _dataTemplates = new();
+
+        public DataTemplateSelector(RenderFragment<TItem> renderFragment, Func<int> addGroupFunc, Func<int, MC.View> addRootToGroupFunc)
+        {
+            _renderFragment = renderFragment;
+            _addGroupFunc = addGroupFunc;
+            _addRootToGroupFunc = addRootToGroupFunc;
+        }
+
+        protected override MC.DataTemplate OnSelectTemplate(object item, MC.BindableObject container)
+        {
+            var componentType = GetComponentType(_renderFragment((TItem)item));
+
+            if (!_dataTemplates.TryGetValue(componentType, out var dataTemplate))
+            {
+                var groupIndex = _addGroupFunc();
+                dataTemplate = new MC.DataTemplate(() => _addRootToGroupFunc(groupIndex));
+                _dataTemplates[componentType] = dataTemplate;
+            }
+
+            return dataTemplate;
+        }
+
+        static readonly RenderTreeBuilder InspectRenderTreeBuilder = new();
+        private static Type GetComponentType(RenderFragment renderFragment)
+        {
+            // Consider reworking if https://github.com/dotnet/aspnetcore/issues/17200 is implemented.
+            try
+            {
+                renderFragment(InspectRenderTreeBuilder);
+                var frames = InspectRenderTreeBuilder.GetFrames();
+
+                for (var i = 0; i < frames.Count; i++)
+                {
+                    if (frames.Array[i].FrameType == RenderTreeFrameType.Component)
+                    {
+                        return frames.Array[i].ComponentType;
+                    }
+                }
+
+                throw new InvalidOperationException("RenderFragment does not contain any components.");
+            }
+            finally
+            {
+                InspectRenderTreeBuilder.Clear();
+            }
+        }
+    }
+}
diff --git a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedContentView.cs b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedContentView.cs
new file mode 100644
index 00000000..43625905
--- /dev/null
+++ b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedContentView.cs
@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+using MC = Microsoft.Maui.Controls;
+
+namespace BlazorBindings.Maui.Elements.DataTemplates;
+
+internal class InitializedContentView : ContentView
+{
+    [Parameter] public new MC.ContentView NativeControl { get; set; }
+
+    protected override MC.ContentView CreateNativeElement() => NativeControl;
+
+    protected override void HandleParameter(string name, object value)
+    {
+        if (name == nameof(NativeControl))
+        {
+            NativeControl = (MC.ContentView)value;
+        }
+        else
+        {
+            base.HandleParameter(name, value);
+        }
+    }
+}
diff --git a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedVerticalStackLayout.cs b/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedVerticalStackLayout.cs
deleted file mode 100644
index cb119b77..00000000
--- a/src/BlazorBindings.Maui/Elements/Internal/DataTemplates/InitializedVerticalStackLayout.cs
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-using MC = Microsoft.Maui.Controls;
-
-namespace BlazorBindings.Maui.Elements.DataTemplates;
-
-internal class InitializedVerticalStackLayout : VerticalStackLayout
-{
-    // ContentView was originally used here.
-    // It was replaced with VerticalStackLayout as a workaround for bug
-    // https://github.com/dotnet/maui/issues/5248.
-    [Parameter] public new MC.VerticalStackLayout NativeControl { get; set; }
-
-    protected override MC.VerticalStackLayout CreateNativeElement() => NativeControl;
-
-    protected override void HandleParameter(string name, object value)
-    {
-        if (name == nameof(NativeControl))
-        {
-            NativeControl = (MC.VerticalStackLayout)value;
-        }
-        else
-        {
-            base.HandleParameter(name, value);
-        }
-    }
-}
diff --git a/src/BlazorBindings.Maui/Elements/ItemsView.generated.cs b/src/BlazorBindings.Maui/Elements/ItemsView.generated.cs
index e43e19ab..053bdde2 100644
--- a/src/BlazorBindings.Maui/Elements/ItemsView.generated.cs
+++ b/src/BlazorBindings.Maui/Elements/ItemsView.generated.cs
@@ -35,6 +35,7 @@ static ItemsView()
         [Parameter] public ScrollBarVisibility? VerticalScrollBarVisibility { get; set; }
         [Parameter] public RenderFragment EmptyView { get; set; }
         [Parameter] public RenderFragment<T> ItemTemplate { get; set; }
+        [Parameter] public RenderFragment<T> ItemTemplateSelector { get; set; }
         [Parameter] public EventCallback<MC.ScrollToRequestEventArgs> OnScrollToRequested { get; set; }
         [Parameter] public EventCallback<MC.ItemsViewScrolledEventArgs> OnScrolled { get; set; }
         [Parameter] public EventCallback OnRemainingItemsThresholdReached { get; set; }
@@ -87,6 +88,9 @@ protected override void HandleParameter(string name, object value)
                 case nameof(ItemTemplate):
                     ItemTemplate = (RenderFragment<T>)value;
                     break;
+                case nameof(ItemTemplateSelector):
+                    ItemTemplateSelector = (RenderFragment<T>)value;
+                    break;
                 case nameof(OnScrollToRequested):
                     if (!Equals(OnScrollToRequested, value))
                     {
@@ -129,6 +133,7 @@ protected override void RenderAdditionalElementContent(RenderTreeBuilder builder
             base.RenderAdditionalElementContent(builder, ref sequence);
             RenderTreeBuilderHelper.AddContentProperty<MC.ItemsView>(builder, sequence++, EmptyView, (x, value) => x.EmptyView = (object)value);
             RenderTreeBuilderHelper.AddDataTemplateProperty<MC.ItemsView, T>(builder, sequence++, ItemTemplate, (x, template) => x.ItemTemplate = template);
+            RenderTreeBuilderHelper.AddDataTemplateSelectorProperty<MC.ItemsView, T>(builder, sequence++, ItemTemplateSelector, (x, template) => x.ItemTemplate = template);
         }
 
         static partial void RegisterAdditionalHandlers();
diff --git a/src/BlazorBindings.Maui/RenderTreeBuilderHelper.cs b/src/BlazorBindings.Maui/RenderTreeBuilderHelper.cs
index c087fa80..f6d3640d 100644
--- a/src/BlazorBindings.Maui/RenderTreeBuilderHelper.cs
+++ b/src/BlazorBindings.Maui/RenderTreeBuilderHelper.cs
@@ -70,6 +70,25 @@ public static void AddDataTemplateProperty<TControl, TItem>(
         }
     }
 
+    public static void AddDataTemplateSelectorProperty<TControl, TItem>(
+        RenderTreeBuilder builder,
+        int sequence,
+        RenderFragment<TItem> template,
+        Action<TControl, MC.DataTemplateSelector> setDataTemplateSelectorAction)
+    {
+        if (template != null)
+        {
+            builder.OpenRegion(sequence);
+
+            builder.OpenComponent<DataTemplateSelectorComponent<TControl, TItem>>(0);
+            builder.AddAttribute(1, nameof(DataTemplateSelectorComponent<TControl, TItem>.SetDataTemplateSelectorAction), setDataTemplateSelectorAction);
+            builder.AddAttribute(2, nameof(DataTemplateSelectorComponent<TControl, TItem>.TemplateSelector), template);
+            builder.CloseComponent();
+
+            builder.CloseRegion();
+        }
+    }
+
     public static void AddDataTemplateProperty<T>(
         RenderTreeBuilder builder,
         int sequence,
diff --git a/src/BlazorBindings.UnitTests/Elements/IndicatorViewTests.razor b/src/BlazorBindings.UnitTests/Elements/IndicatorViewTests.razor
index 4d24f791..b5cb2233 100644
--- a/src/BlazorBindings.UnitTests/Elements/IndicatorViewTests.razor
+++ b/src/BlazorBindings.UnitTests/Elements/IndicatorViewTests.razor
@@ -9,14 +9,14 @@ public async Task SetIndicatorTemplate()
         <IndicatorTemplate>
             <Label Text="x" />
         </IndicatorTemplate>
-    </IndicatorView>
-);
+            </IndicatorView>
+        );
 
-    var children = indicatorView.IndicatorLayout.Children;
-    Assert.That(children.Count, Is.EqualTo(3));
+        var children = indicatorView.IndicatorLayout.Children;
+        Assert.That(children.Count, Is.EqualTo(3));
 
-    var label = (MC.Label)((MC.Layout)children[0]).Children[0];
-    Assert.That(label.Text, Is.EqualTo("x"));
+        var label = children[0].GetTemplateContent<MC.Label>();
+        Assert.That(label.Text, Is.EqualTo("x"));
 }
 
 [Test]
diff --git a/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor
new file mode 100644
index 00000000..8fb23099
--- /dev/null
+++ b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor
@@ -0,0 +1,50 @@
+@using Microsoft.Maui.Controls.Internals;
+
+@inherits ElementTestBase
+
+@code {
+    [Test]
+    public async Task CreateContentFromDataTemplateSelector() {
+        var template = await RenderTemplate<int>(i =>
+    @<Label>@i - @(i == 1 ? "one" : "many")</Label>);
+
+        var label1 = CreateContent<MC.Label>(template, 1);
+        var label2 = CreateContent<MC.Label>(template, 2);
+
+        Assert.That(label1.Text, Is.EqualTo("1 - one"));
+        Assert.That(label2.Text, Is.EqualTo("2 - many"));
+    }
+
+    [Test]
+    public async Task TemplateContentChangesBasedOnBindingContext() {
+        var template = await RenderTemplate<int>(i =>
+    @<Label>@i - @(i == 1 ? "one" : "many")</Label>);
+
+        var templateRoot = CreateTemplateRoot(template, 1);
+        var label = templateRoot.GetTemplateContent<MC.Label>();
+
+        Assert.That(label.Text, Is.EqualTo("1 - one"));
+
+        templateRoot.BindingContext = 2;
+        StateHasChanged();
+
+        Assert.That(label.Text, Is.EqualTo("2 - many"));
+    }
+
+    private async Task<MC.DataTemplateSelector> RenderTemplate<T>(RenderFragment<T> templateFragment) {
+        var collectionView = await Render<MC.CollectionView>(@<CollectionView T="T" ItemTemplateSelector="templateFragment" />);
+        return (MC.DataTemplateSelector)collectionView.ItemTemplate;
+    }
+
+    private MC.BindableObject CreateTemplateRoot(MC.DataTemplateSelector templateSelector, object item) {
+        var template = templateSelector.SelectTemplate(item, null);
+        var content = (MC.BindableObject)template.CreateContent(item, null);
+        content.BindingContext = item;
+        return content;
+    }
+
+    private T CreateContent<T>(MC.DataTemplateSelector templateSelector, object value) where T : MC.View {
+        var templateRoot = CreateTemplateRoot(templateSelector, value);
+        return templateRoot.GetTemplateContent<T>();
+    }
+}
diff --git a/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateTests.razor b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateTests.razor
index a95d2b73..ba2bfa88 100644
--- a/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateTests.razor
+++ b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateTests.razor
@@ -46,7 +46,7 @@ private MC.BindableObject CreateTemplateRoot(MC.DataTemplate template, object it
     return content;
 }
 
-private T CreateContent<T>(MC.DataTemplate template, object value)
+private T CreateContent<T>(MC.DataTemplate template, object value) where T : MC.View
 {
     var templateRoot = CreateTemplateRoot(template, value);
     return templateRoot.GetTemplateContent<T>();
diff --git a/src/BlazorBindings.UnitTests/Extensions/ControlsExtensions.cs b/src/BlazorBindings.UnitTests/Extensions/ControlsExtensions.cs
index ae7d232b..b9698994 100644
--- a/src/BlazorBindings.UnitTests/Extensions/ControlsExtensions.cs
+++ b/src/BlazorBindings.UnitTests/Extensions/ControlsExtensions.cs
@@ -5,14 +5,14 @@ namespace BlazorBindings.UnitTests.Extensions;
 
 public static class ControlsExtensions
 {
-    public static T GetTemplateContent<T>(this TemplatedView view)
+    public static T GetTemplateContent<T>(this TemplatedView view) where T : View
     {
-        return (T)((Layout)view.Children[0]).Children[0];
+        return (T)((ContentView)view.Children[0]).Content;
     }
 
-    public static T GetTemplateContent<T>(this object templateRoot)
+    public static T GetTemplateContent<T>(this object templateRoot) where T : View
     {
-        return (T)((Layout)templateRoot).Children[0];
+        return (T)((ContentView)templateRoot).Content;
     }
 
     public static void RaiseEvent<T>(this BindableObject bindableObject, string eventName, T args)

From e3fd6f544f62f3ee87ea88b3c7f9c0e43952114e Mon Sep 17 00:00:00 2001
From: Oleksandr Liakhevych <liakh.oleksandr32@gmail.com>
Date: Sun, 12 Mar 2023 19:56:05 +0200
Subject: [PATCH 2/3] Update sample

---
 samples/ControlGallery/AppShell.razor         |  9 ++--
 samples/ControlGallery/MauiProgram.cs         |  2 +
 .../DynamicItems/ImageItem.razor              | 12 +++++
 .../CollectionView/DynamicItems/Items.cs      | 26 +++++++++
 .../DynamicItems/TextItem.razor               | 12 +++++
 .../CollectionView/DynamicItemsPage.razor     | 54 +++++++++++++++++++
 .../CollectionView/InfiniteScrollPage.razor   | 11 ++--
 .../Collections/CollectionView/ItemB.razor    | 13 -----
 .../Templates/DataTemplateSelectorTests.razor | 33 ++++++++++--
 9 files changed, 143 insertions(+), 29 deletions(-)
 create mode 100644 samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/ImageItem.razor
 create mode 100644 samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/Items.cs
 create mode 100644 samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/TextItem.razor
 create mode 100644 samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
 delete mode 100644 samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor

diff --git a/samples/ControlGallery/AppShell.razor b/samples/ControlGallery/AppShell.razor
index be5935c0..546c722d 100644
--- a/samples/ControlGallery/AppShell.razor
+++ b/samples/ControlGallery/AppShell.razor
@@ -47,6 +47,7 @@
         <GridLayoutPage />
         <SelectionPage />
         <InfiniteScrollPage />
+        <DynamicItemsPage />
     </ShellSection>
     <PickerPage />
     <TableViewPage />
@@ -84,8 +85,8 @@
 </Shell>
 
 @code {
-Color _backgroundColor;
-Color _foregroundColor;
-Color _unselectedColor;
-Color _tabBarTitleColor;
+    Color _backgroundColor;
+    Color _foregroundColor;
+    Color _unselectedColor;
+    Color _tabBarTitleColor;
 }
\ No newline at end of file
diff --git a/samples/ControlGallery/MauiProgram.cs b/samples/ControlGallery/MauiProgram.cs
index 92d58827..e01ab06a 100644
--- a/samples/ControlGallery/MauiProgram.cs
+++ b/samples/ControlGallery/MauiProgram.cs
@@ -20,6 +20,8 @@ public static MauiApp CreateMauiApp()
                 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
             });
 
+        builder.Services.AddSingleton<IMediaPicker>(MediaPicker.Default);
+
         return builder.Build();
     }
 }
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/ImageItem.razor b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/ImageItem.razor
new file mode 100644
index 00000000..be9b7839
--- /dev/null
+++ b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/ImageItem.razor
@@ -0,0 +1,12 @@
+<Border BackgroundColor="Colors.LightBlue"
+        Margin="8"
+        Padding="8"
+        CornerRadius="4">
+
+    <Image Source="Item.ImageSource" MaximumHeightRequest="400" />
+
+</Border>
+
+@code {
+    [Parameter] public ImageItemModel Item { get; set; }
+}
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/Items.cs b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/Items.cs
new file mode 100644
index 00000000..6ac04368
--- /dev/null
+++ b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/Items.cs
@@ -0,0 +1,26 @@
+namespace ControlGallery.Views.Collections.CollectionView.DynamicItems;
+
+public record ItemModel;
+public record TextItemModel(string Text) : ItemModel;
+public record ImageItemModel(ImageSource ImageSource) : ItemModel;
+
+public static class Items
+{
+    public static ItemModel[] GetItems()
+    {
+        var items = new ItemModel[] {
+            new ImageItemModel("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"),
+            new TextItemModel(".NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that can run on Android, iOS, iPadOS, macOS, and Windows from a single shared codebase."),
+            new ImageItemModel("https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg"),
+            new TextItemModel("ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux."),
+            new ImageItemModel("https://cdn.pixabay.com/photo/2015/06/19/21/24/avenue-815297_960_720.jpg"),
+            new ImageItemModel("https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"),
+            new TextItemModel(".NET is a cross-platform runtime for cloud, mobile, desktop, and IoT apps."),
+            new TextItemModel("Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. ")
+        };
+
+        var repeatedItems = Enumerable.Repeat(items, 100).SelectMany(i => i).ToArray();
+
+        return repeatedItems;
+    }
+}
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/TextItem.razor b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/TextItem.razor
new file mode 100644
index 00000000..8b5a4989
--- /dev/null
+++ b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItems/TextItem.razor
@@ -0,0 +1,12 @@
+<Border BackgroundColor="Colors.LightBlue"
+        Margin="8"
+        Padding="8"
+        CornerRadius="4">
+
+    <Label Text="@Item.Text" />
+
+</Border>
+
+@code {
+    [Parameter] public TextItemModel Item { get; set; }
+}
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
new file mode 100644
index 00000000..d5792e15
--- /dev/null
+++ b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
@@ -0,0 +1,54 @@
+@using System.Collections.ObjectModel;
+@using ControlGallery.Views.Collections.CollectionView.DynamicItems;
+
+<ContentPage Title="Chat">
+    <ToolbarItems>
+        <ToolbarItem Text="Pick" OnClick="SelectPhoto" />
+        <ToolbarItem Text="Capture" OnClick="CapturePhoto" />
+    </ToolbarItems>
+
+
+    <ChildContent>
+        <Grid RowDefinitions="Auto, *">
+            <Entry Grid.Row="0"
+                   @bind-Text="enteredText"
+                   Placeholder="Type something"
+                   OnCompleted="AddText" />
+
+            <CollectionView Grid.Row="1" ItemsSource="items">
+
+                <ItemTemplateSelector>
+                    @if (context is TextItemModel text) {
+                        <TextItem Item="text" />
+                    }
+                    else if (context is ImageItemModel image) {
+                        <ImageItem Item="image" />
+                    }
+                </ItemTemplateSelector>
+
+            </CollectionView>
+        </Grid>
+    </ChildContent>
+</ContentPage>
+
+@code {
+    [Inject] private IMediaPicker MediaPicker { get; set; }
+
+    ObservableCollection<ItemModel> items = new(Items.GetItems());
+    string enteredText;
+
+    async Task SelectPhoto() {
+        var photo = await MediaPicker.PickPhotoAsync();
+        items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
+    }
+
+    async Task CapturePhoto() {
+        var photo = await MediaPicker.CapturePhotoAsync();
+        items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
+    }
+
+    void AddText() {
+        items.Insert(0, new TextItemModel(enteredText));
+        enteredText = "";
+    }
+}
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor b/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
index 703d8041..66f6b9e8 100644
--- a/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
+++ b/samples/ControlGallery/Views/Collections/CollectionView/InfiniteScrollPage.razor
@@ -11,14 +11,9 @@
                 <Label Text="Scroll to load more items." />
             </Header>
 
-            <ItemTemplateSelector>
-                @if (@context % 7 != 0) {
-                    <Item Value="@context" />
-                }
-                else {
-                    <ItemB Value="@context" />
-                }
-            </ItemTemplateSelector>
+            <ItemTemplate>
+                <Item Value="@context" />
+            </ItemTemplate>
 
             <Footer>
                 <ActivityIndicator IsRunning="_loading" />
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor b/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor
deleted file mode 100644
index 10e460f4..00000000
--- a/samples/ControlGallery/Views/Collections/CollectionView/ItemB.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-<Frame BackgroundColor="Colors.Blue"
-       CornerRadius="5"
-       Margin="5" 
-       MinimumHeightRequest="24"
-       MinimumWidthRequest="24"
-       HorizontalOptions="LayoutOptions.Start">
-
-    <Label Text="@Value.ToString()" />
-</Frame>
-
-@code {
-[Parameter] public int Value { get; set; }
-}
diff --git a/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor
index 8fb23099..543c6698 100644
--- a/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor
+++ b/src/BlazorBindings.UnitTests/Elements/Templates/DataTemplateSelectorTests.razor
@@ -5,14 +5,39 @@
 @code {
     [Test]
     public async Task CreateContentFromDataTemplateSelector() {
-        var template = await RenderTemplate<int>(i =>
-    @<Label>@i - @(i == 1 ? "one" : "many")</Label>);
+        var templateSelector = await RenderTemplate<int>(i => i >= 0
+        ? @<Label>@i - @(i == 1 ? "one" : "many")</Label>
+        : @<Border BackgroundColor="Colors.Red">
+        <Label>@i - Negative</Label>
+    </Border>);
 
-        var label1 = CreateContent<MC.Label>(template, 1);
-        var label2 = CreateContent<MC.Label>(template, 2);
+        var label1 = CreateContent<MC.Label>(templateSelector, 1);
+        var label2 = CreateContent<MC.Label>(templateSelector, 2);
+        var borderMinus1 = CreateContent<MC.Border>(templateSelector, -1);
+        var labelMinus1 = (MC.Label)borderMinus1.Content;
 
         Assert.That(label1.Text, Is.EqualTo("1 - one"));
         Assert.That(label2.Text, Is.EqualTo("2 - many"));
+        Assert.That(labelMinus1.Text, Is.EqualTo("-1 - Negative"));
+    }
+
+    [Test]
+    public async Task SelectorShouldCreateSeparateDataTemplatesPerChildComponent() {
+        var templateSelector = await RenderTemplate<int>(i => i >= 0
+        ? @<Label>@i - @(i == 1 ? "one" : "many")</Label>
+        : @<Border BackgroundColor="Colors.Red">
+        <Label>@i - Negative</Label>
+        </Border>
+    );
+
+        var templateA1 = templateSelector.SelectTemplate(1, null);
+        var templateA2 = templateSelector.SelectTemplate(2, null);
+        var templateB1 = templateSelector.SelectTemplate(-1, null);
+        var templateB2 = templateSelector.SelectTemplate(-2, null);
+
+        Assert.That(templateA1, Is.SameAs(templateA2));
+        Assert.That(templateB1, Is.SameAs(templateB2));
+        Assert.That(templateA1, Is.Not.SameAs(templateB1));
     }
 
     [Test]

From 2093c74c82fe3c2f9c2e4a120c173e31aa745b8d Mon Sep 17 00:00:00 2001
From: Oleksandr Liakhevych <liakh.oleksandr32@gmail.com>
Date: Wed, 15 Mar 2023 01:41:42 +0200
Subject: [PATCH 3/3] Update ItemTemplateSelector sample

---
 samples/ControlGallery/ControlGallery.csproj  |  4 ++
 samples/ControlGallery/MauiProgram.cs         |  2 +
 .../Platforms/Android/AndroidManifest.xml     |  5 +-
 .../CollectionView/DynamicItemsPage.razor     | 63 +++++++++++--------
 .../ControlGallery/Views/Shared/FAIcon.razor  | 25 ++++++++
 5 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 samples/ControlGallery/Views/Shared/FAIcon.razor

diff --git a/samples/ControlGallery/ControlGallery.csproj b/samples/ControlGallery/ControlGallery.csproj
index e4baf246..2e0615c7 100644
--- a/samples/ControlGallery/ControlGallery.csproj
+++ b/samples/ControlGallery/ControlGallery.csproj
@@ -45,6 +45,10 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <PackageReference Include="UraniumUI.Icons.FontAwesome" Version="2.3.1" />
+	</ItemGroup>
+
 	<ItemGroup>
 	  <ProjectReference Include="..\..\src\BlazorBindings.Maui.SkiaSharp\BlazorBindings.Maui.SkiaSharp.csproj" />
 	  <ProjectReference Include="..\..\src\BlazorBindings.Maui\BlazorBindings.Maui.csproj" />
diff --git a/samples/ControlGallery/MauiProgram.cs b/samples/ControlGallery/MauiProgram.cs
index e01ab06a..8f9410f5 100644
--- a/samples/ControlGallery/MauiProgram.cs
+++ b/samples/ControlGallery/MauiProgram.cs
@@ -3,6 +3,7 @@
 
 using BlazorBindings.Maui;
 using SkiaSharp.Views.Maui.Controls.Hosting;
+using UraniumUI;
 
 namespace ControlGallery;
 
@@ -18,6 +19,7 @@ public static MauiApp CreateMauiApp()
             .ConfigureFonts(fonts =>
             {
                 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+                fonts.AddFontAwesomeIconFonts();
             });
 
         builder.Services.AddSingleton<IMediaPicker>(MediaPicker.Default);
diff --git a/samples/ControlGallery/Platforms/Android/AndroidManifest.xml b/samples/ControlGallery/Platforms/Android/AndroidManifest.xml
index e9937ad7..2078332f 100644
--- a/samples/ControlGallery/Platforms/Android/AndroidManifest.xml
+++ b/samples/ControlGallery/Platforms/Android/AndroidManifest.xml
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:supportsRtl="true"></application>
 	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.CAMERA" />
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 </manifest>
\ No newline at end of file
diff --git a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
index d5792e15..4be2b3fd 100644
--- a/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
+++ b/samples/ControlGallery/Views/Collections/CollectionView/DynamicItemsPage.razor
@@ -1,34 +1,36 @@
 @using System.Collections.ObjectModel;
 @using ControlGallery.Views.Collections.CollectionView.DynamicItems;
+@using ControlGallery.Views.Shared
+@using UraniumUI.Icons.FontAwesome;
 
-<ContentPage Title="Chat">
-    <ToolbarItems>
-        <ToolbarItem Text="Pick" OnClick="SelectPhoto" />
-        <ToolbarItem Text="Capture" OnClick="CapturePhoto" />
-    </ToolbarItems>
+<ContentPage Title="Dynamic">
+    <Grid RowDefinitions="Auto, *">
+        <Grid Grid.Row="0" ColumnDefinitions="*,Auto,Auto" ColumnSpacing="6" Margin="6">
 
-
-    <ChildContent>
-        <Grid RowDefinitions="Auto, *">
-            <Entry Grid.Row="0"
-                   @bind-Text="enteredText"
+            <Entry Grid.Column="0" @bind-Text="enteredText"
                    Placeholder="Type something"
                    OnCompleted="AddText" />
 
-            <CollectionView Grid.Row="1" ItemsSource="items">
-
-                <ItemTemplateSelector>
-                    @if (context is TextItemModel text) {
-                        <TextItem Item="text" />
-                    }
-                    else if (context is ImageItemModel image) {
-                        <ImageItem Item="image" />
-                    }
-                </ItemTemplateSelector>
+            <FAIcon Grid.Column="1" Glyph="@Solid.Camera" OnTap="CapturePhoto" Color="Colors.LightBlue" />
+            <FAIcon Grid.Column="2" Glyph="@Solid.Images" OnTap="SelectPhoto" Color="Colors.LightBlue" />
 
-            </CollectionView>
         </Grid>
-    </ChildContent>
+
+        <CollectionView Grid.Row="1" ItemsSource="items">
+
+            <ItemTemplateSelector>
+                @if (context is TextItemModel text)
+                {
+                    <TextItem Item="text" />
+                }
+                else if (context is ImageItemModel image)
+                {
+                    <ImageItem Item="image" />
+                }
+            </ItemTemplateSelector>
+
+        </CollectionView>
+    </Grid>
 </ContentPage>
 
 @code {
@@ -37,17 +39,24 @@
     ObservableCollection<ItemModel> items = new(Items.GetItems());
     string enteredText;
 
-    async Task SelectPhoto() {
+    async Task SelectPhoto()
+    {
         var photo = await MediaPicker.PickPhotoAsync();
-        items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
+
+        if (photo != null)
+            items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
     }
 
-    async Task CapturePhoto() {
+    async Task CapturePhoto()
+    {
         var photo = await MediaPicker.CapturePhotoAsync();
-        items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
+
+        if (photo != null)
+            items.Insert(0, new ImageItemModel(ImageSource.FromFile(photo.FullPath)));
     }
 
-    void AddText() {
+    void AddText()
+    {
         items.Insert(0, new TextItemModel(enteredText));
         enteredText = "";
     }
diff --git a/samples/ControlGallery/Views/Shared/FAIcon.razor b/samples/ControlGallery/Views/Shared/FAIcon.razor
new file mode 100644
index 00000000..e6b88dab
--- /dev/null
+++ b/samples/ControlGallery/Views/Shared/FAIcon.razor
@@ -0,0 +1,25 @@
+@using UraniumUI.Icons.FontAwesome;
+<Image Source="fontImageSource" OnTap="OnTap" @attributes="Attributes" />
+
+@code {
+    [Parameter] public Color Color { get; set; }
+    [Parameter] public double? Size { get; set; }
+    [Parameter] public string Glyph { get; set; }
+    [Parameter] public EventCallback<TappedEventArgs> OnTap { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> Attributes { get; set; }
+
+    FontImageSource fontImageSource = new() { FontFamily = "FASolid" };
+
+    protected override void OnParametersSet()
+    {
+        fontImageSource.Glyph = Glyph;
+
+        if (Color != null)
+            fontImageSource.Color = Color;
+
+        if (Size != null)
+            fontImageSource.Size = Size.Value;
+    }
+}