XAML Flyoutwindow/汉堡菜单可以在.NET MAUI中的shell外部实现吗?

gfttwv5a  于 11个月前  发布在  .NET
关注(0)|答案(1)|浏览(79)

对于我的应用程序,我想实现汉堡包/弹出菜单的,有不同的项目取决于当前活动的视图。然而,似乎唯一的方法,我实现这样一个菜单是在 shell ,我(据我所知)没有能力重新定义的项目,从一个不同的页面。
有没有人知道如何在shell的约束之外实现这样一个菜单?类似的问题似乎已经被问过here了。然而,公认的答案并不能真正满足我对汉堡菜单的需求,而只是用ToolbarItem代替它。

xkrw2x1b

xkrw2x1b1#

我喜欢从头开始制作模仿默认功能的控件,这对我的学习有好处,所以这里有一个 * 基本 * 的入门程序。据我所知,你想要一个没有shell的汉堡包弹出式菜单。所以,从默认的MAUI项目中,首先删除AppShell文件,并将MainPage(而不是AppShell)作为主页面。

public App()
{
    InitializeComponent();
    MainPage = new MainPage();
}

字符串
相对于MainPage的默认MAUI xaml,您需要一个汉堡包按钮,一个半透明的灰色覆盖层,以及一个菜单项列表。要“显示弹出窗口”,请使用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行,OverlayFlyout分别位于第1行和第2行。"“菜单位于网格第0行。示例菜单项使用随机Unicode字形表示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 &#10;.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的帮助,但是至少你知道如何在需要的时候做一个基本的“抽屉”动作。

相关问题