展会"返回菜单"按钮，在导航栏的iOS与Xamarin.Forms [英] Show "Back to Menu" Button in iOS NavigationBar with Xamarin.Forms

问题描述

我试图建立使用C＃和Xamarin.Forms一个跨平台的应用程序。它包含在 MasterDetailPage 的形式实现一个滑出式菜单。而在Android上有一个与在左上角，而切换滑出页的应用程序图标的按钮，还有iOS上没有这样的导航栏项目。

我打破了下来，从Xamarin解决方案模板空白应用程序（Xamarin.Forms共享），并更换应用的实施级衍生以下最低例如：

<预类=郎-CS prettyprint-覆盖> 公共类应用
{
静态MasterDetailPage MDPage;

公共静态页GetMainPage（）
{
返回新NavigationPage（
MDPage =新MasterDetailPage {
法师=新ContentPage {
标题=大师，
含量=新StackLayout {
儿童= {链接（A），连接（b），连接（C）}
}，
}
细节=新ContentPage {内容=新标签的{text =A}}，
}）;
}

静态按钮链接（字符串名称）
{
VAR按钮=新的Button {文本=名};
button.Clicked + = {委托
MDPage.Detail =新ContentPage {内容=新标签的{text =名}};
MDPage.IsPresented = FALSE;
};
返回按钮;
}
}


解决方案以及产生的截图可以在找到 GitHub的。

我的想法是添加这样的菜单或后退按钮，在特定的iOS代码修改 window.RootViewController.NavigationController.NavigationBar 在的AppDelegate 类。但 window.RootViewController.NavigationController 是空。

通过 NavigationPage 更换 GetMainPage的返回类型（）而不是页于事无补。

我可以通过 MDPage.ToolbarItems.Add（...） ，但它们出现在顶部的右键的角落。

解决方案

我终于找到了解决办法。该代码基本上需要两个较小的修正：

1. 包装所有 DetailPage S IN一个 NavigationPage ，而不是 MasterDetailPage （见＃1，＃2和表3号）。


2. 的图标添加到母版时，在iOS上（请参阅下面的＃4）。不要忘了一个实际的PNG到iOS的资源

最低工作示例如下（！）：

 公共静态类应用
 {
静态MasterDetailPage MDPage; 
 
公共静态页GetMainPage（）
 {
返回MDPage =新MasterDetailPage {//＃1 
法师=新ContentPage {
标题=主，
图标= Device.OS == TargetPlatform.iOS？ menu.png：空，//＃4 
含量=新StackLayout {
 =儿童{链接（A），连接（B），连接（C）} 
}，
}，
细节=新NavigationPage（新ContentPage {内容=新标签的{text =A}}）//＃2 
}; 
} 
 
静态按钮链接（字符串名称）
 {
 VAR按钮=新的Button {文本=名}; 
 button.Clicked + = {委托
 MDPage.Detail =新NavigationPage（新ContentPage {内容=新标签的{text =名称}}）; //＃3 
 MDPage.IsPresented = FALSE; 
}; 
返回按钮; 
} 
} 
  

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.

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;
    }
}

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

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.

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

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. 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.

The minimum working example is as follows:

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;
    }
}

这篇关于展会&QUOT;返回菜单&QUOT;按钮，在导航栏的iOS与Xamarin.Forms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！