从 ContentPage Xamarin.Forms Android 打开另一个 XAML

Question

I have a MainPage.xaml that contains my home page. In the code below, I named the button as btnDrawer so that when a user clicks on it, another page pops up from the side, exactly like a side bar.

<!-- Contains header/action bar -->
<StackLayout Padding="20" Grid.Row="0" Orientation="Horizontal">

    <Image Source="icon_drawer.png" WidthRequest="30" x:Name="btnDrawer"/>
    <Label Text="Dylan Villaruel" TextColor="White" FontSize="Medium" VerticalOptions="Center" Margin="5, 0, 0, 0"/>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="9*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Image Source="icon_dropdown.png" Grid.Column="1" VerticalOptions="Center" WidthRequest="20"/>
    </Grid>
</StackLayout>

This is my MainPage class:

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            Drawer_Click();
        }

        public void Drawer_Click()
        {
            btnDrawer.GestureRecognizers.Add(new TapGestureRecognizer() { 
                Command = new Command(() =>
                {
                    DisplayAlert("Task", "You clicked me", "Okay");
                })     
            });
        }
    }

I've just put in DisplayAlert as a placeholder. I tried to put Navigation.PushAsync(new Drawer()) ; but it doesn't work. I'm trying to call an XAML/Class named Drawer. I don't want to use a Master-Detail Page because I'm new to C# and I want to learn how to do things manually, it makes me understand how things work.

Answer 1

Instead of using button as below, you can also have tap gesture on your image and place the event in code behind(xaml.cs) page

Your xaml page:

<Button Text="Main Page" BackgroundColor="Blue" Clicked="NavigateButton_OnClicked">  
</Button> 

your code beind:

private async void NavigateButton_OnClicked(object sender, EventArgs e) {  
            await Navigation.PushAsync(new SecondPage());  
        }  

Please find description here: Navigation between pages

Answer 2

Did you get the following error when you click the Image to execute Navigation.PushAsync(new Drawer()) ?

System.InvalidOperationException: 'PushAsync is not supported globally on Android, please use a NavigationPage.'

If so, you can use Navigation.PushModalAsync(new Drawer()); to replace it. Here is running GIF.

If you still want to use the Navigation.PushAsync(new Drawer()) , you can use MainPage =new NavigationPage( new MainPage()); in the App.xaml.cs like this code.

    public App()
    {
        InitializeComponent();

        MainPage =new NavigationPage( new MainPage());
    }

If you want to click the Image , you can also use ImageButton to achieve it .