如何使用 Xamarin.Forms 创建抽屉/滑块菜单？

Posted 2023-03-25

【中文标题】如何使用 Xamarin.Forms 创建抽屉/滑块菜单？

【英文标题】：How can I create a drawer / slider menu with Xamarin.Forms?

【发布时间】：2014-07-20 19:28:30

【问题描述】：

如何使用 Xamarin.Forms 创建滑块菜单？它是烘焙的还是定制的？

【问题讨论】：

developer.xamarin.com/guides/xamarin-forms/user-interface/…

【参考方案1】：

您创建一个新类，其中包含 Master（即 menu）和 Detail（即 main 页面）的所有定义。我知道，这听起来从后到前，但是例如..

using System;
using Xamarin.Forms;

namespace testXamForms
 
   public class HomePage : MasterDetailPage
   
   public HomePage()
   
     // Set up the Master, i.e. the Menu

     Label header = new Label
     
       Text = "MENU",
       Font = Font.BoldSystemFontOfSize(20),
       HorizontalOptions = LayoutOptions.Center
     ;
    // create an array of the Page names
     string[] myPageNames = 
       “Main”,
       “Page 2”,
       “Page 3”,
     ;

     // Create ListView for the Master page.
     ListView listView = new ListView
     
       ItemsSource = myPageNames,
     ;

     // The Master page is actually the Menu page for us
    this.Master = new ContentPage
     
       Title = "The Title is required.",
       Content = new StackLayout
       
         Children = 
         
           header, 
           listView
         ,
       
     ;

     // Define a selected handler for the ListView contained in the Master (ie Menu) Page.

     listView.ItemSelected += (sender, args) =>
     
       // Set the BindingContext of the detail page.
       this.Detail.BindingContext = args.SelectedItem;
        Console.WriteLine("The args.SelectedItem is
       0",args.SelectedItem);


     // This is where you would put your “go to one of the selected pages” 

       // Show the detail page.
       this.IsPresented = false;
     ;
    // Set up the Detail, i.e the Home or Main page.
     Label myHomeHeader = new Label
     
       Text = "Home Page",
       HorizontalOptions = LayoutOptions.Center
     ;

     string[] homePageItems =  “Alpha”, “Beta”, “Gamma” ;
     ListView myHomeView = new ListView 
       ItemsSource = homePageItems,
     ;

     var myHomePage = new ContentPage();
     myHomePage.Content = new StackLayout
     
       Children = 
       
         myHomeHeader, 
         myHomeView
        ,
     ;
     this.Detail = myHomePage;
     
   
 

【讨论】：

这很好，但是对于任何无法让它工作的人，您需要将 myHomePage 初始化为一个新的 ContentPage。即 var myHomePage = new ContentPage();

我发现 masterdetail 页面存在问题。当按下硬件后退按钮时，它会最小化应用程序。它不记得导航历史。我有一个应用程序，它使用 masterdetail 页面在所有页面中显示菜单。导航在我的应用程序中以两种方式发生。一种来自菜单，第二种来自仪表板。所以如果我导航到另一个页面，然后按“返回”按钮，它会关闭应用程序。那么有什么想法可以解决这个问题吗？

由于格式的原因，您对我投了反对票，“主要”是怎么回事？

@animaonline 解决格式问题比否决有效答案更有帮助。

【参考方案2】：

它内置于：MasterDetailPage。您可以将它的Detail 和Master 属性设置为您想要的任何类型的页面。我发现Hansleman.Forms 很有启发性。

【参考方案3】：

我的最小示例（如 here 发布的）如下：

public class App

    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    
        return MDPage = new MasterDetailPage 
            Master = new ContentPage 
                Title = "Master",
                BackgroundColor = Color.Silver,
                Icon = Device.OS == TargetPlatform.ios ? "menu.png" : null,
                Content = new StackLayout 
                    Padding = new Thickness(5, 50),
                    Children =  Link("A"), Link("B"), Link("C") 
                ,
            ,
            Detail = new NavigationPage(new ContentPage 
                Title = "A",
                Content = new Label  Text = "A" 
            ),
        ;
    

    static Button Link(string name)
    
        var button = new Button 
            Text = name,
            BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
        ;
        button.Clicked += delegate 
            MDPage.Detail = new NavigationPage(new ContentPage 
                Title = name,
                Content = new Label  Text = name 
            );
            MDPage.IsPresented = false;
        ;
        return button;
    

一个示例解决方案托管在on GitHub。

在 iOS 上，结果如下所示（左：菜单打开，右：单击“B”后）：

请注意，您需要将菜单图标作为资源添加到您的 iOS 项目中。

【讨论】：

此解决方案不隐藏主视图（在 iPad iOS 7.0.2 中）。 MDPage.IsPresented= false 语句基本上被忽略。 Xamarin 表单 1.2.3.6257.

【参考方案4】：

如果您正在寻找MasterDetailPage 的简单示例，请查看我在GitHub 的示例存储库。还提供了非常好的示例here

【参考方案5】：

Slideoverkit 是一个可用于 Xamarin Forms 的出色插件。有一个github 可以查看免费样品，您可以在here 找到有关它的文档。