Search code examples
c#xamarinbuttonpopupmobile-application

Buttons not opening the Popup window


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.


Solution

  • Binding only works if you assign the BindingContext for the page

    public MainPage()
    {
       this.BindingContext = new MainPageViewModel();
    
       ...