Avalonia UI
首页支持GitHub 仓库English Doc
  • 👋欢迎
  • 文档
    • ⚡快速开始
      • IDE 支持
        • JetBrains Rider 设置
      • 使用 Avalonia 开发
        • Model-View-ViewModel 模式(MVVM)
        • 控件和布局
        • 数据绑定
        • 图像和动画
      • Windows
      • UserControls
      • 资产
      • 开发者工具
      • 错误和警告日志
      • 未处理的异常
      • 应用生命周期
    • 🔁数据绑定
      • 数据上下文
      • 变化通知
      • 绑定
      • 编译绑定
      • 与控件绑定
      • 转换绑定值
      • 绑定到命令
      • 绑定到任务和可观察对象
      • 使用代码进行绑定
      • 在控件模板中实现绑定
      • 绑定Classes
      • 创建和绑定到附加属性
      • Data Validation
    • 🎨样式
      • 样式
      • 选择器
      • 资源
      • 疑难解答
    • 🧰控件
      • AutoCompleteBox
      • Border
      • Buttons
        • Button
        • RepeatButton
        • RadioButton
        • ToggleButton
        • ButtonSpinner
        • SplitButton
        • ToggleSplitButton
      • Calendar
      • Canvas
      • Carousel
      • CheckBox
      • ComboBox
      • ContentControl
      • ContextMenu
      • Decorator
      • DataGrid
        • DataGridColumns
      • DatePicker
      • DockPanel
      • Expander
      • Flyouts
      • Grid
      • GridSplitter
      • Image
      • ItemsControl
      • ItemsRepeater
      • LayoutTransformControl
      • ListBox
      • MaskedTextBox
      • Menu
      • NativeMenu
      • NumericUpDown
      • Panel
      • ProgressBar
      • RelativePanel
      • ScrollBar
      • ScrollViewer
      • Separator
      • Slider
      • SplitView
      • StackPanel
      • TabControl
      • TabStrip
      • TextBlock
      • TrayIcon
      • TreeDataGrid
        • Creating a Hierarchical TreeDataGrid
        • Creating a Flat TreeDataGrid
        • TreeDataGrid column types
      • TimePicker
      • TextBox
      • ToolTip
      • TreeView
      • TransitioningContentControl
      • UserControl
      • Viewbox
      • Window
      • WrapPanel
    • 📚模板
      • 数据模板
      • 在代码中创建数据模板
      • 实现 IDataTemplate 接口
    • ✏️自定义控件
      • 控件类别
      • 定义属性
    • 🖱️输入
      • 路由事件
      • 剪贴板
      • 鼠标与触控设备
      • 快捷键
    • 🔑动画
      • 关键帧动画
      • 过渡
      • 页面过渡
    • 📐布局
      • 面板概述
      • Alignment、Margin 和 Padding
      • 创建自定义面板
    • 📦发布/分发
      • macOS
  • API 参考
    • 🗒️命名空间
      • Avalonia
      • Avalonia.Animation
        • Avalonia.Animation.Easings
        • Avalonia.Animation.Animators
      • Avalonia.Collections
      • Avalonia.Controls
      • Avalonia.Data
        • Avalonia.Data.Core.Plugins
        • Avalonia.Data.Core
        • Avalonia.Data.Converters
      • Avalonia.Diagnostics
      • Avalonia.Dialogs
  • 指南
    • 🐣基础
      • XAML 介绍
      • Code-behind
      • MVVM 架构
      • 在UI线程上操作
    • 🤿深入
      • 在树莓派上运行你的应用
      • 在树莓派上运行你的应用(使用Raspbian Lite)
      • ReactiveUI
        • 视图激活机制
        • 路由
        • 数据持久化
        • 绑定到 Sorted/Filtered 数据
    • 👩‍💻👩💻 开发人员指南
      • 🏭从源代码中构建 Avalonia
      • Avalonia 与 WPF 和 UWP 之间的比较
      • Debugging Previewer
      • Debugging the XAML compiler
      • macOS 开发
      • Release Process
      • 维护稳定的分支
  • 教程
    • 📋待办事项应用
    • 📻音乐商店应用
    • 🕸️在浏览器中运行
    • 📱为移动设备开发
  • 杂项
    • 👪社区
    • 🖥️WPF 开发者建议
    • 📋正在使用 Avalonia 的项目
    • ❔常见问题
由 GitBook 提供支持
在本页
  • If you want to customize the look&feel of the TabControl
  • Binding support
  • Reference
  • Source code

这有帮助吗?

在GitHub上编辑
  1. 文档
  2. 控件

TabControl

上一页StackPanel下一页TabStrip

最后更新于2年前

这有帮助吗?

The TabControl allows us to switch between different pages by means of tabs like the tabs in web navigators or the ribbon menu (which uses tabs) in Word Office for instance.

Here is an animation of what you can achieve :

To create this, we'll describe the entire control (TabControl) and each individual tab+page (TabItem). Here is an example :

<TabControl>
  <TabItem Header="Circle" VerticalContentAlignment="Center">
    <TextBlock Text="I am in the circle page !" HorizontalAlignment="Left" VerticalAlignment="Center"/>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <TextBlock VerticalAlignment="Center">Triangle</TextBlock>
    </TabItem.Header>
    <StackPanel>
      <TextBlock Text="I am in the triangle page ! I'll put a button to show you that each page contains what you want." HorizontalAlignment="Left" VerticalAlignment="Center"/>
      <Button>A button in the triangle page !</Button>
    </StackPanel>
  </TabItem>
  <TabItem>
    <TabItem.Header>
      <TextBlock VerticalAlignment="Center">Square</TextBlock>
    </TabItem.Header>
    <StackPanel Orientation="Horizontal">
      <TextBlock Text="Square : " HorizontalAlignment="Left" VerticalAlignment="Center"/>
      <Rectangle Fill="Blue" Width="63" Height="41"/>              
    </StackPanel>
  </TabItem>
</TabControl>

If you want to customize the look&feel of the TabControl

Let's have a look at a customized TabControl :

The grey part is the TabItem... Yes, the TabItem includes the tab AND the page associated to the tab. The tab is called the headerof the TabItem. Moreover, given the way TabControl has been implemented, tabs are in a WrapPanel. Thus, if you want to color in blue (like this is done above) the empty bar of the tabbed bar, you must change the background color of the WrapPanel of the TabControl. Here is the code used to obtain the result above (Note the workaround used to color some tabs : this is due to the way the control is implemented. It might change in the future.)

<Window.Styles>

  <Style Selector="TabControl">
    <Setter Property="Background" Value="#F0F0F0"/>
    <Setter Property="Height" Value="120"/>
  </Style>
  <Style Selector="TabControl WrapPanel">
    <Setter Property="Background" Value="#2B579A"/>
  </Style>

  <Style Selector="TabItem">
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Height" Value="34"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Background" Value="#2B579A"/>
    <Setter Property="Foreground" Value="#F0F0F0"/>
    <Setter Property="Margin" Value="0 0 0 0"/>
    <Setter Property="Padding" Value="10 0"/>
  </Style>
  <Style Selector="TabItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="#124078"/>
  </Style>

  <Style Selector="TabItem:focus">
    <Setter Property="Foreground" Value="#2B579A"/>
    <Setter Property="Margin" Value="0 0 0 0"/>
    <Setter Property="Padding" Value="10 0"/>
  </Style>
  <Style Selector="TabItem:focus /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="#f0f0f0"/>
  </Style>

  <Style Selector="TabItem:selected">
    <Setter Property="Foreground" Value="#2B579A"/>
    <Setter Property="Margin" Value="0 0 0 0"/>
    <Setter Property="Padding" Value="10 0"/>
  </Style>
  <Style Selector="TabItem:selected /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Background" Value="#f0f0f0"/>
  </Style>

</Window.Styles>

Binding support

Dynamically generated TabItems through binding are also supported. In this case bind Items property. The TabStrip header content is defined by ItemTemplate property, while TabItem's content is defined by ContentTemplate property.

The following example uses a TabItemModel array to represent two tabs. Let's first create the model.

public class TabItemModel
{
    public string Header { get; }
    public string Content { get; }
    public TabItemModel(string header, string content)
    {
        Header = header;
        Content = content;
    }
}

Create an array of two TabItemModel instances and bind it to the DataContext.

DataContext = new TabItemModel[] { 
    new TabItemModel("One", "Some content on first tab"),
    new TabItemModel("Two", "Some content on second tab"),
};

Finally create a TabControl and bind its Items property to the DataContext.

<TabControl Items="{Binding}">
    <TabControl.ItemTemplate>
      <DataTemplate>
        <TextBlock Text="{Binding Header}" />
      </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
      <DataTemplate>
        <DockPanel LastChildFill="True">
          <TextBlock Text="This is content of selected tab" DockPanel.Dock="Top" FontWeight="Bold" />
          <TextBlock Text="{Binding Content}" />
        </DockPanel>
      </DataTemplate>
    </TabControl.ContentTemplate>
  </TabControl>

Reference

Source code

🧰
TabControl
TabControl.cs