# maui开发系列

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

# xaml 布局控件

####  StackLayout

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-orientation-%E5%B8%83"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Orientation</td><td>布局方向（Vertical/Horizontal）</td></tr><tr><td>Spacing</td><td>子元素间距</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>HorizontalOptions</td><td>水平对齐方式</td></tr><tr><td>VerticalOptions</td><td>垂直对齐方式</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

#### Grid

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-rowdefinition"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>RowDefinitions</td><td>行定义（高度）</td></tr><tr><td>ColumnDefinitions</td><td>列定义（宽度）</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>RowSpacing</td><td>行间距</td></tr><tr><td>ColumnSpacing</td><td>列间距</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

```
子元素特有属性：

Grid.Row：所在行
Grid.Column：所在列
Grid.RowSpan：跨行数
Grid.ColumnSpan：跨列数
```

#### FlexLayout

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-direction-%E4%B8%BB%E8%BD%B4%E6%96%B9"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Direction</td><td>主轴方向（Row/Column）</td></tr><tr><td>Wrap</td><td>是否换行（NoWrap/Wrap/Reverse）</td></tr><tr><td>JustifyContent</td><td>主轴对齐方式</td></tr><tr><td>AlignItems</td><td>交叉轴对齐方式</td></tr><tr><td>AlignContent</td><td>多行对齐方式</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

```
子元素特有属性：

FlexLayout.Order：排序权重
FlexLayout.Grow：放大比例
FlexLayout.Shrink：缩小比例
FlexLayout.Basis：主轴初始大小
FlexLayout.AlignSelf：单独对齐方式
```

#### AbsoluteLayout

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-padding-%E5%86%85%E8%BE%B9%E8%B7%9D-m"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

```
子元素特有属性：

AbsoluteLayout.LayoutBounds：位置和尺寸（如 "x, y, width, height"）
AbsoluteLayout.LayoutFlags：尺寸和位置的解释方式（All/None/WidthProportional/HeightProportional等）
```

#### VerticalStackLayout / HorizontalStackLayout

性能更优的垂直/水平堆叠布局

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-spacing-%E5%AD%90%E5%85%83%E7%B4%A0%E9%97%B4%E8%B7%9D"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Spacing</td><td>子元素间距</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>HorizontalOptions</td><td>水平对齐方式</td></tr><tr><td>VerticalOptions</td><td>垂直对齐方式</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

#### ContentView

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-content-%E5%86%85%E9%83%A8%E5%86%85%E5%AE%B9-"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Content</td><td>内部内容</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>Margin</td><td>外边距</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr></tbody></table>

#### 通用布局属性

```
HorizontalOptions、VerticalOptions：对齐方式（Start、Center、End、Fill）
Margin、Padding：外边距、内边距
BackgroundColor：背景色
IsVisible、IsEnabled、Opacity：可见性、可用性、透明度
WidthRequest、HeightRequest：宽高请求
```

# xaml 进阶控件

####  ScrollView

**作用**：让内容可滚动（支持垂直或水平滚动）。

**常用属性：**

- `Orientation`：滚动方向（Vertical/Horizontal）
- `Content`：内部内容
- `Padding`、`Margin`、`BackgroundColor`

<div data-code="id#2753" id="bkmrk-"><div class="interactive-result-code-block no-vulns" data-keybinding-context="80"><div class="interactive-result-editor" data-keybinding-context="81" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/0#%7B%22references%22%3A%5B%5D%7D" role="code">  
</div></div></div></div>---

#### CollectionView

**作用**：高性能列表/网格布局，支持数据绑定、分组、选择等。

**常用属性：**

- `ItemsSource`：数据源
- `ItemTemplate`：单元格模板
- `ItemsLayout`：布局方式（垂直列表、水平列表、网格）
- `SelectionMode`、`SelectedItem`
- `Header`、`Footer`

<div data-code="id#2754" id="bkmrk--2"><div class="interactive-result-code-block no-vulns" data-keybinding-context="83"><div class="interactive-result-editor" data-keybinding-context="84" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/1#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3"><div aria-hidden="true" class="minimap slider-mouseover" data-mprt="9" role="presentation"><div class="minimap-slider">  
</div></div><div aria-hidden="true" class="blockDecorations-container" role="presentation">  
</div></div></div></div></div></div>#### CarouselView

**作用**：轮播图、滑动页面。

**常用属性：**

- `ItemsSource`、`ItemTemplate`
- `IsBounceEnabled`、`PeekAreaInsets`
- `Loop`、`Position`

<div data-code="id#2755" id="bkmrk--3"><div class="interactive-result-code-block no-vulns" data-keybinding-context="86"><div class="interactive-result-editor" data-keybinding-context="87" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/2#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3">  
</div></div></div></div></div>#### Frame

**作用**：带圆角、阴影的内容容器，常用于卡片、面板。

**常用属性：**

- `CornerRadius`：圆角半径
- `HasShadow`：是否有阴影
- `BorderColor`、`BackgroundColor`
- `Content`

<div data-code="id#2756" id="bkmrk--4"><div class="interactive-result-code-block no-vulns" data-keybinding-context="89"><div class="interactive-result-editor" data-keybinding-context="90" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/3#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3"><div aria-hidden="true" class="blockDecorations-container" role="presentation">  
</div></div></div></div></div></div>#### Border（.NET MAUI 新增）

**作用**：为内容添加边框和圆角。

**常用属性：**

- `Stroke`：边框颜色
- `StrokeThickness`：边框宽度
- `StrokeShape`：边框形状（圆角、椭圆等）
- `Background`、`Content`

<div data-code="id#2757" id="bkmrk--5"><div class="interactive-result-code-block no-vulns" data-keybinding-context="92"><div class="interactive-result-editor" data-keybinding-context="93" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/4#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3"><div aria-hidden="true" class="blockDecorations-container" role="presentation">  
</div></div></div></div></div></div>#### ContentPresenter

**作用**：用于自定义控件模板时占位显示内容。

**常用属性：**

- `Content`：要显示的内容

<div data-code="id#2758" id="bkmrk--6"><div class="interactive-result-code-block no-vulns" data-keybinding-context="95"><div class="interactive-result-editor" data-keybinding-context="96" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/5#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3">  
</div></div></div></div></div><div data-code="id#2760" id="bkmrk--7"><div class="interactive-result-code-block no-vulns" data-keybinding-context="101"><div class="interactive-result-editor" data-keybinding-context="102" data-mode-id="xml"><div class="monaco-editor no-user-select  showUnused showDeprecated vs-dark" data-uri="vscode-chat-code-block://a7761d3c-b24a-4d8a-917b-d035fc0ba5c5/response_96b1d8da-f4a9-4784-806e-369932c0a213/7#%7B%22references%22%3A%5B%5D%7D" role="code"><div class="overflow-guard" data-mprt="3"><div aria-hidden="true" class="blockDecorations-container" role="presentation">  
</div></div></div></div></div></div>#### Expander

**作用**：可展开/收起的内容区域。

# xaml 视图控件

####  1. Label

```
<Label
    Text="文本内容"                  <!-- 显示文本 -->
    TextColor="Red"                 <!-- 字体颜色 -->
    FontSize="18"                   <!-- 字体大小 -->
    FontAttributes="Bold,Italic"    <!-- 字体样式：Bold/Italic/None -->
    FontFamily="Microsoft YaHei"    <!-- 字体名称 -->
    HorizontalTextAlignment="Center"<!-- 水平对齐：Start/Center/End -->
    VerticalTextAlignment="Center"  <!-- 垂直对齐 -->
    LineBreakMode="WordWrap"        <!-- 换行模式 -->
    MaxLines="2"                    <!-- 最大行数 -->
    CharacterSpacing="2"            <!-- 字符间距 -->
    Padding="5"                     <!-- 内边距 -->
    Margin="10"                     <!-- 外边距 -->
    BackgroundColor="LightYellow"   <!-- 背景色 -->
    Opacity="0.8"                   <!-- 透明度 -->
    IsVisible="True"                <!-- 是否可见 -->
    AutomationId="Label1"           <!-- 自动化测试ID -->
    x:Name="MyLabel"                <!-- 控件名称 -->
    TextDecorations="Underline,Strikethrough" <!-- 下划线/删除线 -->
    />
```

#### 2. Entry

```
<Entry
    Text="{Binding UserName, Mode=TwoWay}" <!-- 输入内容，支持MVVM双向绑定 -->
    Placeholder="请输入用户名"              <!-- 占位符 -->
    IsPassword="True"                      <!-- 是否密码框 -->
    Keyboard="Email"                       <!-- 键盘类型：Default/Numeric/Email/Chat/Telephone/Url -->
    MaxLength="20"                         <!-- 最大长度 -->
    IsReadOnly="False"                     <!-- 是否只读 -->
    TextColor="Black"                      <!-- 输入文字颜色 -->
    FontSize="16"                          <!-- 字体大小 -->
    FontFamily="Arial"                     <!-- 字体名称 -->
    HorizontalTextAlignment="Start"        <!-- 水平对齐 -->
    VerticalTextAlignment="Center"         <!-- 垂直对齐 -->
    ClearButtonVisibility="WhileEditing"   <!-- 清除按钮显示方式 -->
    ReturnType="Done"                      <!-- 回车键类型 -->
    ReturnCommand="{Binding DoneCommand}"  <!-- 回车键命令 -->
    CursorPosition="0"                     <!-- 光标位置 -->
    SelectionLength="0"                    <!-- 选中文本长度 -->
    Margin="10"
    Padding="5"
    BackgroundColor="White"
    IsEnabled="True"
    Opacity="1"
    x:Name="MyEntry"
    />
```

####  3. Editor

```
<Editor
    Text="{Binding Description, Mode=TwoWay}" <!-- 多行文本内容 -->
    Placeholder="请输入描述"
    AutoSize="TextChanges"                    <!-- 自动高度调整：Disabled/TextChanges -->
    IsReadOnly="False"
    MaxLength="200"
    TextColor="Gray"
    FontSize="14"
    FontFamily="Arial"
    BackgroundColor="WhiteSmoke"
    Margin="10"
    Padding="5"
    IsEnabled="True"
    Opacity="1"
    x:Name="MyEditor"
    />
```

####  4. Button

```
<Button
    Text="提交"                              <!-- 按钮文字 -->
    Command="{Binding SubmitCommand}"        <!-- MVVM命令 -->
    CommandParameter="{Binding SomeValue}"   <!-- 命令参数 -->
    IsEnabled="True"                         <!-- 是否可用 -->
    BackgroundColor="DodgerBlue"             <!-- 背景色 -->
    TextColor="White"                        <!-- 文字颜色 -->
    FontSize="18"
    FontAttributes="Bold"
    CornerRadius="8"                         <!-- 圆角半径 -->
    BorderColor="Gray"                       <!-- 边框颜色 -->
    BorderWidth="2"                          <!-- 边框宽度 -->
    ImageSource="icon.png"                   <!-- 按钮图标 -->
    Padding="10"
    Margin="10"
    Opacity="1"
    x:Name="MyButton"
    />
```

####  5. Image

```
<Image
    Source="dotnet_bot.png"                  <!-- 图片路径或URL -->
    Aspect="AspectFill"                      <!-- 填充方式：AspectFit/AspectFill/Fill/Center -->
    IsAnimationPlaying="True"                <!-- GIF动画播放 -->
    Opacity="0.9"
    IsVisible="True"
    HeightRequest="100"
    WidthRequest="100"
    Margin="5"
    x:Name="MyImage"
    />
```

####  6. CollectionView

```
<CollectionView
    ItemsSource="{Binding Items}"            <!-- 数据源 -->
    ItemTemplate="{StaticResource MyTemplate}"<!-- 单元格模板 -->
    ItemsLayout="VerticalList"               <!-- 布局方式：VerticalList/HorizontalList/VerticalGrid/HorizontalGrid -->
    SelectionMode="Single"                   <!-- 选择模式：None/Single/Multiple -->
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}" <!-- 选中项 -->
    Header="列表头部"
    Footer="列表底部"
    IsGrouped="False"
    EmptyView="暂无数据"
    Margin="10"
    x:Name="MyCollectionView"
    />
```

####  7. Picker

```
<Picker
    ItemsSource="{Binding Options}"          <!-- 选项数据源 -->
    SelectedItem="{Binding SelectedOption, Mode=TwoWay}" <!-- 选中项 -->
    SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" <!-- 选中索引 -->
    Title="请选择"
    TextColor="Black"
    FontSize="16"
    Margin="10"
    x:Name="MyPicker"
    />
```

#### 8. Switch

```
<Switch
    IsToggled="{Binding IsEnabled, Mode=TwoWay}" <!-- 开关状态 -->
    OnColor="Green"                              <!-- 打开时颜色 -->
    ThumbColor="White"                           <!-- 滑块颜色 -->
    IsEnabled="True"
    Margin="10"
    x:Name="MySwitch"
    />
```

####  9. CheckBox

```
<CheckBox
    IsChecked="{Binding IsChecked, Mode=TwoWay}" <!-- 是否选中 -->
    Color="DodgerBlue"                           <!-- 选中颜色 -->
    IsEnabled="True"
    Margin="10"
    x:Name="MyCheckBox"
    />
```

####  10. RadioButton

```
<RadioButton
    Content="选项A"                              <!-- 显示内容 -->
    GroupName="Group1"                           <!-- 分组名 -->
    IsChecked="{Binding IsOptionA, Mode=TwoWay}" <!-- 是否选中 -->
    Color="Orange"
    IsEnabled="True"
    Margin="10"
    x:Name="MyRadioButton"
    />
```

####  11. Slider

```
<Slider
    Minimum="0"                                  <!-- 最小值 -->
    Maximum="100"                                <!-- 最大值 -->
    Value="{Binding Progress, Mode=TwoWay}"      <!-- 当前值 -->
    ThumbColor="Red"                             <!-- 滑块颜色 -->
    MinimumTrackColor="Blue"                     <!-- 已滑动部分颜色 -->
    MaximumTrackColor="Gray"                     <!-- 未滑动部分颜色 -->
    IsEnabled="True"
    Margin="10"
    x:Name="MySlider"
    />
```

####  12. ProgressBar

```
<ProgressBar
    Progress="{Binding ProgressValue}"           <!-- 进度0~1 -->
    ProgressColor="Green"
    BackgroundColor="LightGray"
    Margin="10"
    x:Name="MyProgressBar"
    />
```

####  13. ActivityIndicator

```
<ActivityIndicator
    IsRunning="{Binding IsBusy}"                 <!-- 是否显示动画 -->
    Color="Purple"
    IsVisible="{Binding IsBusy}"
    Margin="10"
    x:Name="MyActivityIndicator"
    />
```

####  14. DatePicker

```
<DatePicker
    Date="{Binding SelectedDate, Mode=TwoWay}"   <!-- 当前日期 -->
    MinimumDate="2020-01-01"
    MaximumDate="2030-12-31"
    Format="yyyy-MM-dd"
    TextColor="Black"
    Margin="10"
    x:Name="MyDatePicker"
    />
```

####  15. TimePicker

```
<TimePicker
    Time="{Binding SelectedTime, Mode=TwoWay}"   <!-- 当前时间 -->
    Format="HH:mm"
    TextColor="Black"
    Margin="10"
    x:Name="MyTimePicker"
    />
```

####  16. WebView

```
<WebView
    Source="{Binding WebUrl}"                    <!-- 网页地址 -->
    HeightRequest="300"
    WidthRequest="400"
    Margin="10"
    x:Name="MyWebView"
    />


navigated nagigating
```

####  17. Frame

```
<Frame
    CornerRadius="10"                            <!-- 圆角半径 -->
    HasShadow="True"                             <!-- 是否有阴影 -->
    BorderColor="Gray"
    BackgroundColor="White"
    Padding="10"
    Margin="10"
    x:Name="MyFrame">
    <Label Text="卡片内容"/>
</Frame>
```

####  18. Border（MAUI 新增）

```
<Border
    Stroke="Red"                                 <!-- 边框颜色 -->
    StrokeThickness="2"                          <!-- 边框宽度 -->
    StrokeShape="RoundRectangle 8"               <!-- 边框形状 -->
    Background="LightYellow"
    Margin="10"
    x:Name="MyBorder">
    <Label Text="带边框内容"/>
</Border>
```

####  19. Expander

```
<Expander
    IsExpanded="{Binding IsExpanded, Mode=TwoWay}" <!-- 是否展开 -->
    Margin="10"
    x:Name="MyExpander">
    <Expander.Header>
        <Label Text="点击展开"/>
    </Expander.Header>
    <Label Text="这是可展开的内容"/>
</Expander>
```

#### 20. 通用属性（所有控件都可用）

<table id="bkmrk-%E5%B1%9E%E6%80%A7%E5%90%8D-%E8%AF%B4%E6%98%8E-margin-%E5%A4%96%E8%BE%B9%E8%B7%9D-pa"><thead><tr><th>属性名</th><th>说明</th></tr></thead><tbody><tr><td>Margin</td><td>外边距</td></tr><tr><td>Padding</td><td>内边距</td></tr><tr><td>BackgroundColor</td><td>背景色</td></tr><tr><td>Opacity</td><td>透明度</td></tr><tr><td>IsVisible</td><td>是否可见</td></tr><tr><td>IsEnabled</td><td>是否可用</td></tr><tr><td>WidthRequest</td><td>宽度请求</td></tr><tr><td>HeightRequest</td><td>高度请求</td></tr><tr><td>HorizontalOptions</td><td>水平对齐方式</td></tr><tr><td>VerticalOptions</td><td>垂直对齐方式</td></tr><tr><td>AutomationId</td><td>自动化测试ID</td></tr><tr><td>x:Name</td><td>控件名称</td></tr></tbody></table>