Xamarin.Forms Navigation.PushAsync 作为侧边菜单

Question

我正在使用 Xamarin.Forms 并且我有 2 页，一个是列表视图，另一个是我用作列表视图过滤器的视图。我目前正在使用Navigation.PushAsync显示此页面，我的问题是，是否可以像侧菜单一样显示它？我知道我已经在主菜单中使用了主详细信息视图，我认为我的应用程序中不能有 2 个主详细信息，我尝试了这种方法，但它增加了一个额外的导航。

这是我的代码。

public partial class PatientsPage : ContentPage
    {

        public PatientsPage()
        {
            InitializeComponent();

            ToolbarItems.Add(new ToolbarItem("Filter", "filter.png", () => { openFilter(); }));

        }

        public async void openFilter()
        {
            await Navigation.PushAsync(new PatientFiltersPage());
        }
    }

更新

有没有在 1 个大师中有 2 个细节来完成这个？我真的不想使用第 3 方库。

Answer 1

我个人不知道

以任何方式在 1 个主文件中包含 2 个详细信息

根据文档：

Xamarin.Forms MasterDetailPage 是管理两个相关信息页面的页面 - 一个显示项目的母版页和一个显示有关母版页上项目详细信息的详细信息页面。

So in theory only one Detail page is allowed per Master page (although the detail page can be a NavigationPage itself).

But if you are flexible about how to approach your problem, i would suggest using an overlay with AbsoluteLayout.

As an example, look at the image below, where i have a view over the main CollectionView that can be shown or hidden by tapping on the "Filter" button:

Of course you can get as creative as you want, and make the view appear sliding from below, or from the side, or fading in: there is a robust support for animations in Xamarin.Forms. Also the view can be scrollable so that if you have a variety of filters you do not cover the whole CollectionView with the Filter.

If that kind of solution is tolerable, you can achieve it as follows:

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="FilterDetail.StartPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Filter"
                     Clicked="ToolbarItem_Clicked"/>
    </ContentPage.ToolbarItems>
    
    <ContentPage.Content>
        <AbsoluteLayout>
            <CollectionView x:Name="listView" AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Frame Margin="15">
                                <Label Text="{Binding .}"/>
                            </Frame>
                            
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <ContentView x:Name="FilterOverlay"
                     IsVisible="True" VerticalOptions="End"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All"
                     BackgroundColor="Transparent">
                <Frame CornerRadius="10"
                   Margin="10"
                   HorizontalOptions="FillAndExpand" InputTransparent="False">
                    <StackLayout Padding="0">
                        <Label x:Name="FilterText"
                               Text="Filter Options"
                           FontSize="Medium"
                           TextColor="Black"/>

                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 1"/>
                            <Switch IsToggled="True" />
                            
                        </StackLayout>

                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 2"/>
                            <Switch IsToggled="True" />

                        </StackLayout>


                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 3"/>
                            <Switch IsToggled="False" />

                        </StackLayout>
                        
                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 4"/>
                            <Switch IsToggled="True" />

                        </StackLayout>
                        
                        <Button Text="Apply"
                                HeightRequest="30"
                                Padding="0"
                               BackgroundColor="Accent"/>
                    </StackLayout>
                </Frame>
            </ContentView>
        </AbsoluteLayout>
        
    </ContentPage.Content>
</ContentPage>

Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace FilterDetail
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            InitializeComponent();

            var items = new List<String>();
            for (int i = 0; i < 1000; i++)
                items.Add($"Item {i}");

            listView.SetBinding(CollectionView.ItemsSourceProperty, new Binding() { Source = items, Path = "." });

        }

        private void ToolbarItem_Clicked(object sender, EventArgs e)
        {
            FilterOverlay.IsVisible = !FilterOverlay.IsVisible;
        }
    }
}

Update

In order to simulate a second Master/Menu we can simply modify our solution presented above in order to expand our overlay vertically and add some animation so that instead of simply appear and disappear, the overlay hides to the right.

Let's see how this is done:

The Overlay

Add an overlay that covers the whole screen except from a margin on the left so that it looks like a Master Menu.

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="FilterDetail.StartPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Filter"
                     Clicked="ToolbarItem_Clicked"/>
    </ContentPage.ToolbarItems>
    
    <ContentPage.Content>
        <AbsoluteLayout>
            <CollectionView x:Name="listView" AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Frame Margin="15">
                                <Label Text="{Binding .}"/>
                            </Frame>
                            
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <ContentView x:Name="FilterOverlay"
                     IsVisible="True"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All"
                     BackgroundColor="Transparent">
                <Frame CornerRadius="10"
                       Margin="100,10,0,10"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       InputTransparent="False">
                    <StackLayout Padding="0">
                        <Label x:Name="FilterText"
                               Text="Filter Options"
                           FontSize="Medium"
                           TextColor="Black"/>

                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 1"/>
                            <Switch IsToggled="True" />
                            
                        </StackLayout>

                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 2"/>
                            <Switch IsToggled="True" />

                        </StackLayout>


                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 3"/>
                            <Switch IsToggled="False" />

                        </StackLayout>
                        
                        <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="CenterAndExpand">
                            <Label Text="Filter key 4"/>
                            <Switch IsToggled="True" />

                        </StackLayout>
                        
                        <Button Text="Apply"
                                HeightRequest="30"
                                Padding="0"
                               BackgroundColor="Accent"
                                VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                </Frame>
            </ContentView>
        </AbsoluteLayout>
        
    </ContentPage.Content>
</ContentPage>

Next, add some animation to ToolbarItem_Clicked so that on tapping the Filter toolbar item, the overlay hides to the right

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace FilterDetail
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            InitializeComponent();

            var items = new List<String>();
            for (int i = 0; i < 1000; i++)
                items.Add($"Item {i}");

            listView.SetBinding(CollectionView.ItemsSourceProperty, new Binding() { Source = items, Path = "." });

        }

        private async void ToolbarItem_Clicked(object sender, EventArgs e)
        {
            if (FilterOverlay.IsVisible)
            {
                // If overlay is visible, slide it to the right, and set as invisible.
                await FilterOverlay.TranslateTo(this.Width-100, FilterOverlay.Y);
                FilterOverlay.IsVisible = false;
            }
            else
            {
                // If overlay is invisible, make it visible and slide to the left.
                FilterOverlay.IsVisible = true;
                await FilterOverlay.TranslateTo(0, FilterOverlay.Y);
            }
        }
    }
}

And that's it. The result looks like this:

Of course this is only a sample, and a bit of extra work on the overlay and on the animation can give you amazing results. Enjoy!