Binding failing for a nested ContentView

[DanTravison]

I have a ContentView that defines an ItemsSource and SelectedValue BindableProperty. In the parent ContentPage, I'm declaring the ContentView and binding ItemsSource and SelectedValue to a properties of the parent's view model. The relevant XAML looks like the following:

<controls:RadioGroup ItemsSource="{Binding Themes}"
SelectedValue="{Binding PreferredTheme}" />

The child ContentView also uses its own view model and I've defined the x:DataType in its declaration.

At compile time, I see no issues and I don't see any entries in the XAML Binding Failures window.

However, at runtime, see the following BindingDiagnostics.Warnings in the output window emitted twice in succession:

• 'Themes' property not found on 'ThemeSelector.Controls.RadioGroupViewModel', target property: 'ThemeSelector.Controls.RadioGroup.ItemsSource'
• 'PreferredTheme' property not found on 'ThemeSelector.Controls.RadioGroupViewModel', target property: 'ThemeSelector.Controls.RadioGroup.SelectedValue'

And I've confirmed in the debugger that the properties are never set.

For reasons I cannot determine, the XAML compiler appears to incorrectly expect Themes and PreferredTheme to be on the child's view model, not the parent's.

I've tried removing the x:Datatype declaration from the child ContentView, cleaning the solution, and rebuilding but end up in the same place.

What am I missing here or is this a bug in MAUI XAML?

Thanks.

[DanTravison]

Well, I figured out the reason but I'm not happy with the result. If I set the BindingContext in the child either using XAML or in the constructor, this overwrites the BindingContext being inherited in the parent. Even though there are no issues at compile and build time, when the two properties are resolved at run time, the new BindingContext is used and fails.

The found two workarounds so far:

1: Bind the child properties in the parent using RelativeSource.

<controls:RadioGroup ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}}, Path=BindingContext.Themes}"
SelectedValue="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}}, Path=BindingContext.PreferredTheme}"
/>

This is too tedious to use on a regular basis, not to mention the rather obtuse exceptions that are thrown when something goes wrong.

2: Add x:Name, such as 'Root', to the root element under the ContentView and set it's BindingContext in the constructor.

public MyControl()
{
Model = new MyControlViewModel();
InitializeComponent();
Root.BindingContext = Model;
}

While this solves the problem for my usage, I think there should be a better solution. If you have any suggestions, let me know.

[ka4ep]

I now use your 2nd workaround. It works great with minimal changes to existing code. Saved my day!

[AlleSchonWeg]

Hi,
i have the same problem and i am not sure how to solve this correctly. I have for example this Control:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 x:Class="MyControl"
			 ...	>
	<StackLayout>
		<Label Text="{Binding Text1}" />
		<Label Text="{Binding Text2}" />
		<Label Text="{Binding Text3}" />
	</StackLayout>
</ContentView>

The Text1, Text2 and Text3 values are from a viewmodel:

public class MyViewModel: INotifyPropertyChanged {
		public string Text1{
			get;
			set;
		}
		public string Text2{
			get;
			set;
		}
	....
}

MyControl is a child in a page:

<ContentPage ....>
....
<ControlsTable:MyControl BigObject="{Binding pageViewModel.Object}" />
</ContentPage >

BigObject is a BindableProperty in the MyControl ContentView:

		public Big BigObject {
			get => (Big)GetValue(BigObjectProperty);
			set => SetValue(BigObjectProperty, value);
		}

How is the correct way to set the ViewModel in the ContentView?
This is not working:

	public partial class MyControl: ContentView {
		public MyControl() {
			InitializeComponent();
			BindingContext = new MyViewModel(); //Overrides the page ViewModel
		}
	public static readonly BindableProperty BigObjectProperty = BindableProperty.Create(...,
    propertyChanged: BigObjectPropertyChanged);

		private static void BigObjectPropertyChanged(BindableObject bindable, object oldValue, object newValue) => (bindable as MyControl)?
			  .GenerateTexts(newValue); 

	private void GenerateTexts(Big newValue) {
		(BindingContext as MyViewModel).GenerateTexts(newValue); //Sets Text1,Text2, Text3
	}

	public Big BigObject {
			get => (Big)GetValue(BigObjectProperty);
			set => SetValue(BigObjectProperty, value);
		}
}

Remove BindingContext = new MyViewModel(); in ctor and set the BindingContext on the StackLayout? Now it's working. But is this correct?

	<StackLayout>
		<StackLayout.BindingContext>
			<viewmodels:MyViewModel/>
		</StackLayout.BindingContext>
		<Label Text="{Binding Text1}" />
		<Label Text="{Binding Text2}" />
		<Label Text="{Binding Text3}" />
	</StackLayout>

@jfversluis (Sorry for tagging you ;))

[davidortinau]

BindingContext is automatically propagated to child views. You shouldn't need to do anything additional if you're binding to properties of the parent VM.

Here's an example:
BindingPropagation.zip

MainPage has:

<VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            
            <Label
                Text="{Binding Name}"
                Style="{StaticResource Headline}"
                HorizontalOptions="Start"
                SemanticProperties.HeadingLevel="Level1" />

            <app:ChildView />

        </VerticalStackLayout>

public MainPage()
{
  InitializeComponent();
  BindingContext = new MainViewModel();
}

ChildView has:

<VerticalStackLayout>
        <Label 
            Text="{Binding Pet.Name}"
            TextColor="Red"
            />
        <Label 
            Text="{Binding WelcomeMessage}"
            TextColor="Red"
            />
</VerticalStackLayout>