I am using Xamarin Forms to build a mobile app. my problem is that I have a NewBlockButton that, when pressed, needs to open a Popup Page with a title and 2 buttons. I am using Xamarin Community Toolkit for the popup. Main Page
using MathTab.View_Model;
using Xamarin.Forms;
namespace MathTab
{
public partial class MainPage : ContentPage
{
public MainPage()
{
var backgroundImage = new Image
{
Source = "Background.jpg",
Aspect = Aspect.AspectFill
};
Button NewBlockButton = new Button
{
Text = "+",
TextColor = Color.Black,
BackgroundColor = Color.Gray,
Margin = new Thickness(10)
};
NewBlockButton.SetBinding(Button.CommandProperty, new Binding(nameof(MainPageViewModel.NewBlockCommand)));
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition{Height=new GridLength(9,GridUnitType.Star)},
new RowDefinition{Height=new GridLength(1,GridUnitType.Star)}
},
ColumnDefinitions =
{
new ColumnDefinition{Width=new GridLength (1, GridUnitType.Star)}
}
};
grid.BackgroundColor = Color.Purple;
grid.Children.Add(backgroundImage,0,0);
grid.Children.Add(NewBlockButton,0,1);
Content= grid;
}
}
}
Main Page View Model
using MathTab.View;
using System.ComponentModel;
using Xamarin.CommunityToolkit.Extensions;
using Xamarin.CommunityToolkit.ObjectModel;
namespace MathTab.View_Model
{
internal class MainPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public AsyncCommand NewBlockCommand { get; }
public MainPageViewModel()
{
NewBlockCommand = new AsyncCommand(async () =>
{
var popupViewModel = new NewBlockPopupViewModel();
var popupPage =new NewBlockPopup();
await App.Current.MainPage.Navigation.ShowPopupAsync(popupPage);
});
}
}
}
The Popup
using MathTab.View_Model;
using Xamarin.CommunityToolkit.UI.Views;
using Xamarin.Forms;
namespace MathTab.View
{
internal class NewBlockPopup : Popup
{
public NewBlockPopup()
{
Label title = new Label
{
Text = "New Block"
};
Button newTextBlockButton=new Button
{
Text = "Text"
};
Button newMathBlockButton = new Button
{
Text = "Mathematics"
};
newMathBlockButton.SetBinding(Button.CommandProperty, nameof(NewBlockPopupViewModel.NewMathBlockCommand));
newTextBlockButton.SetBinding(Button.CommandProperty, nameof(NewBlockPopupViewModel.NewTextBlockCommand));
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition{Height=new GridLength(3,GridUnitType.Star)},
new RowDefinition{Height=new GridLength(1,GridUnitType.Star)},
},
ColumnDefinitions =
{
new ColumnDefinition{Width=new GridLength (1, GridUnitType.Star)},
new ColumnDefinition{Width=new GridLength (1, GridUnitType.Star)}
}
};
grid.Children.Add(newTextBlockButton,1,0);
grid.Children.Add(newMathBlockButton, 1, 1);
grid.Children.Add(title, 0, 0);
Grid.SetColumnSpan(title, 2);
Content = grid;
}
}
}
When Debugging, it seems that when the button is pressed, it won't start the command of the button.
Binding
only works if you assign the BindingContext
for the page
public MainPage()
{
this.BindingContext = new MainPageViewModel();
...