From 2fce5062dbffdecb171f3e35cc3d63c846f0588f Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Mon, 13 May 2024 18:43:25 +0200
Subject: [PATCH 01/11] cleaned up to simplify

---
 samples/Gallery/Pages/GesturesPage.fs           | 3 ---
 samples/Gallery/Pages/Pointers/PointersPage.fs  | 6 ------
 samples/Gallery/Pages/PopupPage.fs              | 2 --
 samples/Gallery/Pages/TreeDataGrid/FilesPage.fs | 6 +-----
 4 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/samples/Gallery/Pages/GesturesPage.fs b/samples/Gallery/Pages/GesturesPage.fs
index f3c5ed48..03c3d78b 100644
--- a/samples/Gallery/Pages/GesturesPage.fs
+++ b/samples/Gallery/Pages/GesturesPage.fs
@@ -17,8 +17,6 @@ module GesturesPage =
 
     let init () = { CurrentScale = 0 }, Cmd.none
 
-    let topBallBorderRef = ViewRef<Border>()
-
     let update msg model =
         match msg with
         | Reset -> model, Cmd.none
@@ -61,7 +59,6 @@ module GesturesPage =
                             .dock(Dock.Top)
                             .margin(2.)
                             .name("TopPullZone")
-                            .reference(topBallBorderRef)
                             .background(SolidColorBrush(Colors.Transparent))
                             .borderBrush(SolidColorBrush(Colors.Red))
                             .horizontalAlignment(HorizontalAlignment.Stretch)
diff --git a/samples/Gallery/Pages/Pointers/PointersPage.fs b/samples/Gallery/Pages/Pointers/PointersPage.fs
index 535475db..979b467c 100644
--- a/samples/Gallery/Pages/Pointers/PointersPage.fs
+++ b/samples/Gallery/Pages/Pointers/PointersPage.fs
@@ -25,18 +25,12 @@ module PointersPage =
         | Border_PointerCaptureLost of PointerCaptureLostEventArgs
         | Border_PointerUpdated of PointerEventArgs
 
-    let pointerCanvasRef = ViewRef<PointerCanvas>()
-
     let init () =
         { ThreadSleep = 0
           Status = ""
           Status2 = "" },
         Cmd.none
 
-    let border1 = ViewRef<Border>()
-
-    let border2 = ViewRef<Border>()
-
     let update msg model =
         match msg with
         | ThreadSleepSliderChanged v -> { model with ThreadSleep = int v }, Cmd.none
diff --git a/samples/Gallery/Pages/PopupPage.fs b/samples/Gallery/Pages/PopupPage.fs
index f91fecc4..167dc0dc 100644
--- a/samples/Gallery/Pages/PopupPage.fs
+++ b/samples/Gallery/Pages/PopupPage.fs
@@ -26,8 +26,6 @@ module PopupPage =
         | OnOpened -> model, Cmd.none
         | OnClosed -> model, Cmd.none
 
-    let buttonRef = ViewRef<Button>()
-
     let program =
         Program.statefulWithCmd init update
         |> Program.withTrace(fun (format, args) -> Debug.WriteLine(format, box args))
diff --git a/samples/Gallery/Pages/TreeDataGrid/FilesPage.fs b/samples/Gallery/Pages/TreeDataGrid/FilesPage.fs
index 247789f4..3682efb5 100644
--- a/samples/Gallery/Pages/TreeDataGrid/FilesPage.fs
+++ b/samples/Gallery/Pages/TreeDataGrid/FilesPage.fs
@@ -28,8 +28,6 @@ module FilesPage =
         | SelectedPathKeyDown of Avalonia.Input.KeyEventArgs
         | CellSelectionChanged of bool
 
-    let files = ViewRef<TreeDataGrid>()
-
     let init () =
         let drives = DriveInfo.GetDrives() |> Array.map(fun x -> x.Name) |> Array.toList
 
@@ -220,8 +218,6 @@ module FilesPage =
                     .dock(Dock.Top)
                     .margin(0, 4)
 
-                TreeDataGrid(model.Source)
-                    .reference(files)
-                    .autoDragDropRows(true)
+                TreeDataGrid(model.Source).autoDragDropRows(true)
             }
         }

From 594ab2799b47fa92642c5a6010b9766d9e0ac034 Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Tue, 14 May 2024 01:07:23 +0200
Subject: [PATCH 02/11] using rename-safe reference extension instead of name

---
 samples/Gallery/Pages/TreeDataGrid/CountriesPage.fs | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/samples/Gallery/Pages/TreeDataGrid/CountriesPage.fs b/samples/Gallery/Pages/TreeDataGrid/CountriesPage.fs
index 26a62704..8177caee 100644
--- a/samples/Gallery/Pages/TreeDataGrid/CountriesPage.fs
+++ b/samples/Gallery/Pages/TreeDataGrid/CountriesPage.fs
@@ -393,25 +393,26 @@ module CountriesPage =
                     Label("_Country").target(countryTextBox)
 
                     TextBox(model.CountryText, CountryTextChanged)
-                        .name("countryTextBox")
+                        .reference(countryTextBox)
 
                     Label("_Region").target(regionTextBox)
 
                     TextBox(model.RegionText, RegionTextChanged)
-                        .name("regionTextBox")
+                        .reference(regionTextBox)
 
                     Label("_Population").target(populationTextBox)
 
                     TextBox(model.PopulationText, PopulationTextChanged)
-                        .name("populationTextBox")
+                        .reference(populationTextBox)
 
                     Label("_Area").target(areaTextBox)
 
-                    TextBox(model.AreaText, AreaTextChanged).name("areaTextBox")
+                    TextBox(model.AreaText, AreaTextChanged)
+                        .reference(areaTextBox)
 
                     Label("_GDP").target(gdpTextBox)
 
-                    TextBox(model.GDPText, GDPTextChanged).name("gdpTextBox")
+                    TextBox(model.GDPText, GDPTextChanged).reference(gdpTextBox)
 
                     Button("Add", AddCountryClick)
 

From 6b551aaffd73562ec11b0de34528701f31fa5135 Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Mon, 13 May 2024 21:47:07 +0200
Subject: [PATCH 03/11] renamed to avoid confusion

---
 .../Fabulous.Avalonia.ItemsRepeater/ItemsRepeater.fs   | 10 +++++-----
 src/Fabulous.Avalonia/Views/ItemsControl.fs            | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/extensions/Fabulous.Avalonia.ItemsRepeater/ItemsRepeater.fs b/extensions/Fabulous.Avalonia.ItemsRepeater/ItemsRepeater.fs
index 1f049228..c538e5d6 100644
--- a/extensions/Fabulous.Avalonia.ItemsRepeater/ItemsRepeater.fs
+++ b/extensions/Fabulous.Avalonia.ItemsRepeater/ItemsRepeater.fs
@@ -17,17 +17,17 @@ module ItemsRepeater =
             "ItemsRepeater_ItemsSource"
             (fun a b -> ScalarAttributeComparers.equalityCompare a.OriginalItems b.OriginalItems)
             (fun _ newValueOpt node ->
-                let dataGrid = node.Target :?> ItemsRepeater
+                let repeater = node.Target :?> ItemsRepeater
 
                 match newValueOpt with
                 | ValueNone ->
-                    dataGrid.ClearValue(ItemsRepeater.ItemTemplateProperty)
-                    dataGrid.ClearValue(ItemsRepeater.ItemsSourceProperty)
+                    repeater.ClearValue(ItemsRepeater.ItemTemplateProperty)
+                    repeater.ClearValue(ItemsRepeater.ItemsSourceProperty)
                 | ValueSome value ->
-                    dataGrid.SetValue(ItemsRepeater.ItemTemplateProperty, WidgetDataTemplate(node, unbox >> value.Template))
+                    repeater.SetValue(ItemsRepeater.ItemTemplateProperty, WidgetDataTemplate(node, unbox >> value.Template))
                     |> ignore
 
-                    dataGrid.SetValue(ItemsRepeater.ItemsSourceProperty, value.OriginalItems))
+                    repeater.SetValue(ItemsRepeater.ItemsSourceProperty, value.OriginalItems))
 
     let HorizontalCacheLength =
         Attributes.defineAvaloniaPropertyWithEquality ItemsRepeater.HorizontalCacheLengthProperty
diff --git a/src/Fabulous.Avalonia/Views/ItemsControl.fs b/src/Fabulous.Avalonia/Views/ItemsControl.fs
index 82d24d0c..f95f9f72 100644
--- a/src/Fabulous.Avalonia/Views/ItemsControl.fs
+++ b/src/Fabulous.Avalonia/Views/ItemsControl.fs
@@ -26,17 +26,17 @@ module ItemsControl =
             "ItemsControl_ItemsSource"
             (fun a b -> ScalarAttributeComparers.equalityCompare a.OriginalItems b.OriginalItems)
             (fun _ newValueOpt node ->
-                let listBox = node.Target :?> ItemsControl
+                let itmsCtrl = node.Target :?> ItemsControl
 
                 match newValueOpt with
                 | ValueNone ->
-                    listBox.ClearValue(ItemsControl.ItemTemplateProperty)
-                    listBox.ClearValue(ItemsControl.ItemsSourceProperty)
+                    itmsCtrl.ClearValue(ItemsControl.ItemTemplateProperty)
+                    itmsCtrl.ClearValue(ItemsControl.ItemsSourceProperty)
                 | ValueSome value ->
-                    listBox.SetValue(ItemsControl.ItemTemplateProperty, WidgetDataTemplate(node, unbox >> value.Template))
+                    itmsCtrl.SetValue(ItemsControl.ItemTemplateProperty, WidgetDataTemplate(node, unbox >> value.Template))
                     |> ignore
 
-                    listBox.SetValue(ItemsControl.ItemsSourceProperty, value.OriginalItems)
+                    itmsCtrl.SetValue(ItemsControl.ItemsSourceProperty, value.OriginalItems)
                     |> ignore)
 
     let ItemsPanel =

From 9abadbdfa436ecdc444977d839c6d98bf0eb6f25 Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Mon, 13 May 2024 21:48:00 +0200
Subject: [PATCH 04/11] added AutoCompleteBox builder overloads and samples for
 setting ItemTemplate

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs  | 43 ++++++++++++++++++-
 .../Views/Controls/AutoCompleteBox.fs         | 38 ++++++++++++++++
 src/Fabulous.Avalonia/Widgets.fs              | 11 ++---
 3 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index 6f2426ab..17055a51 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -6,6 +6,7 @@ open System.Threading
 open System.Threading.Tasks
 open Avalonia.Controls
 open Avalonia.Interactivity
+open Avalonia.Media
 open Fabulous
 open Fabulous.Avalonia
 
@@ -209,6 +210,9 @@ module AutoCompleteBoxPage =
             Abbreviation = "WY"
             Capital = "Cheyenne" } ]
 
+    let contains (text: string) (term: string) =
+        text.Contains(term, StringComparison.InvariantCultureIgnoreCase)
+
     /// allows searching US federal states asynchronously while cancelling running searches
     /// to ensure we only populate with the response of the latest request
     type UsFederalStateSearch() =
@@ -246,8 +250,6 @@ module AutoCompleteBoxPage =
                 if running.IsCancellationRequested then
                     return Seq.empty
                 else
-                    let contains (text: string) (term: string) =
-                        text.Contains(term, StringComparison.InvariantCultureIgnoreCase)
 
                     return
                         usFederalStates
@@ -437,6 +439,26 @@ module AutoCompleteBoxPage =
                             .multiBindValue("{0} ({1})", nameof stateData.Name, nameof stateData.Abbreviation)
                     }
 
+                    VStack() {
+                        TextBlock("With an item template")
+                            .tip(ToolTip("Somewhere, in pride, an eagle sheds\nA single splendid tear."))
+
+                        AutoCompleteBox(
+                            model.UsFederalStates,
+                            fun state ->
+                                HStack(5) {
+                                    TextBlock(state.Capital).foreground(Colors.Blue)
+                                    TextBlock(state.Abbreviation + ",").foreground(Colors.White)
+                                    TextBlock(state.Name).foreground(Colors.Red)
+                                }
+                        )
+                            .watermark("Search a US state or capital")
+                            .tip(ToolTip("the custom item filter searches the state name as well as the capital"))
+                            .itemFilter(fun term item ->
+                                let state = item :?> StateData
+                                contains state.Name term || contains state.Capital term)
+                    }
+
                     VStack() {
                         TextBlock("AsyncBox")
 
@@ -456,6 +478,23 @@ module AutoCompleteBoxPage =
                             .multiBindValue("{2}, {1} ({0})", nameof stateData.Name, nameof stateData.Abbreviation, nameof stateData.Capital)
                     }
 
+                    VStack() {
+                        TextBlock("Async remote-filtered w/ item template")
+
+                        AutoCompleteBox(
+                            model.UsStateSearch.SearchAsync,
+                            fun state ->
+                                HStack(5) {
+                                    TextBlock(state.Capital).foreground(Colors.Blue)
+                                    TextBlock(state.Abbreviation + ",").foreground(Colors.White)
+                                    TextBlock(state.Name).foreground(Colors.Red)
+                                }
+                        )
+                            .watermark("Search capitals of US federal states by name or state")
+                            .minimumPopulateDelay(TimeSpan.FromMilliseconds 300) // debounce the requests
+                            .filterMode(AutoCompleteFilterMode.None) // remote filtered
+                    }
+
                     VStack() {
                         TextBlock("Custom AutoComplete")
 
diff --git a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
index d508b8fe..1a830795 100644
--- a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
+++ b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
@@ -80,6 +80,24 @@ module AutoCompleteBox =
 
                     target.Loaded.AddHandler(bindAndCleanUp))
 
+    /// Allows setting the ItemTemplate on an AutoCompleteBox
+    let ItemTemplate =
+        Attributes.defineSimpleScalar<obj -> Widget>
+            "AutoCompleteBox_ItemTemplate"
+            (fun a b ->
+                if LanguagePrimitives.PhysicalEquality a b then
+                    ScalarAttributeComparison.Identical
+                else
+                    ScalarAttributeComparison.Different)
+            (fun _ newValueOpt node ->
+                let autoComplete = node.Target :?> AutoCompleteBox
+
+                match newValueOpt with
+                | ValueNone -> autoComplete.ClearValue(AutoCompleteBox.ItemTemplateProperty)
+                | ValueSome template ->
+                    autoComplete.SetValue(AutoCompleteBox.ItemTemplateProperty, WidgetDataTemplate(node, template))
+                    |> ignore)
+
 [<AutoOpen>]
 module AutoCompleteBoxBuilders =
     type Fabulous.Avalonia.View with
@@ -89,11 +107,31 @@ module AutoCompleteBoxBuilders =
         static member inline AutoCompleteBox(items: seq<_>) =
             WidgetBuilder<'msg, IFabAutoCompleteBox>(AutoCompleteBox.WidgetKey, AutoCompleteBox.ItemsSource.WithValue(items))
 
+        /// <summary>Creates an AutoCompleteBox widget.</summary>
+        /// <param name="items">The items to display.</param>
+        /// <param name="itemTemplate">The template to render the items with.</param>
+        static member inline AutoCompleteBox(items: 'item seq, itemTemplate: 'item -> WidgetBuilder<'msg, 'widget>) =
+            WidgetBuilder<'msg, IFabAutoCompleteBox>(
+                AutoCompleteBox.WidgetKey,
+                AutoCompleteBox.ItemsSource.WithValue(items),
+                AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate itemTemplate)
+            )
+
         /// <summary>Creates an AutoCompleteBox widget.</summary>
         /// <param name="populator">The function to populate the items.</param>
         static member inline AutoCompleteBox(populator: string -> CancellationToken -> Task<seq<_>>) =
             WidgetBuilder<'msg, IFabAutoCompleteBox>(AutoCompleteBox.WidgetKey, AutoCompleteBox.AsyncPopulator.WithValue(populator))
 
+        /// <summary>Creates an AutoCompleteBox widget.</summary>
+        /// <param name="populator">The function to populate the items.</param>
+        /// <param name="itemTemplate">The template to render the items with.</param>
+        static member inline AutoCompleteBox(populator: string -> CancellationToken -> Task<seq<_>>, itemTemplate: 'item -> WidgetBuilder<'msg, 'widget>) =
+            WidgetBuilder<'msg, IFabAutoCompleteBox>(
+                AutoCompleteBox.WidgetKey,
+                AutoCompleteBox.AsyncPopulator.WithValue(populator),
+                AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate itemTemplate)
+            )
+
 type AutoCompleteBoxModifiers =
     /// <summary>Sets the MinimumPrefixLength property.</summary>
     /// <param name="this">Current widget.</param>
diff --git a/src/Fabulous.Avalonia/Widgets.fs b/src/Fabulous.Avalonia/Widgets.fs
index 9feba01d..cec9f8a6 100644
--- a/src/Fabulous.Avalonia/Widgets.fs
+++ b/src/Fabulous.Avalonia/Widgets.fs
@@ -77,6 +77,11 @@ module Widgets =
     let register<'T when WidgetOps<'T>> () = registerWithFactory(fun () -> new 'T())
 
 module WidgetHelpers =
+    /// Compiles the templateBuilder into a template.
+    let compileTemplate (templateBuilder: 'item -> WidgetBuilder<'msg, 'widget>) item =
+        let itm = unbox<'item> item
+        (templateBuilder itm).Compile()
+
     /// Creates a widget with the given key and attributes.
     let buildItems<'msg, 'marker, 'itemData, 'itemMarker>
         key
@@ -84,13 +89,9 @@ module WidgetHelpers =
         (items: seq<'itemData>)
         (itemTemplate: 'itemData -> WidgetBuilder<'msg, 'itemMarker>)
         =
-        let template (item: obj) =
-            let item = unbox<'itemData> item
-            (itemTemplate item).Compile()
-
         let data: WidgetItems =
             { OriginalItems = items
-              Template = template }
+              Template = compileTemplate itemTemplate }
 
         WidgetBuilder<'msg, 'marker>(key, attrDef.WithValue(data))
 

From 8bb4112c1da006688a3108563fdfd8a5d5b927be Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Tue, 14 May 2024 22:17:53 +0200
Subject: [PATCH 05/11] replacing constructors with extension and removed
 redundant example

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs  | 25 +++--------------
 .../Views/Controls/AutoCompleteBox.fs         | 27 +++++--------------
 2 files changed, 10 insertions(+), 42 deletions(-)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index 17055a51..f2d082d0 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -443,15 +443,13 @@ module AutoCompleteBoxPage =
                         TextBlock("With an item template")
                             .tip(ToolTip("Somewhere, in pride, an eagle sheds\nA single splendid tear."))
 
-                        AutoCompleteBox(
-                            model.UsFederalStates,
-                            fun state ->
+                        AutoCompleteBox(model.UsFederalStates)
+                            .itemTemplate(fun state ->
                                 HStack(5) {
                                     TextBlock(state.Capital).foreground(Colors.Blue)
                                     TextBlock(state.Abbreviation + ",").foreground(Colors.White)
                                     TextBlock(state.Name).foreground(Colors.Red)
-                                }
-                        )
+                                })
                             .watermark("Search a US state or capital")
                             .tip(ToolTip("the custom item filter searches the state name as well as the capital"))
                             .itemFilter(fun term item ->
@@ -478,23 +476,6 @@ module AutoCompleteBoxPage =
                             .multiBindValue("{2}, {1} ({0})", nameof stateData.Name, nameof stateData.Abbreviation, nameof stateData.Capital)
                     }
 
-                    VStack() {
-                        TextBlock("Async remote-filtered w/ item template")
-
-                        AutoCompleteBox(
-                            model.UsStateSearch.SearchAsync,
-                            fun state ->
-                                HStack(5) {
-                                    TextBlock(state.Capital).foreground(Colors.Blue)
-                                    TextBlock(state.Abbreviation + ",").foreground(Colors.White)
-                                    TextBlock(state.Name).foreground(Colors.Red)
-                                }
-                        )
-                            .watermark("Search capitals of US federal states by name or state")
-                            .minimumPopulateDelay(TimeSpan.FromMilliseconds 300) // debounce the requests
-                            .filterMode(AutoCompleteFilterMode.None) // remote filtered
-                    }
-
                     VStack() {
                         TextBlock("Custom AutoComplete")
 
diff --git a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
index 1a830795..d5f2faf7 100644
--- a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
+++ b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
@@ -107,31 +107,11 @@ module AutoCompleteBoxBuilders =
         static member inline AutoCompleteBox(items: seq<_>) =
             WidgetBuilder<'msg, IFabAutoCompleteBox>(AutoCompleteBox.WidgetKey, AutoCompleteBox.ItemsSource.WithValue(items))
 
-        /// <summary>Creates an AutoCompleteBox widget.</summary>
-        /// <param name="items">The items to display.</param>
-        /// <param name="itemTemplate">The template to render the items with.</param>
-        static member inline AutoCompleteBox(items: 'item seq, itemTemplate: 'item -> WidgetBuilder<'msg, 'widget>) =
-            WidgetBuilder<'msg, IFabAutoCompleteBox>(
-                AutoCompleteBox.WidgetKey,
-                AutoCompleteBox.ItemsSource.WithValue(items),
-                AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate itemTemplate)
-            )
-
         /// <summary>Creates an AutoCompleteBox widget.</summary>
         /// <param name="populator">The function to populate the items.</param>
         static member inline AutoCompleteBox(populator: string -> CancellationToken -> Task<seq<_>>) =
             WidgetBuilder<'msg, IFabAutoCompleteBox>(AutoCompleteBox.WidgetKey, AutoCompleteBox.AsyncPopulator.WithValue(populator))
 
-        /// <summary>Creates an AutoCompleteBox widget.</summary>
-        /// <param name="populator">The function to populate the items.</param>
-        /// <param name="itemTemplate">The template to render the items with.</param>
-        static member inline AutoCompleteBox(populator: string -> CancellationToken -> Task<seq<_>>, itemTemplate: 'item -> WidgetBuilder<'msg, 'widget>) =
-            WidgetBuilder<'msg, IFabAutoCompleteBox>(
-                AutoCompleteBox.WidgetKey,
-                AutoCompleteBox.AsyncPopulator.WithValue(populator),
-                AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate itemTemplate)
-            )
-
 type AutoCompleteBoxModifiers =
     /// <summary>Sets the MinimumPrefixLength property.</summary>
     /// <param name="this">Current widget.</param>
@@ -182,6 +162,13 @@ type AutoCompleteBoxModifiers =
     static member inline itemFilter(this: WidgetBuilder<'msg, #IFabAutoCompleteBox>, fn: string -> obj -> bool) =
         this.AddScalar(AutoCompleteBox.ItemFilter.WithValue(fn))
 
+    /// <summary>Sets the ItemTemplate property.</summary>
+    /// <param name="this">Current widget.</param>
+    /// <param name="template">The template to render the items with.</param>
+    [<Extension>]
+    static member inline itemTemplate(this: WidgetBuilder<'msg, #IFabAutoCompleteBox>, template: 'item -> WidgetBuilder<'msg, 'widget>) =
+        this.AddScalar(AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate template))
+
     /// <summary>Sets the TextFilter property.</summary>
     /// <param name="this">Current widget.</param>
     /// <param name="value">The TextFilter value.</param>

From 34c7628294cbc04eb56a99cfa48f3e2b3a82c8a2 Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Thu, 16 May 2024 23:47:26 +0200
Subject: [PATCH 06/11] extracted work simulation from remote search for
 clarity

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs | 25 +++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index f2d082d0..2f9e707c 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -224,18 +224,8 @@ module AutoCompleteBoxPage =
                 running.Cancel()
                 running.Dispose()
 
-        member this.SearchAsync (term: string) (cancellation: CancellationToken) : Task<obj seq> =
+        let simulateWork () =
             task {
-                // register cancellation of running search when outer cancellation is requested
-                cancellation.Register(fun () ->
-                    cancelRunning()
-                    running <- null)
-                |> ignore
-
-                cancelRunning() // cancel any older running search
-                running <- new CancellationTokenSource() // and create a new source for this one
-
-                // simulate a really sporadic remote search
                 let randy = Random()
                 let getDelay () = randy.Next(300, 3000)
                 let mutable delay = getDelay()
@@ -246,6 +236,19 @@ module AutoCompleteBoxPage =
                     delay <- getDelay()
 
                 do! Task.Delay(delay) // guarantee to wait a little bit
+            }
+
+        member this.SearchAsync (term: string) (cancellation: CancellationToken) : Task<obj seq> =
+            task {
+                // register cancellation of running search when outer cancellation is requested
+                cancellation.Register(fun () ->
+                    cancelRunning()
+                    running <- null)
+                |> ignore
+
+                cancelRunning() // cancel any older running search
+                running <- new CancellationTokenSource() // and create a new source for this one
+                do! simulateWork() // simulate a really sporadic remote search
 
                 if running.IsCancellationRequested then
                     return Seq.empty

From 9b35e01f10525833705266e559bf4b5d98145e7e Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Thu, 16 May 2024 23:49:49 +0200
Subject: [PATCH 07/11] renamed to shorten

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index 2f9e707c..066f3fb0 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -219,7 +219,7 @@ module AutoCompleteBoxPage =
         let mutable running: CancellationTokenSource = null // enables cancelling any running search
 
         /// cancels any running search
-        let cancelRunning () =
+        let cancel () =
             if running <> null then
                 running.Cancel()
                 running.Dispose()
@@ -242,11 +242,11 @@ module AutoCompleteBoxPage =
             task {
                 // register cancellation of running search when outer cancellation is requested
                 cancellation.Register(fun () ->
-                    cancelRunning()
+                    cancel()
                     running <- null)
                 |> ignore
 
-                cancelRunning() // cancel any older running search
+                cancel() // cancel any older running search
                 running <- new CancellationTokenSource() // and create a new source for this one
                 do! simulateWork() // simulate a really sporadic remote search
 

From 36cf4c7a5c1f23eda4cb11ac950522bc1aa610fa Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Thu, 16 May 2024 23:06:18 +0200
Subject: [PATCH 08/11] animating remote search to indicate activity

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs | 44 +++++++++++++++-----
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index 066f3fb0..64ac6a5e 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -4,6 +4,7 @@ open System
 open System.Diagnostics
 open System.Threading
 open System.Threading.Tasks
+open Avalonia.Animation
 open Avalonia.Controls
 open Avalonia.Interactivity
 open Avalonia.Media
@@ -215,14 +216,17 @@ module AutoCompleteBoxPage =
 
     /// allows searching US federal states asynchronously while cancelling running searches
     /// to ensure we only populate with the response of the latest request
-    type UsFederalStateSearch() =
+    type UsFederalStateSearch(animateActiveInput) =
         let mutable running: CancellationTokenSource = null // enables cancelling any running search
 
+        let isRunning () = running <> null
+
         /// cancels any running search
         let cancel () =
-            if running <> null then
+            if isRunning() then
                 running.Cancel()
                 running.Dispose()
+                running <- null
 
         let simulateWork () =
             task {
@@ -240,19 +244,17 @@ module AutoCompleteBoxPage =
 
         member this.SearchAsync (term: string) (cancellation: CancellationToken) : Task<obj seq> =
             task {
-                // register cancellation of running search when outer cancellation is requested
-                cancellation.Register(fun () ->
-                    cancel()
-                    running <- null)
-                |> ignore
-
+                cancellation.Register(cancel) |> ignore // register cancellation of running search when outer cancellation is requested
                 cancel() // cancel any older running search
                 running <- new CancellationTokenSource() // and create a new source for this one
+                animateActiveInput(running.Token) // pass running search token to stop it when the search completes or is canceled
                 do! simulateWork() // simulate a really sporadic remote search
 
-                if running.IsCancellationRequested then
+                if isRunning() |> not || running.IsCancellationRequested then
+                    cancel() // to stop animation
                     return Seq.empty
                 else
+                    cancel() // to stop animation
 
                     return
                         usFederalStates
@@ -260,6 +262,16 @@ module AutoCompleteBoxPage =
                         |> Seq.cast<obj>
             }
 
+    /// helps animating an active remote search AutoCompleteBox
+    module RemoteSearch =
+        let input = ViewRef<AutoCompleteBox>()
+        let heartBeat = ViewRef<Animation>()
+
+        /// animates the input with the heartBeat until searchToken is cancelled
+        let animate searchToken =
+            heartBeat.Value.IterationCount <- IterationCount.Infinite
+            heartBeat.Value.RunAsync(input.Value, searchToken) |> ignore
+
     type Model =
         { IsOpen: bool
           SelectedItem: string
@@ -281,7 +293,7 @@ module AutoCompleteBoxPage =
         { IsOpen = false
           Text = "Arkan"
           AsyncSearchTerm = ""
-          UsStateSearch = UsFederalStateSearch()
+          UsStateSearch = UsFederalStateSearch(RemoteSearch.animate)
           SelectedItem = "Item 2"
           Items = [ "Item 1"; "Item 2"; "Item 3"; "Product 1"; "Product 2"; "Product 3" ]
           UsFederalStates = usFederalStates
@@ -477,6 +489,18 @@ module AutoCompleteBoxPage =
                             .onTextChanged(model.AsyncSearchTerm, AsyncSearchTermChanged)
                             .filterMode(AutoCompleteFilterMode.None) // remote filtered
                             .multiBindValue("{2}, {1} ({0})", nameof stateData.Name, nameof stateData.Abbreviation, nameof stateData.Capital)
+                            .reference(RemoteSearch.input)
+                            .animation(
+                                (Animation(TimeSpan.FromSeconds(2.)) {
+                                    KeyFrame(ScaleTransform.ScaleXProperty, 1.05).cue(0.1)
+                                    KeyFrame(ScaleTransform.ScaleYProperty, 1.05).cue(0.1)
+                                    KeyFrame(ScaleTransform.ScaleXProperty, 0.95).cue(0.15)
+                                    KeyFrame(ScaleTransform.ScaleYProperty, 0.95).cue(0.15)
+                                    KeyFrame(ScaleTransform.ScaleXProperty, 1).cue(0.2)
+                                    KeyFrame(ScaleTransform.ScaleYProperty, 1).cue(0.2)
+                                })
+                                    .reference(RemoteSearch.heartBeat)
+                            )
                     }
 
                     VStack() {

From e509ef7178ea38aab074d1fc00ce8427038f9049 Mon Sep 17 00:00:00 2001
From: Holger Schmidt <leroyz.mailaccount@gmx.net>
Date: Fri, 17 May 2024 00:35:48 +0200
Subject: [PATCH 09/11] commented and delayed animation

---
 samples/Gallery/Pages/AutoCompleteBoxPage.fs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/samples/Gallery/Pages/AutoCompleteBoxPage.fs b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
index 64ac6a5e..9e8a1425 100644
--- a/samples/Gallery/Pages/AutoCompleteBoxPage.fs
+++ b/samples/Gallery/Pages/AutoCompleteBoxPage.fs
@@ -491,14 +491,19 @@ module AutoCompleteBoxPage =
                             .multiBindValue("{2}, {1} ({0})", nameof stateData.Name, nameof stateData.Abbreviation, nameof stateData.Capital)
                             .reference(RemoteSearch.input)
                             .animation(
+                                // pulses the scale like a heart beat to indicate activity
                                 (Animation(TimeSpan.FromSeconds(2.)) {
+                                    // extend slightly but quickly to get a pulse effect
                                     KeyFrame(ScaleTransform.ScaleXProperty, 1.05).cue(0.1)
                                     KeyFrame(ScaleTransform.ScaleYProperty, 1.05).cue(0.1)
+                                    // contract slightly to get a bounce-back effect
                                     KeyFrame(ScaleTransform.ScaleXProperty, 0.95).cue(0.15)
                                     KeyFrame(ScaleTransform.ScaleYProperty, 0.95).cue(0.15)
+                                    // return to original size rather quickly
                                     KeyFrame(ScaleTransform.ScaleXProperty, 1).cue(0.2)
                                     KeyFrame(ScaleTransform.ScaleYProperty, 1).cue(0.2)
                                 })
+                                    .delay(TimeSpan.FromSeconds 1.) // to avoid a "heart attack", i.e. restarting the animation by typing
                                     .reference(RemoteSearch.heartBeat)
                             )
                     }

From 1456c06a7f496970ac01d47018c7c6163807c9ff Mon Sep 17 00:00:00 2001
From: Edgar Gonzalez <edgar.gonzalez@fundourselves.com>
Date: Sat, 18 May 2024 21:37:58 +0100
Subject: [PATCH 10/11] Add ScalarAttributeComparers.physicalEqualityCompare

---
 src/Fabulous.Avalonia/Attributes.fs           |  8 +++++++
 .../Views/Controls/AutoCompleteBox.fs         | 23 +++++++------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/Fabulous.Avalonia/Attributes.fs b/src/Fabulous.Avalonia/Attributes.fs
index 38278943..f2cfa53d 100644
--- a/src/Fabulous.Avalonia/Attributes.fs
+++ b/src/Fabulous.Avalonia/Attributes.fs
@@ -33,6 +33,14 @@ module ValueEventData =
         { Value = value
           Event = event >> box >> MsgValue }
 
+[<RequireQualifiedAccess>]
+module ScalarAttributeComparers =
+    let inline physicalEqualityCompare a b =
+        if LanguagePrimitives.PhysicalEquality a b then
+            ScalarAttributeComparison.Identical
+        else
+            ScalarAttributeComparison.Different
+
 module Attributes =
     /// Define an attribute for EventHandler<'T>
     let inline defineAvaloniaObservableEvent<'args>
diff --git a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
index d5f2faf7..1d045b20 100644
--- a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
+++ b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
@@ -82,21 +82,14 @@ module AutoCompleteBox =
 
     /// Allows setting the ItemTemplate on an AutoCompleteBox
     let ItemTemplate =
-        Attributes.defineSimpleScalar<obj -> Widget>
-            "AutoCompleteBox_ItemTemplate"
-            (fun a b ->
-                if LanguagePrimitives.PhysicalEquality a b then
-                    ScalarAttributeComparison.Identical
-                else
-                    ScalarAttributeComparison.Different)
-            (fun _ newValueOpt node ->
-                let autoComplete = node.Target :?> AutoCompleteBox
-
-                match newValueOpt with
-                | ValueNone -> autoComplete.ClearValue(AutoCompleteBox.ItemTemplateProperty)
-                | ValueSome template ->
-                    autoComplete.SetValue(AutoCompleteBox.ItemTemplateProperty, WidgetDataTemplate(node, template))
-                    |> ignore)
+        Attributes.defineSimpleScalar<obj -> Widget> "AutoCompleteBox_ItemTemplate" ScalarAttributeComparers.physicalEqualityCompare (fun _ newValueOpt node ->
+            let autoComplete = node.Target :?> AutoCompleteBox
+
+            match newValueOpt with
+            | ValueNone -> autoComplete.ClearValue(AutoCompleteBox.ItemTemplateProperty)
+            | ValueSome template ->
+                autoComplete.SetValue(AutoCompleteBox.ItemTemplateProperty, WidgetDataTemplate(node, template))
+                |> ignore)
 
 [<AutoOpen>]
 module AutoCompleteBoxBuilders =

From 37ac1903ca94726b96ac35f9c9a7365678da9c5b Mon Sep 17 00:00:00 2001
From: Edgar Gonzalez <edgar.gonzalez@fundourselves.com>
Date: Sat, 18 May 2024 21:38:35 +0100
Subject: [PATCH 11/11] constraint template to WidgetBuilder<'msg,
 #IFabControl>

---
 src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
index 1d045b20..9ed8b38c 100644
--- a/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
+++ b/src/Fabulous.Avalonia/Views/Controls/AutoCompleteBox.fs
@@ -159,7 +159,7 @@ type AutoCompleteBoxModifiers =
     /// <param name="this">Current widget.</param>
     /// <param name="template">The template to render the items with.</param>
     [<Extension>]
-    static member inline itemTemplate(this: WidgetBuilder<'msg, #IFabAutoCompleteBox>, template: 'item -> WidgetBuilder<'msg, 'widget>) =
+    static member inline itemTemplate(this: WidgetBuilder<'msg, #IFabAutoCompleteBox>, template: 'item -> WidgetBuilder<'msg, #IFabControl>) =
         this.AddScalar(AutoCompleteBox.ItemTemplate.WithValue(WidgetHelpers.compileTemplate template))
 
     /// <summary>Sets the TextFilter property.</summary>