对于我的应用程序,我想实现汉堡包/弹出菜单的,有不同的项目取决于当前活动的视图。然而,似乎唯一的方法,我实现这样一个菜单是在 shell ,我(据我所知)没有能力重新定义的项目,从一个不同的页面。有没有人知道如何在shell的约束之外实现这样一个菜单?类似的问题似乎已经被问过here了。然而,公认的答案并不能真正满足我对汉堡菜单的需求,而只是用ToolbarItem代替它。
xkrw2x1b1#
我喜欢从头开始制作模仿默认功能的控件,这对我的学习有好处,所以这里有一个 * 基本 * 的入门程序。据我所知,你想要一个没有shell的汉堡包弹出式菜单。所以,从默认的MAUI项目中,首先删除AppShell文件,并将MainPage(而不是AppShell)作为主页面。
AppShell
MainPage
public App() { InitializeComponent(); MainPage = new MainPage(); }
字符串相对于MainPage的默认MAUI xaml,您需要一个汉堡包按钮,一个半透明的灰色覆盖层,以及一个菜单项列表。要“显示弹出窗口”,请使用TranslateTo(动画的主要成分)使覆盖层可见并简化菜单堆栈。反转该过程以隐藏它。此面板显示覆盖层和菜单是否可见。
TranslateTo
的数据
public partial class MainPage : ContentPage { private async void ShowFlyout(object sender, EventArgs e) { Overlay.IsVisible = true; await Flyout.TranslateTo(0, 0, 250, Easing.SinInOut); } private async void HideFlyout(object sender, EventArgs e) { await Flyout.TranslateTo(-250, 0, 250, Easing.SinInOut); Overlay.IsVisible = false; } private void OnMenuItemTap(object sender, TappedEventArgs e) { if(e.Parameter is string text) { switch (text) { case "Flights": break; case "Beach Activities": break; case "Mail": break; case "Photos": break; case "Awards": break; } } HideFlyout(sender, e); } private void OnOverlayTap(object sender, TappedEventArgs e) => HideFlyout(sender, e); }
型
MainPage.xaml
原始的MAUI xaml现在位于网格的第1行,Overlay和Flyout分别位于第1行和第2行。"“菜单位于网格第0行。示例菜单项使用随机Unicode字形表示Label文本:、。📸🌞
Overlay
Flyout
Label
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="faux_shell_hamburger.MainPage"> <ContentPage.Resources> <ResourceDictionary> <Style x:Key="IconLabelStyle" TargetType="Label"> <Setter Property="FontSize" Value="Medium" /> <Setter Property="WidthRequest" Value="50" /> <Setter Property="VerticalTextAlignment" Value="Center" /> <Setter Property="HorizontalTextAlignment" Value="Center" /> <Setter Property="TextColor" Value="{StaticResource Secondary}" /> <Setter Property="BackgroundColor" Value="{StaticResource Primary}" /> </Style> <Style x:Key="LabelStyle" TargetType="Label"> <Setter Property="VerticalTextAlignment" Value="Center" /> <Setter Property="Padding" Value="5,0" /> <Setter Property="FontSize" Value="Medium" /> </Style> </ResourceDictionary> </ContentPage.Resources> <ScrollView> <Grid RowDefinitions="50,*"> <Button Text="☰" FontSize="Medium" CornerRadius="0" HorizontalOptions="Start" WidthRequest="50" TextColor="{StaticResource Primary}" BackgroundColor="{StaticResource Secondary}" Clicked="ShowFlyout"/> <VerticalStackLayout Grid.Row="1" Padding="30,0" Spacing="25"> <Image Source="dotnet_bot.png" HeightRequest="185" Aspect="AspectFit" SemanticProperties.Description="dot net bot in a race car number eight" /> <Label Text="Hello, World!" Style="{StaticResource Headline}" SemanticProperties.HeadingLevel="Level1" /> <Label Text="Welcome to .NET Multi-platform App UI" Style="{StaticResource SubHeadline}" SemanticProperties.HeadingLevel="Level2" SemanticProperties.Description="Welcome to dot net Multi platform App U I" /> <Button x:Name="CounterBtn" Text="Click me" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Fill" /> </VerticalStackLayout> <Frame x:Name="Overlay" IsVisible="false" Grid.Row="1" BackgroundColor="DarkGray" Opacity="0.8"> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="OnOverlayTap"/> </Frame.GestureRecognizers> </Frame> <VerticalStackLayout x:Name="Flyout" WidthRequest="250" HorizontalOptions="Start" Spacing="2" Grid.Row="1" BackgroundColor="WhiteSmoke" TranslationX="-250"> <HorizontalStackLayout HorizontalOptions="Start" HeightRequest="50" > <Label Text="✈" Style="{StaticResource IconLabelStyle}"/> <Label Text="Flights" Style="{StaticResource LabelStyle}"/> <HorizontalStackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="OnMenuItemTap" CommandParameter="Flights"/> </HorizontalStackLayout.GestureRecognizers> </HorizontalStackLayout> <HorizontalStackLayout HorizontalOptions="Start" HeightRequest="50" > <Label Text="🌞" Style="{StaticResource IconLabelStyle}"/> <Label Text="Beach Activities" Style="{StaticResource LabelStyle}"/> <HorizontalStackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="OnMenuItemTap" CommandParameter="Beach Activities"/> </HorizontalStackLayout.GestureRecognizers> </HorizontalStackLayout> <HorizontalStackLayout HorizontalOptions="Start" HeightRequest="50"> <Label Text="✉" Style="{StaticResource IconLabelStyle}"/> <Label Text="Mail" Style="{StaticResource LabelStyle}"/> <HorizontalStackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="OnMenuItemTap" CommandParameter="Mail"/> </HorizontalStackLayout.GestureRecognizers> </HorizontalStackLayout> <HorizontalStackLayout HorizontalOptions="Start" HeightRequest="50"> <Label Text="📸" Style="{StaticResource IconLabelStyle}"/> <Label Text="Photos" Style="{StaticResource LabelStyle}"/> <HorizontalStackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="OnMenuItemTap" CommandParameter="Photos"/> </HorizontalStackLayout.GestureRecognizers> </HorizontalStackLayout> <HorizontalStackLayout HorizontalOptions="Start" HeightRequest="50"> <Label Text="🏆" Style="{StaticResource IconLabelStyle}"/> <Label Text="Awards" Style="{StaticResource LabelStyle}"/> <HorizontalStackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="OnMenuItemTap" CommandParameter="Awards"/> </HorizontalStackLayout.GestureRecognizers> </HorizontalStackLayout> </VerticalStackLayout> </Grid> </ScrollView> </ContentPage>
型现在你可以自己设计你的应用程序的导航,而不需要AppShell的帮助,但是至少你知道如何在需要的时候做一个基本的“抽屉”动作。
1条答案
按热度按时间xkrw2x1b1#
我喜欢从头开始制作模仿默认功能的控件,这对我的学习有好处,所以这里有一个 * 基本 * 的入门程序。据我所知,你想要一个没有shell的汉堡包弹出式菜单。所以,从默认的MAUI项目中,首先删除
AppShell
文件,并将MainPage
(而不是AppShell
)作为主页面。字符串
相对于MainPage的默认MAUI xaml,您需要一个汉堡包按钮,一个半透明的灰色覆盖层,以及一个菜单项列表。要“显示弹出窗口”,请使用
TranslateTo
(动画的主要成分)使覆盖层可见并简化菜单堆栈。反转该过程以隐藏它。此面板显示覆盖层和菜单是否可见。的数据
型
MainPage.xaml
原始的MAUI xaml现在位于网格的第1行,
Overlay
和Flyout
分别位于第1行和第2行。"“菜单位于网格第0行。示例菜单项使用随机Unicode字形表示Label
文本:、。📸🌞型
现在你可以自己设计你的应用程序的导航,而不需要
AppShell
的帮助,但是至少你知道如何在需要的时候做一个基本的“抽屉”动作。