英文:
Net MAUI Shell Menu with collapse inside sidebar
问题
你好，我想知道是否可以在侧边栏中实现带有选项的可折叠菜单项。
就像这样：
我尝试使用menuflyoutitem，但它只适用于选项卡式菜单，我需要一个像图片中那样的菜单。
英文:
Hi i was wondering if it's possible to implement a collapsable menuitem with options inside the side bar.
like this:
I've tried using menuflyoutitem but it is only for tabbed menu I need a menu just like the one in the picture
答案1
得分: 1
为此，您可以创建一个动画Flyout菜单来显示隐藏在主内容后面的菜单。
有关更多信息，请参考Andrew的文章《Fancy Flyout菜单》1。虽然文章是基于Xamarin的，但在MAUI中实现基本相同。
Fancy菜单利用ContentPage和ContentView的组合来创建Flyout控件，而不是使用内置控件。我们的控件将分为3部分：
- 容器 - Fancy菜单的入口点
- 菜单 - 隐藏的菜单
- 主内容 - 最初呈现的页面
在这里，我们只需将要添加到菜单页面的视图添加到菜单页面即可。
菜单页面是一个标准的ContentView，用于显示隐藏在主内容后面的菜单。由于容器完成了所有繁重的工作，所以您只需要在此文件中实现菜单即可。它将被正确样式化以占用正确的宽度，而不会溢出到主内容上。
您可以参考以下代码：
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
BackgroundColor="SkyBlue"
x:Class="FancyMenu.MenuPage">
<ContentView.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid>
<!-- 省略部分内容 -->
</Grid>
</ContentView>
结果如下：
英文:
For this, you can create an animating Flyout Menu to display the menu that hides behind the Main Content.
For more information, you can refer to article Fancy Flyout Menu from Andrew. Although the article is based on Xamarin, the implementation is basically the same in MAUI.
The Fancy Menu utilizes a combination of ContentPage's and ContentView's to create the Flyout control instead of using the built in controls. Our control will be broken into 3 parts
- Container - Entry point of the Fancy Menu
- Menu - The hidden menu
- MainContent - The page that is initially rendered
Here,we just need to add the views we want to the Menu page.
The Menu page is a standard ContentView that displays the menu that hides behind the Main Content. Since the Container does all the heavy lifting all you need to do in this file is implement your menu. It will be styled correctly to take up the correct width and not overflow onto the Main Content.
You can refer to the following code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
BackgroundColor="SkyBlue"
x:Class="FancyMenu.MenuPage">
<ContentView.Resources>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Padding="{OnPlatform Android='50, 25', iOS='50, 50, 50, 25'}">
<Label Text="Fancy Menu"
TextColor="White"
FontSize="30"
HorizontalOptions="CenterAndExpand"/>
<BoxView BackgroundColor="White" HeightRequest="1" HorizontalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Grid.Row="1" Padding="10, 0, 10, 25">
<Label Text="This is the fancy menu where youc an customize your control just like any page. I prefer to place header or profile content above the buttons, which is what this space is designed for." />
</StackLayout>
<Grid Grid.Row="2" Padding="25, 0, 25, 25" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="6*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Spacing="20"
VerticalOptions="CenterAndExpand">
<StackLayout.Resources>
<ResourceDictionary>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="Lavender" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Padding" Value="15, 10" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Frame>
<Label Text="Home" />
</Frame>
<Frame>
<!--<Label Text="Settings" />-->
<Picker x:Name="picker"
Title="DropDown Menu">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>jQuery</x:String>
<x:String>Script</x:String>
<x:String>Net</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</Frame>
<Frame>
<Label Text="Contact" />
</Frame>
<Frame>
<Label Text="About" />
</Frame>
</StackLayout>
<StackLayout Grid.Row="1" VerticalOptions="EndAndExpand">
<Label Text="Hi" />
<Label Text="Open Source Software" />
</StackLayout>
</Grid>
</Grid>
</ContentView>
The result is:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论