通过代码在Xamarin中切换/加载新的detailpage

时间:2018-11-14 15:08:10

标签: c# xaml xamarin

如何像在Masterdetailpage的侧面菜单中那样通过代码加载/切换页面?

video

如果在侧面菜单上单击页面名称,则将转到该页面,同时将菜单按钮保留在新页面上。您如何通过代码做到这一点?

MainPage.xaml(主页)

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              xmlns:local="clr-namespace:TimeToSport;assembly=TimeToSport"
              xmlns:local1="clr-namespace:TimeToSport.Views.Main"
              xmlns:local2="clr-namespace:TimeToSport.Views"
              x:Class="TimeToSport.Views.Main.MainPage">
<MasterDetailPage.Master>
    <local1:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local2:ItemsPage />
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

MasterPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimeToSport.Views"
             xmlns:local1="clr-namespace:TimeToSport.Views"
             x:Class="TimeToSport.Views.Main.MasterPage"
             Padding="0,40,0,0"
             Icon="hamburger.png"
             Title="Personal Organiser">
    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:MasterPageItem}">
                    <local1:MasterPageItem Title="Home" IconSource="contacts.png" TargetType="{x:Type local:ItemsPage}" />
                    <local1:MasterPageItem Title="Slaap" IconSource="todo.png" TargetType="{x:Type local:SlaapPage}" />
                    <local1:MasterPageItem Title="Voeding" IconSource="reminders.png" TargetType="{x:Type local:VoedingPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

我对masterdetailpage,detailpage等知之甚少

如果通过以下代码转到“拍击”页面:

Navigation.PushModalAsync(new SlaapPage());

您不会在左上角找到菜单按钮,但我希​​望它在其中。

1 个答案:

答案 0 :(得分:1)

您需要使用Detail页来执行此操作,并且您的当前页应继承自MasterDetailPage

public partial class MainPage : MasterDetailPage
{
    public MainPage()
    {
        InitializeComponent();
        Detail = new NavigationPage(new HomePage());
        IsPresented = false; //This is to hide side page after pushing new page 

    }
}

如果您喜欢Detail = new..以上的内容,则不会在左上方显示后退按钮箭头。 如果您想要Actionbar中的向后箭头,请这样做

Detail.Navigation.PushAsync(new HomePage());

如果您想在其他页面上这样做

public void SlaapClicked()
{ 
 Navigation.PushAsync(new SlaapPage());
} 

在SlaapPage上隐藏Navigationbar

public SlaapPage()
{
    InitializeComponent();
    NavigationPage.SetHasNavigationBar(this, false);
}

如果您要离开其他TabbedPage,请这样做

private void SlaapPage(object sender, EventArgs e)
{
    //this.Navigation.PushAsync(new SlaapPage());// not showing back button
    //(App.Current.MainPage as MasterDetailPage).Detail=new NavigationPage(new SlaapPage()); //showing full screen page
    (App.Current.MainPage as MasterDetailPage).Detail.Navigation.PushAsync(new SlaapPage()); //working like google play store app, In SlaapPage page SetHasNavigationBar should be false
}