Issue with bindings "ListBox" to DData SourceList

[hhaynes-rower]

I have a ViewModel

namespace AvaloniaExample.ViewModels

open Elmish
open ReactiveElmish
open ReactiveElmish.Avalonia
open DynamicData

module Chat =
    type Message = { Text: string; Alignment: string; Color: string }

    type Model = { Messages: SourceList<Message> }

    type Msg =
        | SendMessage of Message

    let init() =
        let initialMessages =
            [
                { Text = "Hello, world!"; Alignment = "Left"; Color = "Blue" }
                { Text = "How are you?"; Alignment = "Right"; Color = "Green" }
                { Text = "I'm fine, thank you."; Alignment = "Left"; Color = "Blue" }
                { Text = "That's good to hear!"; Alignment = "Right"; Color = "Green" }
            ]
        { Messages = SourceList.createFrom initialMessages }

    let update (msg: Msg) (model: Model) =
        match msg with
        | SendMessage message -> model.Messages |> SourceList.add message; model

open Chat

type ChatViewModel() =
    inherit ReactiveElmishViewModel()
    let app = App.app
    let local = 
        Program.mkAvaloniaSimple init update
        |> Program.withErrorHandler (fun (_, ex) -> printfn "Error: %s" ex.Message)
        |> Program.mkStore
    member this.Messages  = local.Model.Messages

    static member DesignVM = new ChatViewModel()

and a View

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="650"
             xmlns:vm="using:AvaloniaExample.ViewModels"
             Design.DataContext="{x:Static vm:ChatViewModel.DesignVM}"
             x:DataType="vm:ChatViewModel"
             x:Class="AvaloniaExample.Views.ChatView">

    <StackPanel HorizontalAlignment="Center" Margin="10">
        <ListBox Items="{Binding Messages}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border CornerRadius="5" Padding="10" Margin="5" Background="{Binding Color}" HorizontalAlignment="{Binding Alignment}">
                        <TextBlock Text="{Binding Text}" />
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</UserControl>

And I cannot seem to get them to bind the "Messages" SourceList to the ListBox "Items" - Can you help?

2>ChatView.axaml(12,18): Error AVLN:0004 Avalonia: Unable to find suitable setter or adder for property Items of type Avalonia.Controls:Avalonia.Controls.ItemsControl for argument Avalonia.Markup.Xaml:Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindingExtension, available setter parameter lists are:
System.Object
System.Object Line 12, position 18.

[JordanMarr]

You just need to use the BindSourceList method.

[hhaynes-rower]

Thanks - I changed to member this.Messages = this.BindSourceList(local.Model.Messages)

And got the same error (again)

2>ChatView.axaml(12,18): Error AVLN:0004 Avalonia: Unable to find suitable setter or adder for property Items of type Avalonia.Controls:Avalonia.Controls.ItemsControl for argument Avalonia.Markup.Xaml:Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindingExtension, available setter parameter lists are:
System.Object
System.Object Line 12, position 18.

And nothing lighting up in-editor other than the properties (Color, Text, Alignment) not resolving - which was the way it's been from the start.

[JordanMarr]

It looks right at a glance.
Is that a build error from the Compiled Bindings?

[hhaynes-rower]

Yup - resolved them this way - thanks to JetBrains AI assistant 😄

namespace AvaloniaExample.ViewModels

open Elmish
open ReactiveElmish
open ReactiveElmish.Avalonia
open DynamicData

module Chat =
    type Message = { Text: string; Alignment: string; Color: string }

    type Model = { Messages: SourceList<Message> }

    type Msg =
        | SendMessage of Message

    let init() =
        let initialMessages =
            [
                { Text = "Hello, world!"; Alignment = "Left"; Color = "Blue" }
                { Text = "How are you?"; Alignment = "Right"; Color = "Green" }
                { Text = "I'm fine, thank you."; Alignment = "Left"; Color = "Blue" }
                { Text = "That's good to hear!"; Alignment = "Right"; Color = "Green" }
            ]
        { Messages = SourceList.createFrom initialMessages }

    let update (msg: Msg) (model: Model) =
        match msg with
        | SendMessage message -> model.Messages |> SourceList.add message; model

open Chat
open System.Collections.Generic

type ChatViewModel() as this =
    inherit ReactiveElmishViewModel()

    let local = 
        Program.mkAvaloniaSimple init update
        |> Program.withErrorHandler (fun (_, ex) -> printfn "Error: %s" ex.Message)
        |> Program.mkStore
    let messages = this.BindSourceList(local.Model.Messages)

    member this.MessagesView: IEnumerable<Message> = messages |> Seq.cast<Message>

    static member DesignVM = new ChatViewModel()

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="650"
             xmlns:vm="using:AvaloniaExample.ViewModels"
             Design.DataContext="{x:Static vm:ChatViewModel.DesignVM}"
             x:DataType="vm:ChatViewModel"
             x:Class="AvaloniaExample.Views.ChatView">

    <StackPanel HorizontalAlignment="Center" Margin="10">
        <ListBox Items="{Binding MessagesView}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border CornerRadius="5" Padding="10" Margin="5" Background="{Binding Color}" HorizontalAlignment="{Binding Alignment}">
                        <TextBlock Text="{Binding Text}" />
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</UserControl>

So compiled bindings now all resolve. But I still get this error

2>ChatView.axaml(12,18): Error AVLN:0004 Avalonia: Unable to find suitable setter or adder for property Items of type Avalonia.Controls:Avalonia.Controls.ItemsControl for argument Avalonia.Markup.Xaml:Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindingExtension, available setter parameter lists are:
System.Object
System.Object Line 12, position 18.

[JordanMarr]

I think you need to bind to ItemsSource instead of Items.

AvaloniaUI/Avalonia#10867

[hhaynes-rower]

OMG - DETAILS MATTER! 😸

Early as this UI is... I'm very excited 😁