导航到母版页，同时单击母版详细信息页面中详细信息页面中的图像答案

【问题标题】：Navigation to master page while clicking on Image placed in details page in master details page导航到母版页，同时单击母版详细信息页面中详细信息页面中的图像
【发布时间】：2018-01-08 19:08:43
【问题描述】：

我在 xamarin.forms 中为 iOS 应用程序使用主详细信息页面，我在左上角放置了一个图像，现在我想通过单击该图像导航到主页面，如何导航它.

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MasterApp.Controls;assembly=MasterApp"
             x:Class="MasterApp.Views.Dashboard.MasterDetailPage">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" Title="Master" >

        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <ContentPage Icon="Menu Icon.png">
            <ContentPage.Content>

            </ContentPage.Content>
        </ContentPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

这里我需要在点击详细信息页面中的图标时进入母版页。

【问题讨论】：

如果我的意思是你想在点击图片后打开菜单主细节？
没错@qubuss

标签： ios xamarin xamarin.forms

【解决方案1】：

您需要在您拥有主布局的 XAML 中设置图标。只有在这里你设置图标。请看official xamarin tutorial

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
         x:Class="MasterDetailPageNavigation.MasterPage"
         Padding="0,40,0,0"
         Icon="hamburger.png" // here you set icon for navigation 
         Title="Personal Organiser">
<StackLayout>
    <ListView x:Name="listView" SeparatorVisibility="None">
        <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}" VerticalOptions="FillAndExpand" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

===编辑=== 尝试将Icon 移动到MasterDetailPage，可能图像图标的名称会出现问题。因为如果你的名字有空格，那可能是个问题。

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:MasterApp.Controls;assembly=MasterApp"
         x:Class="MasterApp.Views.Dashboard.MasterDetailPage"
         Icon="Menu Icon.png">
<MasterDetailPage.Master>
    <ContentPage Padding="10" Title="Master" >

    </ContentPage>
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
    <ContentPage Icon="Menu Icon.png">
        <ContentPage.Content>

        </ContentPage.Content>
    </ContentPage>
</MasterDetailPage.Detail>

【讨论】：

感谢@qubuss 的帮助，我尝试放置图标但没有成功，我更新了我的代码，你能指导我哪里出错了。
我和你一样做了qubuss但没有结果，它没有通过点击图标导航到master。
所以也许可以尝试从官方教程中编写代码并检查它是否有效。

【解决方案2】：

我做了一些变通方法，最终将其导航到 master。

 <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:controls="clr-namespace:MasterApp.Controls;assembly=MasterApp"
                 x:Class="MasterApp.Views.Dashboard.MasterDetailPage">
        <MasterDetailPage.Master>
            <ContentPage Padding="10" Title="Master" >

            </ContentPage>
        </MasterDetailPage.Master>

        <MasterDetailPage.Detail>
            <ContentPage>
                <ContentPage.Content>
     <Image Source="Menu.png"  HorizontalOptions="StartAndExpand" VerticalOptions="Start">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"></TapGestureRecognizer>
                        </Image.GestureRecognizers>                      
                    </Image>
                </ContentPage.Content>
            </ContentPage>
        </MasterDetailPage.Detail>
    </MasterDetailPage>

在cs中，我写了

private async void TapGestureRecognizer_OnTapped(object sender, EventArgs e)
        {            
            IsPresented = true;
        }

【讨论】：

【解决方案3】：

如果您想显示图标并点击它以导航到母版页。我们应该嵌入一个 NavigationPage 来包装您的 ContentPage，例如：

<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <ContentPage>
                <ContentPage.Content>

                </ContentPage.Content>
            </ContentPage>
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>

实际上我们可以在母版页中显示图标，这是我的完整代码供您参考：

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MasterDetailDemo.MyMasterDetailPage"
             xmlns:pages="clr-namespace:MasterDetailDemo">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" Title="Master" Icon="Menu Icon.png">

        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <ContentPage>
                    <ContentPage.Content>
                       ...//add your control
                    </ContentPage.Content>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

【讨论】：