# 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

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