How to use IListState with ItemSource-DataTemplates within MVUX correctly?

[AuderixDev]

Hi there,

i think i'm missing something.
I do not understand how to use MVUX correctly for DataTemplates.

For simplicity i used the Uno-Sample-App and added my code.
Code for Reference: https://github.com/AuderixDev/UnoAppItemSourceBinding

Basically, what i have done:

In my MainModel.cs, i have
public IListState<CustomRadioButtonModel> CustomRadioButtons => ListState<CustomRadioButtonModel>.Empty(this);
And then added two Buttons to the List.

In the MainPage.xaml the List is binded as Itemsource. The RadioButtons use a CustomControl:

<RadioButtons ItemsSource="{Binding CustomRadioButtons}">
  <RadioButtons.ItemTemplate>
    <DataTemplate>
      <local:CustomRadioButton />
    </DataTemplate>
  </RadioButtons.ItemTemplate>
</RadioButtons>

Where 'CustomRadioButton.xaml' is defined as:

<RadioButton x:Class="UnoApp13.Presentation.CustomRadioButton"            
             Command="{Binding ButtonCommand}"
             IsEnabled="{Binding CustomRadioButtonIsEnabled, Mode=TwoWay}">
---
</RadioButton>

And finally the 'CustomRadioButtonModel.cs':

public partial class CustomRadioButtonModel
{
    public IState<bool> CustomRadioButtonIsEnabled => State<bool>.Empty(this);
...

}

That how I think it should work.

The problem:
RadioButton.IsEnabled is of type bool.
CustomRadioButtonIsEnabled is of type IState<bool>.
There should be the generated BindableCustomRadioButtonModel in between. It's also generated, but it is not automatically used.
Hence i get a Binding Error:

Error: Converter failed to convert value of type 'Uno.Extensions.Reactive.Core.StateImpl`1[System.Boolean]' to type 'Boolean'; BindingExpression: Path='CustomRadioButtonIsEnabled' DataItem='UnoApp13.Models.CustomRadioButtonModel'; target element is 'UnoApp13.Presentation.CustomRadioButton' (Name='null'); target property is 'IsEnabled' (type 'Boolean').

What am I doing wrong? Also, when I define Datetemplate x:DataType="models:BindableCustomRadioButtonModel"nothing changes.

As workaround I'm using MVVM, but i want to stick to MVUX

[dr1rrb]

Hey @AuderixDev thanks for the question.

Actually we are not supporting "nested" bindable models. The idea is more to expose an immutable model and create a new instance of that model on each update (including for lists). You can get more info off the reason here: https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Mvux/WorkingWithRecords.html.

In your case, I was about to recommend you to use the selection operator https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Mvux/Advanced/Selection.html, however I noticed that the RadioButtons does not supports the ISelectionInfo on which we rely for this. So in your case I would simply use a 2-way binding on the SelectedItem, eg.:

First I created an immutable class:

public class CustomRadioButtonEntity(string ButtonText);

Then in you MainModel I created 2 states:

public IListState<CustomRadioButtonEntity> CustomRadioButtons => ListState<CustomRadioButtonEntity>.Value(this, () => [new("Custom Button 1"), new("Custom Button 2")]);

[Value] // This is to allow direct binding of a CustomRadioButtonEntity instead of de-normalizing it.
public IState<CustomRadioButtonEntity> SelectedCustomRadioButton => State<CustomRadioButtonEntity>.Empty(this);

Finally in the MainPage.xaml I added the binding on the SelectItem.

<RadioButtons ItemsSource="{Binding CustomRadioButtons}" SelectedItem="{Binding SelectedCustomRadioButton, Mode=TwoWay}">

Doing this you can now easily get the currently selected item from your model simply by await SelectedCustomRadioButton.

[AuderixDev]

Thank you for the detailed reply.
I've done this, and it works. Thanks!
I only use a CustomRadioButtonEnitity is now declared as

public partial record CustomRadioButtonModel
{
    public string ButtonText { get; init; }

    public ICommand ButtonCommand { get; init; }
    public bool CustomRadioButtonIsEnabled { get; init; }

}

And the ButtonCommand in the MainModel is now

ButtonCommand = new AsyncRelayCommand(async (ct) =>
{
    await CustomRadioButtons.UpdateAsync(
              match: customButton => customButton.ButtonText.Equals("Custom Button 2"),
              updater: customButton => customButton with { CustomRadioButtonIsEnabled = !customButton.CustomRadioButtonIsEnabled },
              ct);
})

@dr1rrb
Updating the CustomRadioButton-List ends in an "flickering" of the RadioButtons. Possible there is a short moment, where only 1 Button is in the list, and then the new record is added.
How can I avoid this?

edit: deleted long text about an error, which is already tracked here: #2383

[dr1rrb]

On which target is it flickering ? Windows or also other platforms ? (possibly related issue : #2209)

[dr1rrb]

BTW, why are you tracking the selection using a CustomRadioButtonIsEnabled flag? IMO, I think you don't need neither the ButtonCommand nor the CustomRadioButtonIsEnabled flag. The selection is managed directly by the RadioButtons and pushed into the MainModel through the SelectedCustomRadioButton.

(And if it's about being able to data-bind some visual clue through that CustomRadioButtonIsEnabled, I would instead recommend you to change the Style of your control and use proper VisualState -or- alternatively you can bind to the IsChecked of the RadioButton itself which will be updated by the parent RadioButtons control)