# TabControl 使用文档
本文档介绍 AtomUI TabControl 控件家族的常见使用方式，包含 TabControl 系列（带内容面板）和 TabStrip 系列（仅标签栏）。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/Navigation/TabControlShowCase.axaml`
---
## 前置准备
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
```csharp
using AtomUI.Desktop.Controls;
```
---
## 基本用法
### 线条式标签页
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
```
### 卡片式标签页
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
```
---
## 带图标的标签
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
```
---
## 禁用标签
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
```
---
## 标签居中
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
```
---
## 四方向布局
```xml
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
Content of Tab Pane 1
Content of Tab Pane 2
```
---
## 三种尺寸
```xml
...
...
...
```
---
## 可关闭标签
### 全局启用关闭按钮
```xml
Content 1
Content 2（不可关闭）
Content 3
```
### 处理关闭事件
```csharp
myTabControl.Closing += (sender, args) =>
{
// 阻止关闭
if (args.TabItem.Header?.ToString() == "重要标签")
{
args.Cancel = true;
}
};
myTabControl.Closed += (sender, args) =>
{
// 标签已关闭
Console.WriteLine($"Closed: {args.TabItem.Header}");
};
```
---
## 添加标签按钮（仅卡片式）
```xml
Content 1
Content 2
```
```csharp
// Code-behind
AddTabDemoTabControl.AddTabRequest += (sender, args) =>
{
var newTab = new TabItem
{
Header = $"New Tab {AddTabDemoTabControl.ItemCount + 1}",
Content = $"Content {AddTabDemoTabControl.ItemCount + 1}"
};
AddTabDemoTabControl.Items.Add(newTab);
};
```
---
## 头部额外内容
```xml
Start extra action
End extra action
Content 1
Content 2
```
---
## 数据绑定（ItemsSource）
### 使用 ITabItemData 接口
```csharp
public class MyTabItemData : ITabItemData
{
public object? Header { get; init; }
public PathIcon? Icon { get; init; }
public PathIcon? CloseIcon { get; init; }
public bool IsEnabled { get; init; } = true;
public bool IsClosable { get; init; }
public bool IsAutoHideCloseButton { get; init; }
// 额外的内容属性
public string Content { get; init; } = "";
}
```
```xml
```
### 使用 TabItemData 默认实现
```csharp
var items = new ObservableCollection
{
new() { Header = "Tab 1", IsClosable = true },
new() { Header = "Tab 2", IsEnabled = false },
new() { Header = "Tab 3", Icon = new AppleOutlined() }
};
```
---
## TabStrip 系列（仅标签栏）
### 基本用法
```xml
Tab 1
Tab 2
Tab 3
```
### 卡片式标签栏
```xml
Tab 1
Tab 2
```
### 配合内容区域使用
TabStrip 不含内容面板，需要自行管理内容：
```xml
Tab 1
Tab 2
Tab Content
```
### TabStrip 数据绑定
```xml
```
---
## 编程方式关闭标签
```csharp
// 获取 TabItem 并关闭
if (myTabControl.ContainerFromIndex(2) is TabItem tabItem)
{
bool closed = myTabControl.CloseTab(tabItem);
}
```