Xamarin MVVM 显示母版页从左侧滑动，当按下选项卡式页面选项卡项时

Question

我正在尝试实现效果，cross-platform(ios, android and uwp)，如下图所示：

点击“更多”通常会打开一个页面，这是标签栏项目的正常行为。不确定如何覆盖该行为并改为显示滑动母版页。在“更多”选项卡栏项的左侧，还有另一个选项卡栏项，单击它会刷新（或重新加载）MainPage 上的数据。

SettingsPage.xaml（母版页，滑动设置页）

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyProject.Classes"
             xmlns:views="clr-namespace:MyProject.Views"
             x:Class="MyProject.Views.SettingsMasterPage"
             IconImageSource="menu.png"
             Padding="0,40,0,0"
             Title="Menu">


    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:MasterPageItem}">
                               
                    <local:MasterPageItem Title="Settings Link 1" />
                    <local:MasterPageItem Title="Settings Link 2"  />
                    <local:MasterPageItem Title="Settings Link 3"  />   
                 
                </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>

MyTabbedPage.xaml

 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                 xmlns:views="clr-namespace:MyProject.Views;assembly=MyProject"
                 x:Class="Xamarin.Sigma01.Views.LoggerDetectionTabbedPage"
                 android:TabbedPage.ToolbarPlacement="Bottom"
                 BarBackgroundColor="White"
                 SelectedTabColor="Black"
                 BarTextColor="Black">
        <TabbedPage.Children>
            <views:MainPage IconImageSource="tab_icon_mainpage.png" />
            <!-- second link should be the sandwhich button that brings up the settings page -->
        </TabbedPage.Children>   
    </TabbedPage>

MainPage.xaml（主页，通过左侧 TabBar link 图标导航至标题为“更多”的三明治图标左侧）

<ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to the Main page!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />      

        </StackLayout>
    </ContentPage.Content>

Answer 1

实现该效果的一种简单方法是使用 Shell。它已经发布了几个月，只需检查您的 VS 版本以获得正确的模板。

使用 VS2019 创建一个新的 Xamarin.Forms 项目。
如果可以看到以下屏幕，则可以开箱即用 Shell。
在 Views 文件夹中找到“ItemsPage.xaml”。
在顶部的 ContentPage 中添加一行

<ContentPage
    ...
    Shell.TabBarIsVisible="False">

添加 StackLayout 以包含现有的 CollectionView 并添加底部按钮。

<RefreshView ...>
<!-- new StackLayout -->
<StackLayout>  
 
    <CollectionView ..... />

    <!-- new Buttons -->
    <StackLayout
        HeightRequest="52"
        Orientation="Horizontal"
        BackgroundColor="#2196F3"
        Visual="Material">
        <Button
            WidthRequest="200"
            BackgroundColor="Transparent"
            Text="Refresh"
            Command="{Binding LoadItemsCommand}" />
        <Button
            BackgroundColor="Transparent"
            Text="More"
            Clicked="Button_Clicked" />
    </StackLayout>
</StackLayout>

转到“ItemsPage.xaml.cs”完成按钮事件，添加方法：

    private void Button_Clicked(object sender, EventArgs e)
    {
        Shell.Current.FlyoutIsPresented = true;
    }

设置启动项目并部署，查看效果，试玩

此外，在最新的 Xamarin.Forms 中，UWP Shell 是一个 experimental feature, and so does in XF 5.0。但是弹出的东西可能会正常工作（对此不太确定）。

Answer 2

一个替代方案，遵循@Shaw 的想法，但没有 Shell 是使用旧的 MasterDetail Page（支持 UWP）并在底部添加两个按钮以提供“更多”和“刷新”功能。

如果这对您来说是个不错的选择，请继续阅读：

将 Master-Detail 页面添加到您的解决方案

在 Visual Studio 2019 年，向您的解决方案添加 Master-Detail 非常简单。您只需要在解决方案资源管理器中右键单击 Xamarin.Forms 项目，然后转到添加 -> 新建项（或者只需使用快捷键 Ctrl+Shift+A）：

在出现的window中，selectMaster-Detail页面，给它起个酷炫的名字(MasterDetailPage1 在本例中！）并单击添加：

通过这样做，您已经成功地向您的解决方案添加了主从细节。现在只需转到 App 并将 MainPage 设置为如下所示：

MainPage = new MasterDetailPage1();

添加底部按钮

现在我们想要在详细信息页面底部有两个按钮。这只需添加位于末尾的两个按钮堆栈即可完成。我们新添加的 MasterDetailPage1Detail.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"
             x:Class="MasterTabRefresh.MasterDetailPage1Detail"
             Title="Detail">
  <StackLayout>
    <Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it."
           Padding="10"/>
        <StackLayout Orientation="Horizontal"
                     VerticalOptions="EndAndExpand"
                     Spacing="0">
            <Button BackgroundColor="CornflowerBlue"
                    Text="Refresh"
                    TextColor="White"
                    CornerRadius="0"
                    HorizontalOptions="FillAndExpand"/>
            <Button BackgroundColor="CornflowerBlue"
                    Text="More"
                    TextColor="White"
                    CornerRadius="0"
                    HorizontalOptions="FillAndExpand"
                    Clicked="MoreClicked"/>
        </StackLayout>
  </StackLayout>
</ContentPage>

应该是这样的：

在后面的代码 (MasterDetailPage1Detail.xaml.cs ) 中，我们添加了“更多”功能：

private void MoreClicked(object sender, EventArgs e)
{
    ((MasterDetailPage)Application.Current.MainPage).IsPresented = !((MasterDetailPage)Application.Current.MainPage).IsPresented;
}

为您的 menu/master

添加一个漂亮的 X（关闭）按钮

这可以通过在菜单右上角添加一个带有“X”的标签来实现。只需修改您的 MasterDetailPage1Master.xaml 使其看起来像（注意第 2 列第 0 行的标签！）

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterTabRefresh.MasterDetailPage1Master"
             Title="Master">
  <StackLayout>
    <ListView x:Name="MenuItemsListView"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
      <ListView.Header>
        <Grid BackgroundColor="#03A9F4">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
          </Grid.RowDefinitions>
                    <Label Grid.Column="2"
                   Grid.Row="0"
                   Text="X"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="X_Tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
            <Label
              Grid.Column="1"
              Grid.Row="2"
              Text="My wonderful App"
              Style="{DynamicResource SubtitleStyle}"/>
        </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
              <Label VerticalOptions="FillAndExpand" 
                    VerticalTextAlignment="Center" 
                    Text="{Binding Title}" 
                    FontSize="24"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

应该如下所示：

然后将“关闭”功能添加到后面代码中的“X”标签 (MasterDetailPage1Master.xaml):

private void X_Tapped(object sender, EventArgs e)
{
    ((MasterDetailPage)Application.Current.MainPage).IsPresented = false;
}

就是这样！这应该让你去。编码愉快！

Xamarin MVVM 显示母版页从左侧滑动，当按下选项卡式页面选项卡项时

Xamarin MVVM Show master page sliding from the left, when pressing tabbed page tab item

master-detail

xamarin.forms

tabbedpage

将 Master-Detail 页面添加到您的解决方案

添加底部按钮

为您的 menu/master