显示“返回菜单"带有 Xamarin.Forms 的 iOS NavigationBar 中的按钮 [英] Show "Back to Menu" Button in iOS NavigationBar with Xamarin.Forms

问题描述

我正在尝试使用 C# 和 Xamarin.Forms 构建跨平台应用程序.它包含一个以 MasterDetailPage 形式实现的滑出式菜单.在 Android 上，左上角有一个带有应用图标的按钮，可以切换滑出页面，而 iOS 上没有这样的导航栏项.

I'm trying to build a cross-platform app using C# and Xamarin.Forms. It contains a slide-out menu implemented in form of a MasterDetailPage. While on Android there is a button with the app icon in the top left corner, which toggles the slide-out page, there is no such navigation bar item on iOS.

我将其分解为以下源自 Xamarin 解决方案模板Blank App (Xamarin.Forms Shared)"的最小示例，并替换了 App 类的实现:

I broke it down to the following minimum example derived from the Xamarin solution template "Blank App (Xamarin.Forms Shared)" and replacing the implementation of the App-class:

public class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return new NavigationPage(
            MDPage = new MasterDetailPage {
                Master = new ContentPage {
                    Title = "Master",
                    Content = new StackLayout {
                        Children = { Link("A"), Link("B"), Link("C") }
                    },
                },
                Detail = new ContentPage { Content = new Label { Text = "A" } },
            });
    }

    static Button Link(string name)
    {
        var button = new Button { Text = name };
        button.Clicked += delegate {
            MDPage.Detail = new ContentPage { Content = new Label { Text = name } };
            MDPage.IsPresented = false;
        };
        return button;
    }
}

可以在 GitHub 上找到解决方案以及生成的屏幕截图.

The solution as well as resulting screenshots can be found at GitHub.

我的想法是在 iOS 特定的代码中添加这样一个菜单"或后退"按钮，修改 AppDelegate 中的 window.RootViewController.NavigationController.NavigationBar班级.但是 window.RootViewController.NavigationController 是 null.

My idea was to add such a "menu" or "back" button in the iOS-specific code modifying the window.RootViewController.NavigationController.NavigationBar within the AppDelegate class. But window.RootViewController.NavigationController is null.

将 GetMainPage() 的返回类型替换为 NavigationPage 而不是 Page 没有帮助.

Replacing the return type of GetMainPage() by NavigationPage instead of Page does not help.

我可以通过 MDPage.ToolbarItems.Add(...) 添加工具栏项目，但它们出现在右上角.

I could add toolbar items via MDPage.ToolbarItems.Add(...), but they appear in the top right corner.

推荐答案

我终于找到了解决方案.代码基本上需要两个小更正:

I finally found a solution. The code basically needs two minor corrections:

1. 将所有 DetailPage 包装在 NavigationPage 中，但不包括 MasterDetailPage(参见下面的 #1、#2 和 #3).
2. 在 iOS 上将 Icon 添加到 MasterPage(参见下面的 #4).不要忘记将实际的 PNG(!) 添加到 iOS 资源.

1. Wrap all DetailPages in a NavigationPage, but not the MasterDetailPage (see #1, #2 and #3 below).
2. Add an Icon to the MasterPage when on iOS (see #4 below). Don't forget to a the actual PNG(!) to the iOS resources.

最小工作示例如下:

public static class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return MDPage = new MasterDetailPage { // #1
            Master = new ContentPage {
                Title = "Master",
                Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null, // #4
                Content = new StackLayout {
                    Children = { Link("A"), Link("B"), Link("C") }
                },
            },
            Detail = new NavigationPage(new ContentPage { Content = new Label { Text = "A" } }), // #2
        };
    }

    static Button Link(string name)
    {
        var button = new Button { Text = name };
        button.Clicked += delegate {
            MDPage.Detail = new NavigationPage(new ContentPage { Content = new Label { Text = name } }); // #3
            MDPage.IsPresented = false;
        };
        return button;
    }
}

这篇关于显示“返回菜单"带有 Xamarin.Forms 的 iOS NavigationBar 中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！