xamarin 是否可以在Shell运行时在单个菜单项中添加子菜单？

wgx48brx 于 2023-09-28 发布在 Shell

关注(0)|答案(1)|浏览(116)

我想在菜单项中添加此StackLayout并在运行时更改可见性。

<StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label Text="Shop Autographs" FontSize="14" TextColor="Black" HorizontalOptions="CenterAndExpand" Margin="0,0,20,0"/>

                    <ImageButton Source="{Binding ShopAutographsMenuIconSource}" Command="{Binding ShopAutographsMenuCommand}" HeightRequest="15" BackgroundColor="Transparent" Margin="0,0,10,0"/>
                </StackLayout>

                <StackLayout x:Name="shopAutographMenu" IsVisible="{Binding IsShopAutographMenuVisible}">
                    <Label Text="Most Popular" HorizontalOptions="StartAndExpand"/>
                    <Label Text="Shop By Category" HorizontalOptions="StartAndExpand"/>
                </StackLayout>
            </StackLayout>

xamarin

来源：https://stackoverflow.com/questions/68219789/is-it-possible-to-add-sub-menus-inside-a-single-menu-item-at-runtime-in-shell

1条答案

按热度按时间

vsmadaxz1#

根据你的描述，你想在Shell中添加一个子菜单项.
首先，我创建DataTemplateSelector，检测菜单项标题是Header还是其他，如果是Header，选择NavigationHeaderTemplate，然后选择NavigationItemTemplate。

public class FlyoutItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate NavigationHeaderTemplate { get; set; }
    public DataTemplate NavigationItemTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is ShellGroupItem && ((ShellGroupItem)item).Title == "Header")
        {
            // Make sure a header item is not clickable.
            ((ShellGroupItem)item).IsEnabled = false;
            return NavigationHeaderTemplate;
        }
        else
            return NavigationItemTemplate;
    }
}

然后将常规ItemTemplate、新Header模板和FlyoutItemTemplateSelector控件添加到AppShell.xaml中的Shell.resources标记中：

<DataTemplate x:Key="FlyoutItemTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.25*" />
                    <ColumnDefinition Width="0.75*" />
                </Grid.ColumnDefinitions>
                <Label
                    Margin="20,0,0,0"
                    FontSize="30"
                    HeightRequest="45"
                    Text="{Binding Icon}"
                    TextColor="Black"
                    VerticalTextAlignment="Center" />
                <Label
                    Grid.Column="1"
                    Text="{Binding Title}"
                    TextColor="Black"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>

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

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

将Shell.ItemTemplate添加到主Shell标记中。

<Shell
x:Class="shellsample.AppShell"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:shellsample"
xmlns:local="clr-namespace:shellsample.Views"
Title="shellsample"
Shell.ItemTemplate="{StaticResource FlyoutTemplateSelector}">

最后，使用FlyoutItem。

<FlyoutItem
    Title="About"
    FlyoutDisplayOptions="AsMultipleItems"
    Shell.TabBarIsVisible="False">
    <ShellContent Title="Header" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent
        Title="sub1"
        ContentTemplate="{DataTemplate local:AboutPage}"
        IsVisible="{Binding isvisible}" />
    <ShellContent
        Title="sub2"
        ContentTemplate="{DataTemplate local:AboutPage}"
        IsVisible="{Binding isvisible}" />
    <ShellContent
        Title="sub3"
        ContentTemplate="{DataTemplate local:AboutPage}"
        IsVisible="{Binding isvisible}" />

</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
    <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

public partial class AppShell : Xamarin.Forms.Shell, INotifyPropertyChanged
{    
    private bool _isvisible;
    public bool isvisible
    {
        get { return _isvisible; }
        set
        {
            _isvisible = value;
            OnPropertyChanged("isvisible");
        }
    }
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
        Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
      
        this.BindingContext = this;
    }

    private async void OnMenuItemClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//LoginPage");
     
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    protected override void OnNavigating(ShellNavigatingEventArgs args)
    {
        base.OnNavigating(args);
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        isvisible = !isvisible;
    }
}

请注意：使用Xamarin.forms版本4.8.0.1821

截图：