WPF入门教程--TabControl样式

WPF TabControl 允许您将界面分成不同的区域，每个区域都可以通过单击通常位于控件顶部的选项卡标题来访问。选项卡控件通常用于 Windows 应用程序，甚至在 Windows 自己的界面中，如文件/文件夹的属性对话框等。

就像大多数其他 WPF 控件一样，TabControl 非常容易上手。这是一个非常基本的例子：












如您所见，每个选项卡都由一个TabItem元素表示，其中显示的文本由Header 属性控制。TabItem 元素来自 ContentControl 类，这意味着您可以在其中定义一个元素，如果选项卡处于活动状态（如屏幕截图所示），该元素将显示。我在这个例子中使用了一个 Label，但如果你想在选项卡内放置多个控件，只需使用其中一个带有子控件的面板。

自定义标题
再次证明，当您想要自定义选项卡的外观时，WPF 非常灵活。显然，内容可以按您喜欢的任何方式呈现，但选项卡标题也可以！Header 属性可以填充任何你喜欢的东西，我们将在下一个例子中利用它：

<TabItem.Header>




</TabItem.Header>



<TabItem.Header>




</TabItem.Header>


<TabItem.Header>




</TabItem.Header>






标记的数量可能有点多，但是一旦深入研究，您可能会看到，这一切都非常简单。每个选项卡现在都有一个 TabControl.Header 元素，其中包含一个 StackPanel，后者又包含一个 Image 和一个 TextBlock 控件。这允许我们在每个选项卡上都有一个图像以及自定义文本的颜色（我们也可以将其设为粗体、斜体或其他大小）。

控制 TabControl
有时您可能希望以编程方式控制选择哪个选项卡，或者获取有关所选选项卡的一些信息。WPF TabControl 有几个属性使这成为可能，包括 SelectedIndex 和 SelectedItem。在下一个示例中，我在第一个示例中添加了几个按钮，允许我们控制 TabControl：

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfTutorialSamples.Misc_controls
{
public partial class ControllingTheTabControlSample : Window
{
public ControllingTheTabControlSample()
{
InitializeComponent();
}

	private void btnPreviousTab_Click(object sender, RoutedEventArgs e)
	{
		int newIndex = tcSample.SelectedIndex - 1;
		if(newIndex < 0)
			newIndex = tcSample.Items.Count - 1;
		tcSample.SelectedIndex = newIndex;
	}

	private void btnNextTab_Click(object sender, RoutedEventArgs e)
	{
		int newIndex = tcSample.SelectedIndex + 1;
		if(newIndex >= tcSample.Items.Count)
			newIndex = 0;
		tcSample.SelectedIndex = newIndex;
	}

	private void btnSelectedTab_Click(object sender, RoutedEventArgs e)
	{
		MessageBox.Show("Selected tab: " + (tcSample.SelectedItem as TabItem).Header);
	}
}

}

如您所见，我只是在界面的下部添加了一组按钮。前两个允许选择控件上的上一个或下一个选项卡，而最后一个将显示有关当前选定选项卡的信息，如屏幕截图所示。

前两个按钮使用SelectedIndex属性来确定我们的位置，然后对该值减去或增加一个，确保新索引不会低于或高于可用项目的数量。第三个按钮使用SelectedItem属性来获取对所选选项卡的引用。如您所见，我必须将其类型转换为 TabItem 类以获取 header 属性，因为默认情况下 SelectedProperty 是对象类型。

TabControl 的选项卡通常位于控件的顶部，这也是使用 WPF TabControl 时默认情况下的外观：

然而，使用TabStripPlacement属性，我们可以很容易地改变它：

TabStripPlacement 可以设置为 Top、Bottom、Left 和 Right。但是，如果我们将其设置为 Left 或 Right，则会得到如下结果：

我个人希望标签在放置在一侧时旋转，以便标签文本变为垂直而不是水平，但 WPF TabControl 不会这样做。幸运的是，我们可以通过一个小技巧来完成这个行为：

<TabControl.Resources>

</TabControl.Resources>









如果您还没有阅读关于模板或样式的章节，这可能看起来有点令人困惑，但我们所做的是使用针对 TabItem 元素的样式，我们覆盖 HeaderTemplate 然后将旋转变换应用于选项卡。对于放置在左侧的选项卡，我们旋转 270 度 - 如果放置在右侧，您应该只旋转 90 度，以使其看起来正确。

我们发现自定义 WPF TabControl 的选项卡标题是多么容易，例如添加图像或为文本着色。但是，如果您希望超越这一点并直接影响选项卡的外观（包括形状和边框），则需要覆盖 TabItem 元素的控件模板，虽然这不像 WPF 的大多数其他区域那样直接，但它是还是可控的。

因此，如果您想完全控制 TabControl 选项卡的外观，请查看下一个示例：

<TabControl.Resources>

</TabControl.Resources>









如您所见，这使得 TabControl 看起来有点像 Windows 8，没有边框和不太微妙的颜色来标记选定的选项卡，并且没有未选定选项卡的背景。所有这些都是通过使用 Style 更改 ControlTemplate 来完成的。通过添加ContentPresenter控件，我们指定了放置 TabItem 内容的位置。我们还有几个触发器，它们根据IsSelected属性控制选项卡的背景颜色 。

如果您想要不那么微妙的外观，只需更改模板即可。例如，您可能想要一个边框，但有圆角和渐变背景——没问题！看看下一个例子，我们在那里完成了这个：

<TabControl.Resources>

</TabControl.Resources>









如您所见，我几乎只是在 ContentPresenter 周围添加了一个 Border 控件来实现这种更改后的外观。希望这应该表明获得自定义样式的选项卡是多么容易，以及这种技术有多少可能性。

推荐一款WPF MVVM框架开源项目：Newbeecoder.UI
https://link.zhihu.com/?target=https%3A//share.weiyun.com/G3dUbnnF