Passing Commands to Button in ContentView - xamarin.forms

Question

I have a ContentView with a button inside a grid. I made bindable property for the text value on the button, and the command. The text value is being set properly, but not the button? I don't understand what's going on here. Anyone have any insights?
<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="Aboo.Components.BusyButton"
BindingContext="{Binding Source={RelativeSource Self}}">
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="Button" Text="{Binding Text}" Command="{Binding Command}" Grid.ColumnSpan="3" />
<ActivityIndicator Grid.Column="1" IsRunning="{Binding IsBusy}" Color="White"/>
</Grid>
</ContentView.Content>
</ContentView>
And code-behind:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BusyButton : ContentView
{
public BusyButton()
{
InitializeComponent();
}
public static readonly BindableProperty TextProperty =
BindableProperty.Create("Text", typeof(string), typeof(BusyButton), default(string));
public string Text
{
get => (string) GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
public static readonly BindableProperty CommandProperty =
BindableProperty.Create("Command", typeof(ICommand), typeof(BusyButton), default(ICommand));
public ICommand Command
{
get => (ICommand) GetValue(CommandProperty);
set => SetValue(CommandProperty, value);
}
public static readonly BindableProperty IsBusyProperty =
BindableProperty.Create("IsBusy", typeof(bool), typeof(BusyButton), default(bool), propertyChanged: IsBusyChanged);
private static void IsBusyChanged(BindableObject bindable, object oldvalue, object newvalue)
{
var busyButton = bindable as BusyButton;
if (busyButton == null)
return;
busyButton.Button.IsEnabled = !(bool) newvalue;
}
public bool IsBusy
{
get => (bool) GetValue(IsBusyProperty);
set => SetValue(IsBusyProperty, value);
}
}
Using the button like this:

Answer 1

Please delete the BindingContext="{Binding Source={RelativeSource Self}}" this line.
Add the Content.BindingContext = this; in your BusyButton constructor. Based on my test BindingContext="{Binding Source={RelativeSource Self}}" not worked in the nasted binding.
Please add a name x:Name="MyButton" for Button in ContentView, then change the button name in IsBusyChanged method.
Here is my test GIF.
Here is my code.BusyButton.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="App2.BusyButton"
x:Name="MyContentview"
>
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="MyButton" Text="{Binding Text}" Command="{Binding Command}" Grid.ColumnSpan="3" />
<ActivityIndicator Grid.Column="1" IsRunning="{Binding IsBusy,Mode=TwoWay}" Color="White"/>
</Grid>
</ContentView.Content>
</ContentView>
BusyButton.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BusyButton : ContentView
{
public BusyButton()
{
InitializeComponent();
Content.BindingContext = this;
}
public static readonly BindableProperty TextProperty =
BindableProperty.Create("Text", typeof(string), typeof(BusyButton), default(string));
public string Text
{
get => (string)GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
public static readonly BindableProperty CommandProperty =
BindableProperty.Create(nameof(Command) , typeof(ICommand), typeof(BusyButton), default(ICommand));
public ICommand Command
{
get => (ICommand)GetValue(CommandProperty);
set => SetValue(CommandProperty, value);
}
public static readonly BindableProperty IsBusyProperty =
BindableProperty.Create("IsBusy", typeof(bool), typeof(BusyButton), default(bool), propertyChanged: IsBusyChanged);
private static void IsBusyChanged(BindableObject bindable, object oldvalue, object newvalue)
{
var busyButton = bindable as BusyButton;
if (busyButton == null)
return;
busyButton.MyButton.IsEnabled = !(bool)newvalue;
}
public bool IsBusy
{
get => (bool)GetValue(IsBusyProperty);
set => SetValue(IsBusyProperty, value);
}
}
I test it in the MainPage.xaml.
<StackLayout>
<!-- Place new controls here -->
<local:BusyButton x:Name="busyButton" Text="{Binding Name}" Command="{Binding ChangeCommand}" IsBusy="{Binding Changed, Mode=TwoWay}"></local:BusyButton>
</StackLayout>
Here is background code.MainPage.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Content.BindingContext = new MyModelView();
}
}
Here is my test MyModelView.
public class MyModelView: INotifyPropertyChanged
{
public ICommand ChangeCommand { protected set; get; }
public string Name { get; set; }
bool _changed = false;
public bool Changed
{
get
{
return _changed;
}
set
{
if (_changed != value)
{
_changed = value;
OnPropertyChanged("Changed");
}
}
}
public MyModelView() {
Name = "test";
ChangeCommand = new Command(() =>
{
Changed = true;
Console.WriteLine("================test Command execute=================");
});
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Here is my mode.
https://github.com/851265601/XFormsNestedBindingContentView