ICommand Command not working in Maui Preview 11


I'm new to using Maui and was following a Xamarin forms tutorial to design a login page. I can't seem to get past the login page as the binding for button is not firing.
I'm getting this in the output window but can't find any fix for this anywhere.
The application seems to run fine, just the two buttons which do not respond to user interaction.
[ViewRootImpl@ae55060[MainActivity]] MSG_RESIZED: frame=[0,0][800,1280] ci=[0,32][0,0] vi=[0,32][0,426] or=1
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.StackLayout is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.StackLayout from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.StackLayout is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.StackLayout from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.StackLayout is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.StackLayout from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.StackLayout is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.StackLayout from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.Border is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.Border from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.Label is already a child of Microsoft.Maui.Controls.GridLayout. Remove Microsoft.Maui.Controls.Label from Microsoft.Maui.Controls.GridLayout before adding to Microsoft.Maui.Controls.GridLayout.

Login.xaml:

<StackLayout>
<StackLayout> Image and Label over here </StackLayout>
<StackLayout Margin="10" Padding="20" VerticalOptions="EndAndExpand">

            <Border Stroke="#620774"
                    StrokeThickness="4"
                    Padding="16,8"
                    BackgroundColor="Transparent"
                    HorizontalOptions="Center">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="5,5,5,5" BackgroundColor="Transparent"/>
                </Border.StrokeShape>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!--Email Address-->
                    <Image 
                        GridLayout.Column="0"
                        GridLayout.Row="0"
                        Source="email.png"
                           Aspect="AspectFit"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"
                           WidthRequest="20"
                           HeightRequest="35"/>

                    <Entry
                        GridLayout.Column="1"
                        GridLayout.Row="0"
                        PlaceholderColor="#9d2888"
                        Margin="4,0,0,0"
                        TextColor="Black"
                        HeightRequest="50"
                        Placeholder="Email Address"
                        Keyboard="Email"/>

                    

                    <!--Password-->
                    <Image Source="key.png"
                           Aspect="AspectFit"
                        GridLayout.Column="0"
                           GridLayout.Row="1"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"
                           WidthRequest="20"
                           HeightRequest="35"/>

                    <Entry
                        GridLayout.Column="1"
                        GridLayout.Row="1"
                        HeightRequest="50"
                        Margin="4,0,0,0"
                        PlaceholderColor="#9d2888"
                        TextColor="Black"
                        Placeholder="Password"
                        IsPassword="True"/>

                </Grid>
            </Border> 
    
            <Label Text="Forgot Password?"
                   HorizontalOptions="Center"
                   Margin="0,15,0,15"
                   VerticalOptions="StartAndExpand"
                   TextColor="#0052FF">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ForgotPassword}"/>
                </Label.GestureRecognizers>
            </Label>

</StackLayout>
<StackLayout>
            <Button Text="LOGIN"
                    MaximumHeightRequest="45"
                    CornerRadius="10"
                    HeightRequest="45"
                    TextColor="White"
                    Margin="2"
                    BackgroundColor="#620774"
                    Command="{Binding LoginCommand}"/>


            <Button Text="Dont have an account? Register here!"
                    MaximumHeightRequest="45"
                    CornerRadius="10"
                    HeightRequest="45"
                    TextColor="White"
                    BackgroundColor="#620774"
                    Margin="2"
                    Command="{Binding RegisterCommand}"/>
</StackLayout>
<StackLayout> 2 Labels here </StackLayout>
</StackLayout>

Login.xaml.cs

public partial class Login : ContentPage
    {
        public Login()
        {
            InitializeComponent();
            BindingContext = new LoginViewModel();
        }
    }

LoginViewModel.cs

public class LoginViewModel : BaseViewModel
    {
        //private fields
        private string _username;
        private string _password;

        public string Username
        {
            get { return _username; }
            set { _username = value; OnPropertyChanged(); }
        }
        public string Password
        {
            get { return _password; }
            set { _password = value; OnPropertyChanged(); }
        }

        //Commands
        public ICommand LoginCommand { get; set; }
        public ICommand RegisterCommand { get; set; }
        public ICommand ForgotPassword { get; set; }

        public LoginViewModel()
        {
            System.Console.WriteLine("INSIDE LOGIN VIEWMODEL");
            LoginCommand = new Command(UserLogin);
            RegisterCommand = new Command(NewUser);
            ForgotPassword = new Command(ResetPassword);
        }
        public async void UserLogin()
        {
        }
   }

1 answer

  • answered 2022-01-14 00:03 ToolmakerSteve

    I was able to get it to work, by making 2 changes. However, these changes affect the vertical spacing of the page. See if this works for you, then try to find a different way to get the desired layout.

    1. Remove VerticalOptions="EndAndExpand" from StackLayout.

    2. Remove VerticalOptions="StartAndExpand" from Label.

    Login.xaml:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MauiTests.Login"
                 Title="Login"
                 BackgroundColor="White">
        <StackLayout>
            <Button Text="LOGIN"
                        MaximumHeightRequest="45"
                        CornerRadius="10"
                        HeightRequest="45"
                        TextColor="White"
                        Margin="2"
                        BackgroundColor="#620774"
                        Command="{Binding LoginCommand}"/>
    
            <!-- VerticalOptions="EndAndExpand" -->
            <StackLayout Margin="10" Padding="20">
    
                <Border Stroke="#620774"
                        StrokeThickness="4"
                        Padding="16,8"
                        BackgroundColor="Transparent"
                        HorizontalOptions="Center">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="5,5,5,5" BackgroundColor="Transparent"/>
                    </Border.StrokeShape>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
    
                        <!--Email Address-->
    
                        <Entry
                            GridLayout.Column="1"
                            GridLayout.Row="0"
                            PlaceholderColor="#9d2888"
                            Margin="4,0,0,0"
                            TextColor="Black"
                            HeightRequest="50"
                            Placeholder="Email Address"
                            Keyboard="Email"/>
    
    
    
                        <!--Password-->
                        <Entry
                            GridLayout.Column="1"
                            GridLayout.Row="1"
                            HeightRequest="50"
                            Margin="4,0,0,0"
                            PlaceholderColor="#9d2888"
                            TextColor="Black"
                            Placeholder="Password"
                            IsPassword="True"/>
    
                    </Grid>
                </Border>
    
                <!-- VerticalOptions="StartAndExpand" -->
                <Label Text="Forgot Password?"
                       HorizontalOptions="Center"
                       Margin="0,15,0,15"
                       
                       TextColor="#0052FF">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding ForgotPassword}"/>
                    </Label.GestureRecognizers>
                </Label>
    
            </StackLayout>
    
    
            <Button Text="Dont have an account? Register here!"
                        MaximumHeightRequest="45"
                        CornerRadius="10"
                        HeightRequest="45"
                        TextColor="White"
                        BackgroundColor="#620774"
                        Margin="2"
                        Command="{Binding RegisterCommand}"/>
        </StackLayout>
    </ContentPage>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum