最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

关注：MAUI新生6.2-浮出控件导航Flyout-FlyoutItem/MenuItem/Header/Footer

来源：博客园

如前章所述，Shell导航框架，在UI层面，有两种导航方式，一是浮出控件导航，二是底部Tab栏导航，本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能，组成部分如下图所示：

一、Header/Footer页头和页尾设置（Header和Footer的使用方式一样）

1、通过DataTemplate设置


【资料图】

                                                                                                                            ......

2、通过控件模板ContentView设置

二、FlyoutItem浮出导航项设置

1、定义多个FlyoutItem、Title和Icon属性、隐式使用ShellContent

2、FlyoutDisplayOptions设置，是否显示项目明细条目。下图显示FlyoutDisplayOptions的设置效果，同时可以看出每个FlyoutItem都有一个对应的底部Tab栏

3、设置FlyoutItem外观方法①：内联DataTemplate。可以将Shell视为一个集合，ItemSource为浮出项，ItemTemplate为数据模板

                                                                                ......

4、设置FlyoutItem外观方法②：资源字典DataTemplate。以下为默认的数据模板，可以定义到App.xaml资源字典中，并在此基础上进行修改。

            ......

5、设置FlyoutItem外观方法③：绑定Shell的BindingContext，使用集合来完全定义

    ...                                                                                        ...

三、MenuItem菜单导航项设置

1、菜单导航设置。导航需要通过后台代码完成，可以通过事件Clicked，也可以通过命令，如下所示：

2、设置MenuItem外观的方法和FlyoutItem一样，略......

四、其它属性设置

    FlyoutIsPresented="True"     FlyoutBehavior="Flyout"     FlyoutVerticalScrollMode="Disabled"     FlyoutIcon="dotnet_bot.png"     FlyoutBackgroundColor="AliceBlue"     FlyoutBackgroundImage="dotnet_bot.png"      FlyoutBackgroundImageAspect="AspectFill"     FlyoutWidth="200"     FlyoutHeight="400"      >                                                                                                                                            ......

关键词： 在此基础上 也可以通过 进行修改