Bind to support viewmodel with property within a model

[GirusVirus]

Hi, I am not sure if this is a bug or if what I need a feature. I tried to enter it as a bug but had a change of heart.

When this code is used the binding is not executed.

.Bind(Label.TextProperty, static v => v.CoreSalesVsCoreBudget,  source: _viewModel.Sales,
               convert: (double d, string s) => d > 0 ? "Sales Ahead" : "Sales Behind")

When the value of "CoreSalesVsCoreBudget" changes or the "Sales" changes the converter should update the Label Text.

I have tried to do this multiple ways and none have worked so far.

However in XAML this works just fine. I am trying to duplicate this Converter.

This XAML Markup works just fine. Notice the binding "Sales.CoreSalesVsCoreBudget".

<Label.Triggers>
    <DataTrigger
        Binding="{Binding Sales.CoreSalesVsCoreBudget, Converter={StaticResource IsNegativeToBoolConverter}}"
        TargetType="Label"
        Value="True"
        >
        <Setter Property="Text" Value="  Behind of Core Sales  " />
    </DataTrigger>
    <DataTrigger
        Binding="{Binding Sales.CoreSalesVsCoreBudget, Converter={StaticResource IsNegativeToBoolConverter}}"
        TargetType="Label"
        Value="False"
        >
        <Setter Property="Text" Value="  Ahead of Core Sales  " />
    </DataTrigger>
</Label.Triggers>

Also, when I remove the "Sales" Model and code define use the double number direct "CoreSalesVsBudget" as follows:

.Bind(Label.TextProperty, static v => v.CoreSalesVsCoreBudget,  source: _viewModel,
               convert: (double d, string s) => d > 0 ? "Sales Ahead" : "Sales Behind")

This works.

How to recreate this issue.

1. Create a Model

public class SalesModel
{
     public double CoreSales { get; set; }
}

2. Create a ViewModel and add the property with INotifyPropertyChange implementation.

[ObservableProperty]
private SalesModel _sales;

3. Now just create a label that will use the CoreSales value as I did in the example.

.Bind(Label.TextProperty, static v => v.CoreSales,  source: _viewModel.Sales,
               convert: (double d, string s) => d > 0 ? "Sales Ahead" : "Sales Behind")

CommunityToolkit.Maui" Version="5.0.0" />
CommunityToolkit.Maui.Markup" Version="3.1.0" />
CommunityToolkit.Mvvm" Version="8.1.0" />
.NET MAUI: 7.0.0

[bijington]

I know @brminnick explained to me how to do this and I thought I added to the docs but I can't find it anywhere. Hopefully he can point us in the right direction and I will get it added to the docs

[TheCodeTraveler]

Good catch, @bijington! You're right - we don't have any docs on Nested Bindings for Typed Bindings.

Do you have enough info from this Answer to update the docs, adding in a Nested Bindings section?

I also noticed that the Typed Bindings docs has a Warning that we can remove now that we've added TypedBinding support for IValueConverter:

(👆We can remove this Warning)

[TheCodeTraveler]

You're doing a Nested Binding which requires a bit more configuration. This is because your ObservableProperty is the Sales property in the ViewModel, however you want the value of its CoreSales Property nested inside Sales.CoreSales. And .NET MAUI's binding engine needs to know about every property + nested property along the way.

👇 Here's a few ways how you can solve your problem

1. Create a Nested Binding

This is technically the correct way to do nested bindings. However, it is also the most complex way to create a binding.

Here's how to configure .Bind() to bind to CoreSales while telling .NET MAUI binding engine to monitor it along with its parent class Sales.

.Bind(Label.TextProperty,
  static vm => vm.Sales.CoreSales,
  new (Func<ViewModel, object?>, string)[] // Replace `ViewModel` with the `Type` of your ViewModel
  {
    (vm => vm, nameof(ViewModel.Sales)),  // Replace `ViewModel` with the `Type` of your ViewModel
    (vm => vm.Sales, nameof(ViewModel.Sales)),  // Replace `ViewModel` with the `Type` of your ViewModel
    (vm => vm.Sales.CoreSales, nameof(ViewModel.Sales.CoreSales)), // Replace `ViewModel` with the `Type` of your ViewModel
  },
  convert: (double d, string s) => d > 0 ? "Sales Ahead" : "Sales Behind"))

Example from CommunityToolkit.Maui.Markup.UnitTests

Here's an example of creating a Nested Binding from CommunityToolkit.Maui.Markup.UnitTests:

Maui.Markup/src/CommunityToolkit.Maui.Markup.UnitTests/TypedBindingExtensionsTests.cs

Lines 297 to 312 in 74ed765

	entry.Bind(Entry.TextColorProperty,
	static (NestedViewModel vm) => vm.Model?.Model?.TextColor,
	new (Func<NestedViewModel, object?>, string)[]
	{
	(vm => vm, nameof(NestedViewModel.Model)),
	(vm => vm.Model, nameof(NestedViewModel.Model)),
	(vm => vm.Model?.Model, nameof(NestedViewModel.Model.TextColor))
	},
	static (NestedViewModel vm, Color? color) =>
	{
	if (vm.Model?.Model?.TextColor is not null && color is not null)
	{
	vm.Model.Model.TextColor = color;
	}
	},
	bindingMode);

2. Use Converters

Here's another example that only binds to Sales.

If you don't ever change the value of Sales.CoreSales directly you can use leverage convert: to keep the binding a bit cleaner/simpler.

This only works if you never change Sales.CoreSales directly. I.e., This only works if you never call Sales.CoreSales = ... in your ViewModel.

If your code only changes CoreSales's value by changing Sales's value, eg Sales = new SalesModel { CoreSales = ... }, then you can use converters:

.Bind(Label.TextProperty,
  static vm => vm.Sales,
  convert: (SalesModel salesModel, string s) => salesModel.CoreSales > 0 ? "Sales Ahead" : "Sales Behind"))

Use [NotifyPropertyChangedFor(nameof(CoreSales))]

And here's a third option. This is the one I implement in my apps.

For this, you'll create a new expression-bodied property, public double CoreSales, and add [NotifyPropertyChangedFor(nameof(CoreSales))] to private SalesModel _sales.

This tells INotifyPropertyChanged to invoke PropetyChanged for public double CoreSales any time public SalesModel Sales changes.

Similar to 2. Use Converters, this only works if you don't ever change the value of Sales.CoreSales directly. In other words, this only works if the only time CoreSales's value changes is when you change Sales, eg Sales = new Sales { CoreSales = ... } and never Sales.CoreSales = ....

ViewModel

[ObservableProperty]
[NotifyPropertyChangedFor(nameof(CoreSales))]
private SalesModel _sales;

public double CoreSales => Sales.CoreSales;

View

.Bind(Label.TextProperty,
  static vm => vm.CoreSales,
  convert: (double d, string s) => d > 0 ? "Sales Ahead" : "Sales Behind"))

[GirusVirus]

@brminnick , thank you. all are good solutions, I like you will do the last one as it is the most similar to what I have done. My patch was as follows:

[ObservableProperty]
private SalesModel _sales;

[ObservableProperty]
public double _coreSales

And every time I updated the Sales Model I just updated the CoreSales as follows:

CoreSales = Sales.CoreSales;

Now I have a deeper understanding of how the extensions work and have options. I also like the converter option which requires less code and is more intuitive where I don't have to remember to create a new property, and just think that if I had multiple properties, as I quite often do. In this case it is optional, but for many nested properties, I would prefer the Converters method. And if it was active data where the properties are changing, the first method would be the way. In my case this is presentation information and only changes when the whole Sales Model changes, which is perfect.

Thank you for your help and support, I hope this will serve many who face or might face the same issue.

Best,
Rick.

[CliffAgius]

Closed and answered