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，结构更清晰、导航更强大。