Is there a way to help the diffing work with list boxes?

[marklam]

I've got a list box backed by a map.

If I change the value for a key in the map, the data template is invoked and describes the updated controls.

Although the generated UI items for the list box contents are the same (but with element properties change), it looks like the whole controls are replaced. This looks bad, especially with the theme I've applied.

Through the magic of nuget references in .fsx files, I can give a complete example:

#r "nuget:Avalonia.Desktop,11.0.0-rc1.1"
#r "nuget:Avalonia.FuncUI,1.0.0-rc1.1.1"
#r "nuget:Avalonia.FuncUI.Elmish,1.0.0-rc1.1.1"
#r "nuget:Avalonia.Themes.Fluent,11.0.0-rc1.1"
#r "nuget:Material.Avalonia,3.0.0-avalonia11-preview5.191-nightly"

open System
open System.Collections.Generic

open Avalonia
open Avalonia.Controls
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Layout
open Elmish
open Avalonia.FuncUI
open Avalonia.FuncUI.Hosts
open Avalonia.FuncUI.Elmish
open Avalonia.FuncUI.DSL
open Material
open Material.Styles.Themes

module Counter =
    type ItemProgress = { Name : string; ProgressStatus : float }
    type State = { Items : Map<int, ItemProgress> }
    let init() =
        { Items = Map.ofList [(1, { Name = "One"; ProgressStatus = 0.0 })] } ,Cmd.none

    type Msg =
    | ProgressItem of int

    let background _model dispatch =
        backgroundTask {
            while true do
                do! Async.Sleep 1000
                dispatch (ProgressItem 1)
        } :> IDisposable

    let updates model : Sub<Msg> =
        [
            (["updates"], background model)
        ]

    let update (msg: Msg) (state: State) : State*Cmd<Msg> =
        match msg with
        | ProgressItem n ->
            let item = state.Items[n]
            let newItem =
                let p = item.ProgressStatus + 0.1
                if p > 1.0 then
                    { item with ProgressStatus = 0.0 }
                else
                    { item with ProgressStatus = p }

            let newItems = Map.add n newItem state.Items
            { state with Items = newItems }, Cmd.none

    let view (state: State) (dispatch) =
        Grid.create [
            Grid.rowDefinitions "Auto,Auto"
            Grid.children [
                ListBox.create [
                    Grid.row 0
                    ListBox.dataItems state.Items
                    ListBox.itemTemplate (DataTemplateView<KeyValuePair<int, ItemProgress>>.create (
                        fun (kvp : KeyValuePair<int, ItemProgress>) ->
                            let item = kvp.Value
                            Grid.create [
                                Grid.columnDefinitions "Auto,*"
                                Grid.children [
                                    TextBlock.create [
                                        Grid.column 0
                                        TextBlock.text item.Name
                                    ]
                                    ProgressBar.create [
                                        Grid.column 1
                                        ProgressBar.minimum 0.0
                                        ProgressBar.maximum 1.0
                                        ProgressBar.value item.ProgressStatus
                                        ProgressBar.horizontalAlignment HorizontalAlignment.Stretch
                                        ProgressBar.showProgressText true
                                    ]
                                ]
                            ]
                        )
                    )
                ]

                Grid.create [
                    let item = state.Items[1]
                    Grid.row 1
                    Grid.columnDefinitions "Auto,*"
                    Grid.children [
                        TextBlock.create [
                            Grid.column 0
                            TextBlock.text item.Name
                        ]
                        ProgressBar.create [
                            Grid.column 1
                            ProgressBar.minimum 0.0
                            ProgressBar.maximum 1.0
                            ProgressBar.value item.ProgressStatus
                            ProgressBar.horizontalAlignment HorizontalAlignment.Stretch
                            ProgressBar.showProgressText true
                        ]
                    ]
                ]
            ]
        ]

type MainWindow() as this =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Height <- 400.0
        base.Width <- 400.0

        Elmish.Program.mkProgram Counter.init Counter.update Counter.view
        |> Program.withSubscription Counter.updates
        |> Program.withHost this
        |> Program.withConsoleTrace
        |> Program.runWithAvaloniaSyncDispatch () // This line is important for the UI to work with updates from the background thread

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (new MaterialTheme(null, BaseTheme=Base.BaseThemeMode.Dark, PrimaryColor=Colors.PrimaryColor.Purple, SecondaryColor=Colors.SecondaryColor.Lime))
        this.RequestedThemeVariant <- Styling.ThemeVariant.Dark

    override this.OnFrameworkInitializationCompleted() =
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

let args = [| |]
AppBuilder
    .Configure<App>()
    .UsePlatformDetect()
    .UseSkia()
    .StartWithClassicDesktopLifetime(args)

The control in the list box (at the top) appears and reappears, the control outside the list box (at the bottom) does not.

So I was wondering if there's a way to help the diffing work in this case, or is the tempating outside of that update mechanism? Maybe there's a different control type to use instead of a ListBox that could make this work better?

Any help would be greatly appreciated!

[JaggerJo]

Use viewItems instead of dataItems. When using dataItems all of Avalonia's binding and template mechanics kick in. This is sometimes what you want when you have large observable lists, ...

                ListBox.create [
                    Grid.row 0
                    ListBox.viewItems [
                        for item in state.Items do
                            Grid.create [
                                Grid.columnDefinitions "Auto,*"
                                Grid.children [
                                    TextBlock.create [
                                        Grid.column 0
                                        TextBlock.text item.Value.Name
                                    ]
                                    ProgressBar.create [
                                        Grid.column 1
                                        ProgressBar.minimum 0.0
                                        ProgressBar.maximum 1.0
                                        ProgressBar.value item.Value.ProgressStatus
                                        ProgressBar.horizontalAlignment HorizontalAlignment.Stretch
                                        ProgressBar.showProgressText true
                                    ]
                                ]
                            ]
                    ]
                ]

[marklam]

Amazing, thanks!

[DalekBaldwin]

Can this be made to work for a TreeView, so that all the nodes aren't regenerated and collapsed when a new child node is added?

[DalekBaldwin]

Answering my own question: yes, if you explicitly build the entire tree of views yourself recursively:

let rec makeViewItems (treeData:...) =
    [ for datum in treeData do
          TreeViewItem.create [
              TreeViewItem.header (makeHeader ...)
              TreeViewItem.viewItems (makeViewItems datum.Children)]
      ]

TreeView.create [
    TreeView.viewItems (makeViewItems treeData)
    ...
]