在 Xamarin shell 中创建嵌套导航

问题描述

我正在尝试使用 Xamarin Forms 开发 Android 应用程序。 我想要嵌套导航

Header (on tap dropdown items show)
   Item1
   Item2

从 show flyout (shell) with submenu 开始，我为此使用了大部分代码，但它不起作用

这是我添加到默认应用程序的代码

FlyoutItemTemplateSelector.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace MauiApp.Shared
{
    public class FlyoutItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate NavigationHeaderTemplate { get; set; }
        public DataTemplate NavigationItemTemplate { get; set; }

        private List<string> list = new List<string> { "Header1","Header2"};

        //There should be more than one header in shell


        protected override DataTemplate OnSelectTemplate(object item,BindableObject container)
        {
            if (item is ShellGroupItem && list.Contains(((ShellGroupItem)item).Title))
            {
                // Make sure a header item is not clickable.
                ((ShellGroupItem)item).IsEnabled = false;
                return NavigationHeaderTemplate;
            }
            else
                return NavigationItemTemplate;
        }
    }
}

AppShell.xaml

    <DataTemplate x:Key="FlyoutItemTemplate">
        <Grid>
            <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="0.25*" />
                <ColumnDeFinition Width="0.75*" />
            </Grid.ColumnDeFinitions>
            <Label Grid.Column="1"
               Text="{Binding Title}"
               TextColor="White"
               VerticalTextAlignment="Center" 
               BackgroundColor="Aqua"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="FlyoutHeaderTemplate">
        <StackLayout Orientation="Vertical">
            <Label HeightRequest="35"
               Margin="20,0"
               Text="{Binding Title}"
               TextColor="Black"
               VerticalTextAlignment="Center" >
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                </Label.GestureRecognizers>

            </Label>
        </StackLayout>
    </DataTemplate>
    <controls:FlyoutItemTemplateSelector
    x:Key="FlyoutTemplateSelector"
    NavigationHeaderTemplate="{StaticResource FlyoutHeaderTemplate}"
    NavigationItemTemplate="{StaticResource FlyoutItemTemplate}" />

    </ResourceDictionary>
</Shell.Resources>


<FlyoutItem Title="Example"  Shell.TabBarIsVisible="False" FlyoutdisplayOptions="AsMultipleItems" x:Name="example" Style="{StaticResource BaseStyle}">
    <ShellContent Title="Header1"  ContentTemplate="{DataTemplate local:AboutPage}"/>
    <ShellContent Title="Item1" IsVisible="{Binding Changed}" ContentTemplate="{DataTemplate local:AboutPage}"/>
    <ShellContent Title="Item2" IsVisible="{Binding Changed}" ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

和回溯代码

using MauiApp.viewmodels;
using MauiApp.Views;
using System;
using System.Collections.Generic;
using Xamarin.Forms;

using MauiApp.Shared;
using System.ComponentModel;

namespace MauiApp
{
    public partial class AppShell : Xamarin.Forms.Shell
    {
        Status status;
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(ItemDetailPage),typeof(ItemDetailPage));
            Routing.RegisterRoute(nameof(NewItemPage),typeof(NewItemPage));
            status = new Status();
            this.BindingContext = status;
        }
        private async void OnMenuItemClicked(object sender,EventArgs e)
        {
            await Shell.Current.GoToAsync("//LoginPage");
        }
        private void TapGestureRecognizer_Tapped(object sender,EventArgs e)
        {
            status.Changed = !status.Changed;
        }
    }
    public class Status : INotifyPropertyChanged
    {
        bool _changed = false;
        public bool Changed
        {
            get
            {
                return _changed;
            }
            set
            {
                if (_changed != value)
                {
                    _changed = value;
                    OnPropertyChanged("Changed");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
        }
    }
}

我现在得到的只是导航，将 Header1 设置为 NavigationItemTemplate 而不是 NavigationHeaderTemplate。

我的问题是：

1. 这是获得“嵌套”导航的好方法吗（如果不是更好的方法）
2. 为什么 Header 被识别为 Item 以及如何修复它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）