How to set a VM to a UserControl

[ArchieCoder]

Uno navigation system is well done with a pair of View - VM. However, if a page is more complex, UserControls are useful.

As suggested here https://discord.com/channels/1182775715242967050/1182775715729526908/1248333691655032892, I tried this in my sample app
BindingBug.zip, but the end result is the DataContext does not propagate to the UI, so none of the binding works.

The workaround is to set the DataContext directly in the constructor of the UserControl.

[agneszitte]

cc @nickrandolph, @eriklimakc
(Related thread on discord: https://discord.com/channels/1182775715242967050/1248375143818989730)

[agneszitte]

Hi @ArchieCoder,

We noticed that you're using x:Bind and your ViewModel property is initially null.
This can cause issues because controls/pages do not implement INotifyPropertyChanged.
As a result, when the DataContext is eventually set, there's no notification that the ViewModel property now has a value.

While x:Bind is more performant and has compile-time checking, {Binding} will correctly update the UI when the DataContext changes. Technically, both {Binding} and x:Bind support INotifyPropertyChanged.
However, the issue is that when the DataContext changes, it doesn't raise INotifyPropertyChanged.
The binding framework ensures that when the DataContext changes, the {Binding} data bindings will automatically be recalculated.

To address this issue, you should replace {x:Bind ViewModel.PropertyXXX} with {Binding PropertyXXX}.
The {Binding} markup extension works with INotifyPropertyChanged and will properly update the UI when the DataContext changes. This way, the binding will correctly respond to changes in the DataContext and update the UI as expected.

For scenarios where you prefer or need to use x:Bind, a possible workaround could be to use a wrapper class that handles the DataContextChanged event and propagates the change through INotifyPropertyChanged.

I have made the adjustments in your current sample app in attachment below, and it is working well on Windows and Desktop with the changes to replace with {Binding}. BindingBug (Update to use Binding).zip

---

Additionally, I noticed that in your sample, you currently have a nested MainPage in another MainPage. Here is the diff showing the adjustment:

routes.Register(
    new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
        Nested:
        [
-           new RouteMap("Main", View: views.FindByViewModel<MainViewModel>(), Nested:
-           [
-               new ("Main", View: views.FindByViewModel<MainViewModel>())
-           ])
+           new RouteMap("Main", View: views.FindByViewModel<MainViewModel>())
        ]
    )
)

---

Let us know if you have additional questions. I hope the details are clear.

[agneszitte]

@ArchieCoder I have created an issue (#17050) for the Uno.Samples repo so we can add samples to showcase examples.
(Sharing the link with you in case you could be interested in contributing)

[ArchieCoder]

@ArchieCoder I have created an issue (#17050) for the Uno.Samples repo so we can add samples to showcase examples. In case you could be interested in contributing.

I put a reminder for July (I'm going away in 2 weeks for 2 weeks) to see if I can handle this time-wise.

[agneszitte]

Thanks in advance @ArchieCoder in case your are able to contribute on this one. But when you are back if you don't have bandwidth let us know and we will take it over.

[ArchieCoder]

@agneszitte Please go ahead with your teammate or you. The explanation that I got was mostly all good for the documentation. The snippet provided was also 90% complete!

Writing doc is not my best skill ;)

[ArchieCoder]

Thank you for the detailed explanations. I will think which way I prefer: settting the DataContext in the constructor OR use Binding + VM as a property.

I will probably switch to Binding.