Best approach for version 10 EventToCommandBehavior adjustements

[maslewandowski]

Hi there,

I understood the design change in version 10.
I just want to make sure that i change my code "the right way".

In my enterprise application i use the navigatedto event combined with the EventToCommandBehavior to execute code.

old:

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="NavigatedTo" 
                                Command="{Binding NavigatedToCommand}"/>
    </ContentPage.Behaviors>

my interpretation of version 10:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="MainPageContentPage">
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="NavigatedTo" 
                                Command="{Binding NavigatedToCommand}"
                                BindingContext="{Binding Path=BindingContext, Source={x:Reference MainPageContentPage}, x:DataType=ContentPage}"/>
    </ContentPage.Behaviors>
</ContentPage>

so

1. gave the contentpage a x:name
2. defined the bindingcontext

my question is: is this the correct approach or is there another option? do i have to give every contentpage a name? I tried the same name, but that throws an exception.

thanks for help.

[stephenquan]

There's some critical information that's missing from your snippet that prevents us to answer properly, so, I will fill in the gaps with the following assumptions:

• The namespace of your app is missing, let's assume it's ExampleApp.Maui
• The x:Class is missing, let's assume it's ExampleApp.Maui.MainPage
• Let's assume you added NavigatedToCommand as a property on MainPage

Typically, the rule I follow for BindingContext and x:DataType is

• If I do set BindingContext then, I should set x:DataType at the same level to the "same thing"
• x:DataType should point to a type that contains the thing that's offering the property you need, most likely MainPage
• If you're using Binding Source, then make sure the x:DataType of your Binding points to what Source is

Putting all this together, we will get (N.B. my preference to set root BindingContext in XAML not in C#):

<!-- Scenario 1 : Assumes NavigatedToCommand is declared on your ContentPage -->
<ContentPage
        x:Class="ExampleApp.Maui.MainPage"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
        xmlns:local="clr-namespace:ExampleApp.Maui"
        BindingContext="{Reference mainPage)"
        x:DataType="local:MainPage"
        x:Name="mainPage">
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="NavigatedTo" 
                                BindingContext="{Reference mainPage}"
                                x:DataType="local:MainPage"
                                Command="{Binding NavigatedToCommand}" />
    </ContentPage.Behaviors>
</ContentPage>

[EDIT]

Most MVVM guides tell you to declare your commands in your view model. So, assuming NavigatedToCommand comes from a view model named MainViewModel. The pain point is we will need to set the BindingContext everywhere to this view model. We configure it on the ContentPage.BindingContext, then we take copies of ContentPage.BindingContext, e.g.

<!-- Scenario 2 : Assumes NavigatedToCommand is declared on your view model named `MainViewModel` and that is shared on set on ContentPage's BindingContext -->
<ContentPage
        x:Class="ExampleApp.Maui.MainPage"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
        xmlns:local="clr-namespace:ExampleApp.Maui"
        x:DataType="local:MainViewModel"
        x:Name="mainPage">
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="NavigatedTo" 
                                BindingContext="{Binding BindingContext, x:DataType=ContentPage, Source={Reference mainPage}"
                                x:DataType="local:MainViewModel"
                                Command="{Binding NavigatedToCommand}" />
    </ContentPage.Behaviors>
</ContentPage>

Or, thirdly, you put NavigatedToCommand on your ViewModel but set the BindingContext to the page, e.g.

<!-- Scenario 3 : Assumes NavigatedToCommand is declared on your view model named `MainViewModel` but ContentPage's BindingContext is set to the ContentPage -->
<ContentPage
        x:Class="ExampleApp.Maui.MainPage"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
        xmlns:local="clr-namespace:ExampleApp.Maui"
        BindingContext="{Reference mainPage}"
        x:DataType="local:MainPage"
        x:Name="mainPage">
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="NavigatedTo" 
                                BindingContext="{Reference mainPage}"
                                x:DataType="local:MainPage"
                                Command="{Binding VM.NavigatedToCommand}" />
    </ContentPage.Behaviors>
</ContentPage>

Then the code-behind for adding exposing your view model on your page will need to look like this:

public class MainPage : ContentPage
{
    public MainViewModel VM { get; }
    public MainPage(MainViewModel vm)
    {
        this.VM = vm;
        InitializeComponent();
    }
}

I prefer this method since (1) you can access multiple view models including singleton services this way, and (2) I think both XAML and C# implementations are cleaner.

[Kavik00]

Stephenquan,
How do you set your ViewModel as your Binding Context if you're adding the EventToCommand behavior on an element (an Entry in my case) that is in a CollectionView DataTemplate. The x:Reference only looks at the element it's in. I can't seem to reference the top level ContentPage that's got the ViewModel as it's data Type.

What am I missing here? Thanks so much for any help you can provide.

[stephenquan]

@Kavik00 I think I understand what you're saying. One of the problems people are getting into is they're setting BindingContext directly to the ViewModel. If you refer to my previous example, I strongly recommend the BindingContext to be set to the ContentPage itself and that the ContentPage offers the ViewModel as a property of the ContentPage. Refer to "Scenario 3" above.

[Kavik00]

Stephen, turns out "Entry" has this cool little property called ReturnCommand. 🤦‍♂️
Sometimes is all comes down to "Forest for the Trees" Was trying to make the EventToCommand behavior do what was already built in.

Thanks for your help!
Gary