How do I create bindings where I listen to a property and when it's triggered I save a value to a Component's state?

[matachi]

I'm creating bindings for a component called NavigationView in FluentAvalonia. It has a property SelectedItemProperty which I want to listen to using AttrBuilder<'t>.CreateSubscription<obj>(...). However, when I click a button in the NavigationView, it runs in my code:

                        NavigationView.onSelectedItemChanged (
                            fun x -> (match x with
                                      | :? NavigationViewItem as y -> y.Content :?> string
                                      | null -> ""
                                      | _ -> "") |> item.Set
                        )

and the function gets called with an instance of NavigationViewItem. But immediately afterwards it gets called with null. Why is the function within onSelectedItemChanged(...) executed twice?

My code is below. Here's my file App.fs:

namespace AvaloniaApplication2

open Avalonia
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open FluentAvalonia.Styling
open FluentAvalonia.UI.Controls
open Panels.NavigationView

module Main =
    let view =
        Component (fun ctx ->
            let item = ctx.useState ""
            StackPanel.create [
                StackPanel.children [
                    NavigationView.create [
                        NavigationView.menuItems [
                            NavigationViewItem.create "Test 1"
                            NavigationViewItem.create "Kalle Anka"
                            NavigationViewItem.create "Hej"
                        ]
                        NavigationView.onSelectedItemChanged (
                            fun x -> (match x with
                                      | :? NavigationViewItem as y -> y.Content :?> string
                                      | null -> ""
                                      | _ -> "") |> item.Set
                        )
                    ]
                    Grid.create [
                        Grid.children [
                            TextBlock.create [
                                TextBlock.text (string item.Current)
                            ]
                        ]
                    ]
                ]
            ]
        )

type MainWindow() =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Content <- Main.view

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentAvaloniaTheme())

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

        base.OnFrameworkInitializationCompleted()

Here's my file NavigationView.fs:

namespace Panels.NavigationView

open System.Collections.Generic
open Avalonia.FuncUI.Builder
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Types

[<AutoOpen>]
module NavigationViewItem =
    open FluentAvalonia.UI.Controls

    type NavigationViewItem with
        static member create(content: string) =
            let a = NavigationViewItem()
            a.Content <- content
            a

[<AutoOpen>]
module NavigationView =
    open FluentAvalonia.UI.Controls

    let create (attrs: IAttr<NavigationView> list): IView<NavigationView> =
        ViewBuilder.Create<NavigationView>(attrs)

    type NavigationView with

        static member menuItems (value: obj list) : IAttr<NavigationView> =
            AttrBuilder<NavigationView>.CreateProperty(NavigationView.MenuItemsSourceProperty, value |> List, ValueNone)

        static member selectedItem<'t when 't :> NavigationView>(item: obj) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<obj>(NavigationView.SelectedItemProperty, item, ValueNone)

        static member onSelectedItemChanged<'t when 't :> NavigationView>(func: obj -> unit, ?subPatchOptions) =
            AttrBuilder<'t>.CreateSubscription<obj>(NavigationView.SelectedItemProperty, func, ?subPatchOptions = subPatchOptions)

Can you tell if I'm doing something wrong? I don't expect NavigationView.onSelectedItemChanged to be called twice, especially not first with an instance and second time with null.

[JaggerJo]

Hey @matachi

The problem is that:

• You call item.Set when SelectedItemChanged is fired.
• Which schedules re-rendering the view (this happens by default for state created with useState. You can use useState(.., renderOnChange = false) instead)
• Each time the view renders MenuItemsSourceProperty is set because the list is considered not equal after diffing.
• When the MenuItemsSourceProperty changes the selected item is reconsidered. It does not appear in the list (equals issue again I assume). It's set to null.

There are multiple ways of fixing / avoiding that issue.

1. use useState("", renderOnChange = false)

2. use selectedItem to keep track of the selected item.

3. If your available menu items never change consider setting them in the init function.

[matachi]

I just noticed that when I click a menu item, saveSelectedNavigationViewItem is called 3 times in a row: First time with the new menu item, second time with null, and third time with the new menu item again. Maybe my code can be structured differently to avoid this behavior?

[JaggerJo]

1. It's a FuncUI thing Init function example

2. Because you create instances of the NavigationViewItem type in the create function. Because of that FuncUI can't diff in a smart way, it needs to compare the actual instances.

It would be better to bind them as view items in your case:

Avalonia.FuncUI/src/Avalonia.FuncUI/DSL/ItemsControl.fs

Line 26 in 28e60d4

static member viewItems<'t when 't :> ItemsControl>(views: IView list) : IAttr<'t> =

3. Yup.

Check if the newly selected item is already the selected on in your state here NavigationView.onSelectedItemChanged before setting it.

If you provide me a runnable project (zip) I can take a closer look.

[matachi]

Thanks for your answer! It helped me!

I changed my code to this:

module Main =
    let navigationViewMenuItems =
        [
            NavigationViewItem.create "Test 1"
            NavigationViewItem.create "Kalle Anka"
            NavigationViewItem.create "Hej"
        ]

    let saveSelectedNavigationViewItem (selectedNavigationViewItem: IWritable<NavigationViewItem>) (newItem: obj) =
        match newItem with
        | :? NavigationViewItem as newItem ->
            selectedNavigationViewItem.Set newItem
        | _ -> ()

    let convertToIList<'t> (fsList: 't list) : IList<'t> =
        ResizeArray<'t> fsList

    let view =
        Component (fun ctx ->
            let selectedNavigationViewItem = ctx.useState navigationViewMenuItems.[0]
            StackPanel.create [
                StackPanel.children [
                    NavigationView.create [
                        NavigationView.init (fun control ->
                            let menuItems: IList<obj> = navigationViewMenuItems |> List.map (fun x -> x :> obj) |> convertToIList
                            control.MenuItems <- menuItems
                            control.SelectedItem <- selectedNavigationViewItem.Current
                            ()
                        )
                        NavigationView.onSelectedItemChanged (saveSelectedNavigationViewItem selectedNavigationViewItem)
                    ]
                    Grid.create [
                        Grid.children [
                            TextBlock.create [
                                TextBlock.text (selectedNavigationViewItem.Current.Content :?> string)
                            ]
                        ]
                    ]
                ]
            ]
        )

(I also uploaded the project here: https://github.com/matachi/AvaloniaTest.)

Moving the initialization of MenuItems and SelectedItem to the init function seems to have fixed it. Now when I click any menu items, the function saveSelectedNavigationViewItem is only called once. I guess that previously, executing NavigationView.menuItems menuItems and NavigationView.selectedItem selectedNavigationViewItem.Current on every re-render caused the listener to trigger.

I also tried to move NavigationView.onSelectedItemChanged (saveSelectedNavigationViewItem selectedNavigationViewItem) to the init function, but I have not been successful thus far. How I implemented onsSelectedItemChanged is like this:

module NavigationView =
    ...
    type NavigationView with
        ...
        static member onSelectedItemChanged<'t when 't :> NavigationView>(func: obj -> unit, ?subPatchOptions) =
            AttrBuilder<'t>.CreateSubscription<obj>(NavigationView.SelectedItemProperty, func, ?subPatchOptions = subPatchOptions)

NavigationView.SelectedItemProperty is a DirectProperty:

public static readonly DirectProperty<NavigationView, object> SelectedItemProperty =
    SelectingItemsControl.SelectedItemProperty.AddOwner<NavigationView>(x => x.SelectedItem, 
        (x, v) => x.SelectedItem = v, 
        defaultBindingMode: Avalonia.Data.BindingMode.TwoWay);

How would you with FuncUI set up a listener to it in the init function?

[JaggerJo]

First, you should prefer correct bindings over resorting to the init function.

I highly recommend using the existing bindings as a reference.

Some controls (mostly 3rd party ones) require certain methods to be called on initialisation. That does not work well with bare components and is where the init function is really useful.

The init function gives you access to the actual control instance when the underlaying control is initially created.

[matachi]

Thanks! Great advice! And now I understand better what the purpose of the init function is.

I removed the init function, and managed to get it to work without triggering the function multiple times. Thank you very much for your time and help! Really interesting project which I will play with more.

Just for the sake of completeness. Here's my current code:

namespace AvaloniaApplication2

open System.Collections.Generic
open Avalonia
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open FluentAvalonia.Styling
open FluentAvalonia.UI.Controls
open Panels.NavigationView

module Main =
    let navigationViewMenuItems =
        [
            NavigationViewItem.create "Test 1"
            NavigationViewItem.create "Kalle Anka"
            NavigationViewItem.create "Hej"
        ]

    let saveSelectedNavigationViewItem (selectedNavigationViewItem: IWritable<NavigationViewItem>) (newItem: obj) =
        match newItem with
        | :? NavigationViewItem as newItem ->
            selectedNavigationViewItem.Set newItem
        | _ -> ()

    let convertToIList<'t> (fsList: 't list) : IList<'t> =
        ResizeArray<'t> fsList

    let menuItems: IList<obj> =
        navigationViewMenuItems
        |> List.map (fun x -> x :> obj)
        |> convertToIList

    let view =
        Component (fun ctx ->
            let selectedNavigationViewItem = ctx.useState navigationViewMenuItems.[0]
            StackPanel.create [
                StackPanel.children [
                    NavigationView.create [
                        NavigationView.menuItems menuItems
                        NavigationView.selectedItem selectedNavigationViewItem.Current
                        NavigationView.onSelectedItemChanged (saveSelectedNavigationViewItem selectedNavigationViewItem)
                    ]
                    Grid.create [
                        Grid.children [
                            TextBlock.create [
                                TextBlock.text (selectedNavigationViewItem.Current.Content :?> string)
                            ]
                        ]
                    ]
                ]
            ]
        )

and:

namespace Panels.NavigationView

open System.Collections
open Avalonia.FuncUI.Builder
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Types

[<AutoOpen>]
module NavigationViewItem =
    open FluentAvalonia.UI.Controls

    type NavigationViewItem with
        static member create(content: string) =
            let a = NavigationViewItem()
            a.Content <- content
            a

[<AutoOpen>]
module NavigationView =
    open FluentAvalonia.UI.Controls

    let create (attrs: IAttr<NavigationView> list): IView<NavigationView> =
        ViewBuilder.Create<NavigationView>(attrs)

    type NavigationView with

        static member menuItems<'t when 't :> NavigationView>(value: IEnumerable) : IAttr<NavigationView> =
            AttrBuilder<NavigationView>.CreateProperty<IEnumerable>(NavigationView.MenuItemsSourceProperty, value, ValueNone)

        static member selectedItem<'t when 't :> NavigationView>(item: obj) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<obj>(NavigationView.SelectedItemProperty, item, ValueNone)

        static member onSelectedItemChanged<'t when 't :> NavigationView>(func: obj -> unit, ?subPatchOptions) =
            AttrBuilder<'t>.CreateSubscription<obj>(NavigationView.SelectedItemProperty, func, ?subPatchOptions = subPatchOptions)