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.