# xaml 页面控件

#### 通用属性（所有页面都可用）

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-automationid-"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>AutomationId</td><td>自动化测试标识</td></tr><tr><td>StyleClass</td><td>样式类</td></tr><tr><td>Resources</td><td>资源集合（样式、颜色等）</td></tr><tr><td>BindingContext</td><td>数据上下文</td></tr><tr><td>ToolbarItems</td><td>工具栏按钮集合</td></tr><tr><td>Visual</td><td>视觉样式（如 Material）</td></tr><tr><td>FlowDirection</td><td>布局方向（LTR/RTL）</td></tr><tr><td>IsBusy</td><td>忙碌状态</td></tr><tr><td>InputTransparent</td><td>是否响应输入</td></tr><tr><td>Opacity</td><td>透明度</td></tr><tr><td>IsEnabled</td><td>是否可用</td></tr><tr><td>IsVisible</td><td>是否可见</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>WidthRequest/HeightRequest</td><td>宽高请求</td></tr><tr><td>MinimumWidthRequest/MinimumHeightRequest</td><td>最小宽高</td></tr><tr><td>MaximumWidthRequest/MaximumHeightRequest</td><td>最大宽高</td></tr><tr><td>AnchorX/AnchorY</td><td>锚点</td></tr><tr><td>Rotation/RotationX/RotationY</td><td>旋转</td></tr><tr><td>Scale</td><td>缩放</td></tr><tr><td>TranslationX/TranslationY</td><td>平移</td></tr></tbody></table>

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