Enable the inheritance of the parent's BindingContext for Behaviors, based on a Flag

[egvijayanand]

Description

While trying the v10 release of the MAUI Community Toolkit, faced CommunityToolkit/Maui#2391

Excerpt from the release notes:

• .NET MAUI Behaviors do not automatically inherit their parent's BindingContext (a breaking change from Xamarin.Forms)
• Going forward, the .NET MAUI Community Toolkit will follow this implementation of Behaviors

I'm not fully aware of the reasoning behind this design change, maybe to improve the performance, but ideally, it should have been put under a Flag with the default value now set to false.

In this EventToCommandBehavior scenario, it won't work without its BindingContext set. Simply toggling a Flag would be preferable than relatively adjusting the (binding) Source for the Command bound to the behavior, as the latter often has its own implications as described below.

For now, I'm tried to set the RelativeSource binding to inherit the parent's BindingContext, but it ended up in exception with the below message.

Cannot apply relative binding to CommunityToolkit.Maui.Behaviors.EventToCommandBehavior because it is not a superclass of Element.

Then tried with Reference binding, but XAMLC sends warning messages.

<mct:EventToCommandBehavior
    Command="{Binding x:DataType=vw:MainPage, Source={x:Reference page}, Path=BindingContext.ShowMessageCommand}"
    EventArgsConverter="{StaticResource ArgsConverter}"
    EventName="RawMessageReceived" />

Without x:DataType - \MauiApp1\Views\MainPage.xaml(76,29): XamlC warning XC0045: Binding: Property "BindingContext" not found on "MauiApp1.ViewModels.MainViewModel".

With x:DataType - \MauiApp1\Views\MainPage.xaml(76,29): XamlC warning XC0045: Binding: Property "ShowMessageCommand" not found on "System.Object".

To avoid this, I propose introducing a Flag that, when toggled, will inherit the parent's BindingContext.

Public API Changes

A boolean flag, as a property in the Behavior type, to determine whether to inherit the parent's BindingContext based on its value, with the default set to false to reflect the design change.

Intended Use-Case

As explained in the Description.

[egvijayanand]

Setting the Source for Binding can be unpredictable, as it disrupts the natural flow, except for Collection controls with templating with a bit of redirection.

[egvijayanand]

The question is, why so much indirection?

Turning off BindingContext inheritance is acceptable, but it should be possible to enable it in specific situations like this.

From the earlier warning message, I understood that the parser could not locate the Command in the BindingContext because its type is an object. Proper type casting is needed.

What you shared is likely an alternative solution.

[TheCodeTraveler]

(Just an FYI for the MAUI team from the MAUI Community Toolkit team)

We no longer automatically assign Behavior.BindingContext. This is a breaking change in CommunityToolkit.Maui v10.0.0.

I've posted more information, including a working solution, here on StackOverflow: https://stackoverflow.com/a/79099574/5953643

We're also included this as a Breaking Change in our Release Notes:

[egvijayanand]

Turning off BindingContext inheritance is acceptable, but it should be possible to enable it in specific situations like this.

Suggest a solution that fits naturally and supports future refactoring, rather than relying on binding with a named source (a workaround), which increases coupling.

An alternative solution would be to resolve the BindingContext relatively from the immediate parent, similar to how relative binding to Self operates, and bypass the Element sub-class check for this binding mode.

Update: To add more clarity, since there are two hierarchical structures—the XAML document and the Visual Tree—Behaviors, though children to the UI control in the XAML document, are not in the Visual Tree.

Therefore, to remove ambiguity and maintain consistency, the proposed binding mode can be referred to as VisualParent (quite like TemplatedParent).

<mct:EventToCommandBehavior
    BindingContext="{Binding BindingContext, Source={RelativeSource VisualParent}}"
    Command="{Binding ShowMessageCommand}"
    EventArgsConverter="{StaticResource ArgsConverter}"
    EventName="RawMessageReceived" />

[egvijayanand]

By defining the relative source, we're now explicitly stating that BindingContext inheritance is required, similar to how it was implicitly done before.

Also if refactoring, the UI control or the Behavior can move freely without causing any friction.

Why does this not work for me? What I am doing wrong?

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="Appearing" BindingContext="{Binding Path=BindingContext, Source={x:Reference MainCtrlView}}" Command="{Binding InitCommand}"></toolkit:EventToCommandBehavior>
        <toolkit:EventToCommandBehavior EventName="Disappearing" BindingContext="{Binding Path=BindingContext, Source={x:Reference MainCtrlView}}" Command="{Binding StopCommand}"></toolkit:EventToCommandBehavior>
    </ContentPage.Behaviors>

This is inside the ContentPage:

<ContentPage 
             ...
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="MainCtrlView">

The command is not executed. It was working before upgrading, which is expected as behaviour of Behaviors changed.
Thank you for your time.

[egvijayanand]

You need to set x:DataType for it to work. Noticed yesterday itself but your last comment is somehow not included in this conversation.

Thank you @egvijayanand, it works.

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="Appearing" BindingContext="{Binding Path=BindingContext, Source={x:Reference MainCtrlView}, x:DataType=views:MainView}" Command="{Binding InitCommand}"></toolkit:EventToCommandBehavior>
        <toolkit:EventToCommandBehavior EventName="Disappearing" BindingContext="{Binding Path=BindingContext, Source={x:Reference MainCtrlView}, x:DataType=views:MainView}" Command="{Binding StopCommand}"></toolkit:EventToCommandBehavior>
    </ContentPage.Behaviors>

I deleted yesterday comment as it was not working and I did not want to mislead others.

[AlexGoOn]

I wanted to share a few thoughts on this. I understand there are reasons behind this decision, but I believe most developers would expect behaviors to inherit the BindingContext of the objects they’re attached to. This is how it works in WPF, and on the surface, it feels like the most logical approach.

The documentation includes the following note:

.NET MAUI does not set the BindingContext of a behavior, because behaviors can be shared and applied to multiple controls through styles.

However, when a Behavior is attached via a Style in a resource dictionary, assigning the BindingContext using x:Reference won't work. So, the entire point of introducing this change becomes less valuable. While there are options to create more advanced bindings based on ancestor types, these solutions are less intuitive and can quickly make XAML harder to read.

I think it would be much more intuitive if the BindingContext were explicitly set to the attached visual element. When the parent element’s BindingContext changes, the behavior could update its own BindingContext accordingly. This approach would eliminate many unnecessary obstacles.

[clEclE36]

Hi there!

For .NET MAUI 9 and with toolkit 11.0.

On a related note, I was trying to call a command of my ViewModel when triggered "SelectedIndexChanged".
I'm in a Picker, which is in a DataTemplate.

The problem is that I need to declare in my DataTemplate x:DataType=“models:Anomaly”, to refer to my model.
I then lose my context.

When I'm not in a Behavior, I can retrieve it directly via:

Command="{Binding` MyCommand, Source={RelativeSource AncestorType={x:Type viewmodels:SelectAlertsViewModel}}, x:DataType=viewmodels:SelectAlertsViewModel}"

But when I'm in a Behavior, with the same code in Command, I get an exception when the page loads:

System.InvalidOperationException: 'Cannot apply relative binding to CommunityToolkit.Maui.Behaviors.EventToCommandBehavior because it is not a superclass of Element.'

My BindingContext is defined in the constructor of the behind code, when injecting the ViewModel (BindingContext = myviewmodel).

In the first part, I've defined two DataTemplates; I've only written the second with the Picker.
Each line of the CollectionView is one of the two DataTemplates, the choice being made by the DataTemplateSelector: AlertTemplateSelector.

I searched for a while, and most of the time the code compiled, but the command was not called, without crashing the program.

As mentioned above, an exception was thrown when the page was displayed if I tried to reference my context via AncestorType in the Picker Behavior.
When I do it outside the Behavior (in my ImageButton, which is a cross that appears once an item has been selected), it works without a hitch.

I therefore had to use an x:Reference for my page, with the name x:Name=“page_select_alerts” and, above all, add BindingContext in front of the Command name (BindingContex.UpdateSelectedAnomaliesCommand).

If you only add the Command name, without prefixing it with BindingContext, it won't crash: the element is selected, but the function isn't called.

Here's the code, shortened by unnecessary graphical elements.
If this ever helps anyone who's been looking for longer than I have...

<views:ContentPageBase 
    ...
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:views="clr-namespace:MyProject.Views"
    xmlns:viewmodels="clr-namespace:MyProject.ViewModels"
    xmlns:models="clr-namespace:MyProject.Models"
    xmlns:datatemplatesselectors="clr-namespace:MyProject.DataTemplatesSelectors"
    x:Class="MyProject.Views.SelectAlertsView"
    x:DataType="viewmodels:SelectAlertsViewModel"
    x:Name="page_select_alerts">

    <views:ContentPageBase.Resources x:DataType="viewmodels:SelectAlertsViewModel">
        
        <DataTemplate x:Key="CheckBoxTemplate"
                      ...
        </DataTemplate>

        <DataTemplate x:Key="PickerTemplate"
                      x:DataType="models:Anomaly">
            <Grid>
                <Label
                       Text="{Binding Label}">
                </Label>
                <Picker Grid.Column="1"
                        x:Name="picker"
                        Title="Choose a default"
                        ItemsSource="{Binding Defaults, x:DataType=models:Anomaly}"
                        ItemDisplayBinding="{Binding Label, x:DataType=models:Default}">
                    <Picker.Behaviors>
                        <mct:EventToCommandBehavior EventName="SelectedIndexChanged"
                                                    BindingContext="{Binding Path=BindingContext, Source={x:Reference picker}, x:DataType=Picker}"
                                                    Command="{Binding BindingContext.UpdateSelectedAnomaliesCommand, Source={x:Reference page_select_alerts}, x:DataType=viewmodels:SelectAlertsViewModel}">
                            <mct:EventToCommandBehavior.CommandParameter>
                                <MultiBinding Converter="{StaticResource AnomalyConverter}">
                                    <MultiBinding.Bindings>
                                        <Binding Path="SelectedItem" Source="{x:Reference picker}" x:DataType="models:Default" />
                                        <Binding Path="."/>
                                    </MultiBinding.Bindings>
                                </MultiBinding>
                            </mct:EventToCommandBehavior.CommandParameter>
                        </mct:EventToCommandBehavior>
                    </Picker.Behaviors>
                </Picker>
                <ImageButton Grid.Column="2"
                             x:Name="img_button_unselected_anomaly"
                             Source="close_cross.png"
                             IsVisible="{Binding Source={x:Reference picker}, Path=SelectedItem, Converter={StaticResource IsNotNullConverter}}"
                             Command="{Binding UnselectSelectedAnomalyCommand, Source={RelativeSource AncestorType={x:Type viewmodels:SelectAlertsViewModel}}, x:DataType=viewmodels:SelectAlertsViewModel}">
                    <ImageButton.CommandParameter>
                        <MultiBinding Converter="{StaticResource AnomalyConverter}">
                            <MultiBinding.Bindings>
                                <Binding Path="." Source="{x:Reference picker}" x:DataType="Picker" />
                                <Binding Path="."/>
                            </MultiBinding.Bindings>
                        </MultiBinding>
                    </ImageButton.CommandParameter>
                    <ImageButton.Behaviors>
                        <mct:IconTintColorBehavior TintColor="{StaticResource DangerColor}"/>
                    </ImageButton.Behaviors>
                </ImageButton>
            </Grid>
        </DataTemplate>

        <datatemplatesselectors:AlertTemplateSelector x:Key="AlertTemplateSelector"
                                                      CheckBoxTemplate="{StaticResource CheckBoxTemplate}"
                                                      PickerTemplate="{StaticResource PickerTemplate}" />
    </views:ContentPageBase.Resources>

    <Grid x:Name="anomalies_panel">
        <CollectionView x:Name="anomalies_collection"
                            ItemsSource="{Binding Anomalies}"
                            ItemTemplate="{StaticResource AlertTemplateSelector}"
                            SelectionMode="None">
        </CollectionView>
    </Grid>
    
</views:ContentPageBase>