导航到母版页,同时单击“放置在母版详细信息页的详细信息页中的图像”



我正在使用适用于iOS应用程序的xamarin.forms中的母版详细信息页面,我在左上角放置了一个图像,现在我想在单击该图像时导航到母版页,如何使其导航。

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

在这里,我需要在单击详细信息页面中的图标时转到母版页。

需要在具有主布局的 XAML 中设置图标。只有在这里你设置图标。请查看官方 xamarin 教程

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

我做了一些解决方法,最终将其导航到主。

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

如果要显示图标并点击它以导航到母版页。我们应该嵌入一个导航页面来包装你的内容页面,如下所示:

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

相关内容

最新更新