xaml 页面控件
通用属性(所有页面都可用)
属性名 |
说明 |
AutomationId |
自动化测试标识 |
StyleClass |
样式类 |
Resources |
资源集合(样式、颜色等) |
BindingContext |
数据上下文 |
ToolbarItems |
工具栏按钮集合 |
Visual |
视觉样式(如 Material) |
FlowDirection |
布局方向(LTR/RTL) |
IsBusy |
忙碌状态 |
InputTransparent |
是否响应输入 |
Opacity |
透明度 |
IsEnabled |
是否可用 |
IsVisible |
是否可见 |
Margin |
外边距 |
WidthRequest/HeightRequest |
宽高请求 |
MinimumWidthRequest/MinimumHeightRequest |
最小宽高 |
MaximumWidthRequest/MaximumHeightRequest |
最大宽高 |
AnchorX/AnchorY |
锚点 |
Rotation/RotationX/RotationY |
旋转 |
Scale |
缩放 |
TranslationX/TranslationY |
平移 |
ContentPage 所有常用属性及注释
<ContentPage
x:Class="Demo1.Pages.FullContentPage"
Title="页面标题" <!-- 页面标题 -->
BackgroundColor="AliceBlue" <!-- 页面背景色 -->
Padding="20,40,20,20" <!-- 页面内边距 -->
IconImageSource="icon.png" <!-- 页面图标(用于 TabbedPage/FlyoutPage/Shell) -->
FlowDirection="LeftToRight" <!-- 布局方向,支持国际化 -->
IsBusy="False" <!-- 是否显示忙碌指示器 -->
Visual="Material" <!-- 视觉风格,Material/Default -->
AutomationId="ContentPage1" <!-- 自动化测试ID -->
StyleClass="mainPage" <!-- 样式类 -->
Shell.TabBarIsVisible="True" <!-- Shell下:是否显示底部TabBar -->
Shell.NavBarIsVisible="True" <!-- Shell下:是否显示顶部导航栏 -->
Shell.BackgroundColor="LightGray" <!-- Shell下:页面背景色 -->
Shell.TitleColor="DarkBlue" <!-- Shell下:标题颜色 -->
Shell.DisabledColor="Gray" <!-- Shell下:禁用颜色 -->
Shell.TabBarBackgroundColor="White" <!-- Shell下:TabBar背景色 -->
Shell.TabBarTitleColor="Black" <!-- Shell下:TabBar标题颜色 -->
Shell.TabBarUnselectedColor="LightGray" <!-- Shell下:未选中Tab颜色 -->
Shell.TabBarForegroundColor="DodgerBlue" <!-- Shell下:TabBar前景色 -->
Shell.TabBarDisabledColor="Gray" <!-- Shell下:TabBar禁用色 -->
Shell.TabBarShadowColor="LightGray" <!-- Shell下:TabBar阴影色 -->
>
<StackLayout>
<Label Text="全部属性自定义示例" />
</StackLayout>
</ContentPage>
FlyoutPage 所有常用属性及注释
<FlyoutPage
x:Class="Demo1.AppShell"
FlyoutLayoutBehavior="Split" <!-- 菜单行为:Split/Popover/Locked/Default -->
IsPresented="False" <!-- 菜单是否展开 -->
FlyoutIcon="menu.png" <!-- 菜单图标 -->
FlyoutBackgroundColor="LightGray" <!-- 菜单背景色 -->
FlyoutWidth="300" <!-- 菜单宽度 -->
>
<FlyoutPage.Flyout>
<ContentPage Title="菜单" IconImageSource="menu.png">
<StackLayout>
<Label Text="菜单头部" />
</StackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
FlyoutHeader:菜单头部内容
FlyoutFooter:菜单底部内容
NavigationPage 所有常用属性及注释
<NavigationPage
x:Class="Demo1.NavigationRoot"
BarBackgroundColor="DodgerBlue" <!-- 顶部导航栏背景色 -->
BarTextColor="White" <!-- 顶部导航栏文字颜色 -->
TitleIconImageSource="navicon.png" <!-- 标题栏图标 -->
Shell.NavBarIsVisible="True" <!-- Shell下:是否显示导航栏 -->
Shell.NavBarHasShadow="True" <!-- Shell下:导航栏是否有阴影 -->
Shell.NavBarBackgroundColor="LightBlue" <!-- Shell下:导航栏背景色 -->
Shell.NavBarTitleColor="DarkBlue" <!-- Shell下:导航栏标题颜色 -->
Shell.NavBarDisabledColor="Gray" <!-- Shell下:导航栏禁用色 -->
Shell.NavBarForegroundColor="DodgerBlue" <!-- Shell下:导航栏前景色 -->
Shell.NavBarShadowColor="LightGray" <!-- Shell下:导航栏阴影色 -->
>
<x:Arguments>
<local:MainPage />
</x:Arguments>
</NavigationPage>
HasNavigationBar(C# 设置):是否显示导航栏
TabbedPage 所有常用属性及注释
<TabbedPage
x:Class="Demo1.MainTabbedPage"
BarBackgroundColor="White" <!-- 选项卡栏背景色 -->
BarTextColor="Gray" <!-- 选项卡栏文字颜色 -->
SelectedTabColor="DodgerBlue" <!-- 选中标签颜色 -->
UnselectedTabColor="LightGray" <!-- 未选中标签颜色 -->
Shell.TabBarIsVisible="True" <!-- Shell下:是否显示TabBar -->
Shell.TabBarBackgroundColor="White" <!-- Shell下:TabBar背景色 -->
Shell.TabBarTitleColor="Black" <!-- Shell下:TabBar标题颜色 -->
Shell.TabBarUnselectedColor="LightGray" <!-- Shell下:未选中Tab颜色 -->
Shell.TabBarForegroundColor="DodgerBlue" <!-- Shell下:TabBar前景色 -->
Shell.TabBarDisabledColor="Gray" <!-- Shell下:TabBar禁用色 -->
Shell.TabBarShadowColor="LightGray" <!-- Shell下:TabBar阴影色 -->
>
<ContentPage Title="首页" IconImageSource="home.png" />
<ContentPage Title="发现" IconImageSource="discover.png" />
<ContentPage Title="我的" IconImageSource="user.png" />
</TabbedPage>
其它可用属性:
CurrentPage:当前选中页面(C# 访问)
每个子页面可自定义 Title、IconImageSource
Shell 介绍及与页面的关系
Shell 是 .NET MAUI 推荐的导航和应用结构容器,支持 Flyout(侧边栏)、TabBar(底部标签)、Stack(分层导航)等多种页面结构组合。
Shell 与四大页面的关系
Shell 可以包含 FlyoutPage、TabbedPage、NavigationPage、ContentPage。
Shell 通过 <Shell> 标签定义导航结构,页面通过 Route 路由注册。
Shell 属性(如 Shell.TabBarIsVisible)只有在 Shell 结构下才生效。
Shell 支持 URI 路由导航、全局样式、统一导航栏/TabBar配置。
<Shell
x:Class="Demo1.AppShell"
BackgroundColor="White"
TitleColor="Black"
>
<!-- 侧边栏菜单 -->
<FlyoutItem Title="主菜单" Icon="menu.png">
<!-- TabBar结构 -->
<TabBar>
<Tab Title="首页" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="发现" Icon="discover.png">
<ShellContent ContentTemplate="{DataTemplate local:DiscoverPage}" />
</Tab>
<Tab Title="我的" Icon="user.png">
<ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
</Tab>
</TabBar>
</FlyoutItem>
<!-- 其它页面 -->
<ShellContent Route="settings" ContentTemplate="{DataTemplate local:SettingsPage}" />
</Shell>
要点:
Shell 可组合 Flyout(侧边栏)、TabBar(底部标签)、Stack(分层导航)。
Shell 支持全局样式和导航栏/TabBar统一配置。
页面可通过 Shell 属性自定义在 Shell 下的表现。
推荐新项目优先使用 Shell,结构更清晰、导航更强大。
无评论