We Keep Coding

.net Maui binding values multiple levels deep

How can I Pass a Binding from a Page to a View?
I have this Page(Xaml)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:DataBindingTests.Views"
xmlns:model="clr-namespace:DataBindingTests.ViewModels"
x:Class="DataBindingTests.Pages.CoolePage"
Title="CoolePage"
x:DataType="model:CoolesModel">
<VerticalStackLayout>
<Label Text="{Binding YourName}"></Label>
<views:MainView YourName="{Binding YourName}"></views:MainView>
<Button Command="{Binding ChangeNameCommand}"></Button>
</VerticalStackLayout>
</ContentPage>
And its CodeBehind:
using DataBindingTests.ViewModels;
namespace DataBindingTests.Pages;
public partial class CoolePage : ContentPage
{
public CoolePage()
{
this.BindingContext = new CoolesModel();
InitializeComponent();
}
}
If I pass a String into my MainView it works and all events are fired. When I use the binding it doesn't. In this simple test, the app should display two times the same name, but only the Label of the ContentPage has the YourName property printed
<views:MainView YourName="Lars"></views:MainView> <-- Works
<views:MainView YourName="{Binding YourName}"></views:MainView> <-- doesn't work
This is the Xaml of the MainView
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:DataBindingTests.Views"
x:Class="DataBindingTests.Views.MainView">
<VerticalStackLayout>
<Label Text="{Binding YourName}"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentView>
This is the CodeBehind of the MainView
namespace DataBindingTests.Views;
public partial class MainView : ContentView
{
public String YourName
{
get
{
String value = (String)GetValue(MainView.YourNameProperty);
return value;
}
set
{
SetValue(MainView.YourNameProperty, value);
}
}
public static readonly BindableProperty YourNameProperty = BindableProperty.Create(nameof(YourName)
, typeof(String)
, typeof(MainView), defaultBindingMode:BindingMode.TwoWay, propertyChanged: OnYourNameChanged);
static void OnYourNameChanged(BindableObject bindable, object oldValue, object newValue)
{
Console.WriteLine(newValue);
}
public MainView()
{
this.BindingContext = this; // Ignore ParentContext
InitializeComponent();
}
}

You can just remove code this.BindingContext = this; from the constructor of MainView.xaml.cs:
public MainView()
{
//this.BindingContext = this;
InitializeComponent();
}
Update:
the above code would only work because the Property in the View and
the Page have the same name.
In this condition, you can modify the code of MainView.xaml as follows:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp929.MainView"
x:Name="TestControlView"
>
<VerticalStackLayout>
<Label Text="{Binding Source={x:Reference TestControlView}, Path=YourName}"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentView>
MainView.xaml.cs
public partial class MainView : ContentView
{
public String YourName
{
get
{
String value = (String)GetValue(YourNameProperty);
return value;
}
set
{
SetValue(YourNameProperty, value);
}
}
public static readonly BindableProperty YourNameProperty = BindableProperty.Create(nameof(YourName)
, typeof(String)
, typeof(MainView), defaultBindingMode: BindingMode.TwoWay, propertyChanged: OnYourNameChanged);
static void OnYourNameChanged(BindableObject bindable, object oldValue, object newValue)
{
Console.WriteLine("-----------------> "+newValue);
}
public MainView()
      {
            InitializeComponent();
// this.BindingContext = this;
}
}
CoolesModel.cs
public class CoolesModel
{
// public string YourName { get; set; }
public string Name { get; set; }
public string TestName { get; set; }
public ICommand ChangeNameCommand => new Command(changeMethod);
private void changeMethod()
{
}
public CoolesModel() {
//YourName = "abc";
Name = "abc";
TestName = "test123...";
}
}
MainPage.xaml.cs
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mauiapp929="clr-namespace:MauiApp929"
x:Class="MauiApp929.MainPage">
<ScrollView>
<VerticalStackLayout>
<Label Text="{Binding Name}"></Label>
<mauiapp929:MainView YourName="{Binding TestName}"></mauiapp929:MainView>
<Button Command="{Binding ChangeNameCommand}"></Button>
</VerticalStackLayout>
</ScrollView>
</ContentPage>

In this simple test, the app should display two times the same name, but only the Label of the ContentPage has the YourName property printed
You're overwriting your binding context half way through for some reason, and the context your page binding resolves (the normal way of using it, the parent context) is different than what you actually see on the screen (which is your this.BindingContext = this). And you never set your second context's property.

AnimationNavigationPage is only sliding left to right instead of right to left

I'm using the AnimationNavigationPage nuget package (found here) to try and create a page slide animation going from right to left. So far it seems that all I'm able to get is left to right and it doesn't reflect when I change the animation type / subtype.
I'm sure I'm just missing something small but for the life of me I can't see it.
MainPage.xaml.cs
using FormsControls.Base;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace PageNavigationExample
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class MainPage : AnimationPage
{
public MainPage()
{
InitializeComponent();
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page1());
}
}
}
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<controls:AnimationPage
xmlns:controls="clr-namespace:FormsControls.Base;assembly=FormsControls.Base" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="PageNavigationExample.MainPage">
<controls:AnimationPage.PageAnimation>
<controls:SlidePageAnimation Duration="Short" Type="Slide" Subtype="FromRight"/>
</controls:AnimationPage.PageAnimation>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Main page"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Button Text="Main page button"
Clicked="Button_Clicked"/>
</StackLayout>
</controls:AnimationPage>
And then just basic content pages for navigation purposes that I haven't modified...Page1, Page2, etc.
What am I missing here to just get the slide animation to slide in from the right when I click a button and slide in from the left when I click the Back button?

And then just basic content pages for navigation purposes that I
haven't modified...Page1, Page2, etc.
Have you let your Page1, Page2, etc to inherit AnimationPage and set the PageAnimation?
for example:
app.xaml.cs :
public App()
{
InitializeComponent();
MainPage = new AnimationNavigationPage(new MainPage());
}
MainPage.xaml.cs:
public partial class MainPage : AnimationPage
{
public MainPage()
{
InitializeComponent();
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page1());
}
}
MainPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<controls:AnimationPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:controls="clr-namespace:FormsControls.Base;assembly=FormsControls.Base"
x:Class="App18.MainPage">
<controls:AnimationPage.PageAnimation>
<controls:SlidePageAnimation Duration="Medium" Subtype="FromRight" />
</controls:AnimationPage.PageAnimation>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Main page"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Button Text="Main page button"
Clicked="Button_Clicked"/>
</StackLayout>
</controls:AnimationPage>
Page1.xaml.cs:
public partial class Page1: AnimationPage
{
public Anim2()
{
InitializeComponent();
}
}
Page1.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<controls:AnimationPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:controls="clr-namespace:FormsControls.Base;assembly=FormsControls.Base"
x:Class="App18.Page1">
<controls:AnimationPage.PageAnimation>
<controls:SlidePageAnimation Duration="Short" Type="Slide" Subtype="FromRight"/>
</controls:AnimationPage.PageAnimation>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</controls:AnimationPage>
the effect like:

Xamarin.Forms Binding to Custom Control Not Working When Binding Is Set In Parent

I'm trying to create a simple Xamarin.Forms custom control and I've encountered on a problem with binding.
This was my initial custom control:
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="CubisMobile.Controls.TestControl"
x:Name="TestControlView">
<Label Text="{Binding TestText}" />
public partial class TestControl : ContentView
{
public static readonly BindableProperty TestTextProperty = BindableProperty.Create(nameof(TestText), typeof(string), typeof(TestControl));
public string TestText
{
get { return (string)GetValue(TestTextProperty); }
set { SetValue(TestTextProperty, value); }
}
public TestControl()
{
InitializeComponent();
BindingContext = this;
}
}
And I was trying to use it this way:
...
<StackLayout>
<controls:TestControl TestText="{Binding Title}" />
<Label Text="{Binding Title}" />
</StackLayout>
...
I added the second label to test if the Title property works fine, and it does.
But text does not show up on the custom control. When I set a constant value like TestText="Testing" it works as it should. I found this answer on StackOverflow, tried the following, but it also didn't work (custom control XAML):
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="CubisMobile.Controls.TestControl"
x:Name="TestControlView">
<Label Text="{Binding Source={x:Reference TestControlView}, Path=TestText}" />
I really don't understand why this binding doesn't work.

The answer you found is the good one, I did the same in my library:
<tabs:TabItem x:Class="Sharpnado.Presentation.Forms.CustomViews.Tabs.UnderlinedTabItem"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="clr-namespace:Sharpnado.Presentation.Forms.CustomViews.Tabs;assembly=Sharpnado.Presentation.Forms"
x:Name="RootLayout">
<ContentView.Content>
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Style="{StaticResource TabTextHeader}"
FontFamily="{Binding Source={x:Reference RootLayout}, Path=FontFamily}"
FontSize="{Binding Source={x:Reference RootLayout}, Path=LabelSize}"
Text="{Binding Source={x:Reference RootLayout}, Path=Label}"
TextColor="{Binding Source={x:Reference RootLayout}, Path=UnselectedLabelColor}">
And the code behind:
public static readonly BindableProperty FontFamilyProperty = BindableProperty.Create(
nameof(FontFamily),
typeof(string),
typeof(TabItem),
null,
BindingMode.OneWay);
public string FontFamily
{
get => (string)GetValue(FontFamilyProperty);
set => SetValue(FontFamilyProperty, value);
}
The only issue I see in the code you shown is the setting of the BindingContext:
public TestControl()
{
InitializeComponent();
BindingContext = this; // Remove this line
}

I have test your code , we need to pay attention to several places:
1. Suppose the class name of ContentView is TestControl, you can try to the following code as you mentioned:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="CustomeViewApp1.controls.TestControl"
x:Name="TestControlView"
>
<ContentView.Content>
<Label Text="{Binding Source={x:Reference TestControlView}, Path=TestText}" />
</ContentView.Content>
2. remove code BindingContext = this; in TestControl.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TestControl : ContentView
{
public static readonly BindableProperty TestTextProperty = BindableProperty.Create(nameof(TestText), typeof(string), typeof(TestControl));
public string TestText
{
get { return (string)GetValue(TestTextProperty); }
set { SetValue(TestTextProperty, value); }
}
public TestControl()
{
InitializeComponent();
//BindingContext = this;
}
}
The test xaml I used is as follows:
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<controls:TestControl TestText="{Binding Title}" VerticalOptions="Center"/>
<Label Text="{Binding Type}" FontSize="Medium" TextColor="#F0BB7F"
FontAttributes="Bold" VerticalOptions="Center"/>
</StackLayout>
And you can check the full demo I test here.

The provided answers work fine. However, these require you to manually set the binding source for each property. This can become tedious if a lot of properties need binding.
A simpler approach will be to override the OnChildAdded event exposed by the framework and set the binding context there. This will automatically set the binding context for any child added.
To do this follow these steps:
In the code-behind file add the following method:
protected override void OnChildAdded(Xamarin.Forms.Element child)
{
base.OnChildAdded(child); //must be called for base implementations to be applied
child.BindingContext = this; //this sets the binding context for added children
}
In your xaml bind your controls to the public bindable properties. For example:

Xamarin binding property of base view

I have a base XAML View that have a custom control with bindable property that is used to show/hide a Grid control.
I need to change this property from a XAML View that inherit from the base View.
the custom control view
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Syncfusion.SfBusyIndicator.XForms;
using System.Runtime.CompilerServices;
namespace TEST_SF
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class VolosLoading : ContentView
{
private static Grid _LoadingContainer = null;
public bool Mostra
{
get { return (bool)GetValue(MostraProperty); }
set { SetValue(MostraProperty, value); OnPropertyChanged(nameof(Mostra)); }
}
public static BindableProperty MostraProperty = BindableProperty.Create(
propertyName: nameof(Mostra),
returnType: typeof(bool),
declaringType: typeof(VolosLoading),
defaultValue: false,
defaultBindingMode: BindingMode.TwoWay
, propertyChanged: MostraPropertyChanged
);
private static void MostraPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
_LoadingContainer.IsEnabled = (bool)newValue;
_LoadingContainer.IsVisible = (bool)newValue;
}
public VolosLoading()
{
InitializeComponent();
_LoadingContainer = (Grid)FindByName("LoadingContainer");
OnPropertyChanged(nameof(Mostra));
}
}
}
its view
<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:busyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms"
x:Class="TEST_SF.VolosLoading">
<ContentView.Content>
<Grid x:Name="LoadingContainer" IsEnabled="{Binding Mostra}" IsVisible="{Binding Mostra}">
<Grid BackgroundColor="LightGray" Opacity="0.6" />
<busyindicator:SfBusyIndicator x:Name="Loading" AnimationType="DoubleCircle"
ViewBoxWidth="150" ViewBoxHeight="150"
TextColor="Green" BackgroundColor="Transparent"
HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</ContentView.Content>
</ContentView>
the base class
namespace TEST_SF.Base
{
public class BaseClass
{
public static VolosLoading PageLoading = new VolosLoading { Mostra = false };
}
}
the base view
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TEST_SF"
x:Class="TEST_SF.BasePage">
<ContentPage.ControlTemplate>
<ControlTemplate>
<StackLayout>
<Label BackgroundColor="Red" Text="Welcome to Xamarin.Forms!"
VerticalOptions="StartAndExpand"
HorizontalOptions="CenterAndExpand" />
<local:VolosLoading></local:VolosLoading>
<ContentPresenter></ContentPresenter>
</StackLayout>
</ControlTemplate>
</ContentPage.ControlTemplate>
</ContentPage>
Then I have a view that inherit from the base View with a button that calls a command that execute this code:
PageLoading.Mostra = !PageLoading.Mostra;
The class is:
class MainPage_Repo : Base.BaseClass
its view:
<local:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TEST_SF"
x:Class="TEST_SF.MainPage">
<ContentPage.BindingContext>
<local:MainPage_Repo />
</ContentPage.BindingContext>
<StackLayout>
<Button VerticalOptions="Center" HorizontalOptions="Center" Text="Loading SF" Command="{Binding MyMockCommand}" CommandParameter="1" />
</StackLayout>
</local:BasePage>
The problems are that the Grid is visible at start, and when the button is pressed nothing changes, the value of Mostra is changed correctly but he Grid is always visible.
How can i solve this?

If you have static properties in ContentView, weird problems are expected to happen, as they are shared across instances, in your case that relates to the _LoadingContainer
Even if this doesn't resolve your problem that is something that can cause huge problems and shouldn't be done.

The problem is when you are calling:
_LoadingContainer = (Grid)FindByName("LoadingContainer");
This line is creating a copy of the Grid container defined in the XAML by x:Name="LoadingContainer". Then, when the Mostra property changes, you are then doing:
_LoadingContainer.IsEnabled = (bool)newValue;
_LoadingContainer.IsVisible = (bool)newValue;
The above is accessing and changing the properties of the copy of the Grid view, not the actual LoadingContainer itself.
Replace all instances of _LoadingContainer with LoadingContainer, and your problem should be solved.
Also, you can remove the bindings to the IsVisible and IsEnabled properties of the Grid. These will cause unnecessary complexity in the compiled code.
EDIT
In addition, in your MostraPropertyChanged handler, you should change it to the following:
private static void MostraPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (VolosLoading)bindable;
if (control != null)
{
control.LoadingContainer.IsEnabled = (bool)newValue;
control.LoadingContainer.IsVisible = (bool)newValue;
}
}

Xamarin.Forms: bind to a code behind property in XAML

In Xamarin.Forms I would like to bind a code behind property to a label in XAML.
I found many answers and web pages about this topic, but they all cover more complex scenarios.
This is my XAML page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TrackValigie"
x:Class="TrackValigie.SelViaggioPage">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding ?????????}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
And this is code behind:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SelViaggioPage : ContentPage
{
private string _lblText;
public string LblText
{
get
{
return _lblText;
}
set
{
_lblText = value;
OnPropertyChanged();
}
}
public SelViaggioPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
this.LblText = "Ciao!!";
base.OnAppearing();
}
}
I would like to bind the "LblText" property to the label, using XAML only, that means without setting binding or binding context in code behind.
Is this possible?

your page will need to implement INotifyPropertyChanged, but the binding syntax should just be
<ContentPage x:Name="MyPage" ... />
...
<Label BindingContext="{x:Reference Name=MyPage}" Text="{Binding LblText}" />

Or if you don't want to swap the binding context for the entire control then use the following:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="this"
x:Class="SomePage">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding SomeProp, Source={x:Reference this}}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Just add BindingContext = this; in code behind file.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TrackValigie"
x:Class="TrackValigie.SelViaggioPage">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding LblText}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Code Behind
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SelViaggioPage : ContentPage
{
private string _lblText;
public string LblText
{
get
{
return _lblText;
}
set
{
_lblText = value;
OnPropertyChanged();
}
}
public SelViaggioPage()
{
InitializeComponent();
BindingContext = this;
}
protected override void OnAppearing()
{
base.OnAppearing();
this.LblText = "Ciao!!";
}
}

You need to set the x:Name for ContentPage as mentioned by Jason's Answer .
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TrackValigie"
x:Class="TrackValigie.SelViaggioPage"
x:Name = "MyControl"/>
Instead of using BindingContext, you can use ElementName
<TextBlock Text="{Binding ElementName=TestControl,Path=StudentName}"/>