WPF入门教程--TabControl样式

比眉伴天荒 2024-03-27 10:22 73阅读 0赞

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

就像大多数其他 WPF 控件一样，TabControl 非常容易上手。这是一个非常基本的例子：  
  
  
  
  
  
  
  
  
  
  
  
![在这里插入图片描述][a5d0992763134ca9847773d3779c5019.png]  
如您所见，每个选项卡都由一个TabItem元素表示，其中显示的文本由Header 属性控制。TabItem 元素来自 ContentControl 类，这意味着您可以在其中定义一个元素，如果选项卡处于活动状态（如屏幕截图所示），该元素将显示。我在这个例子中使用了一个 Label，但如果你想在选项卡内放置多个控件，只需使用其中一个带有子控件的面板。

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

<TabItem.Header>  
  
  
  
  
</TabItem.Header>  
  
  
  
<TabItem.Header>  
  
  
  
  
</TabItem.Header>  
  
  
<TabItem.Header>  
  
  
  
  
</TabItem.Header>  
  
  
  
  
  
![在这里插入图片描述][ef220a756faf491c94c1ede6d3678536.png]  
标记的数量可能有点多，但是一旦深入研究，您可能会看到，这一切都非常简单。每个选项卡现在都有一个 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);
    	}
    }

\}  
![在这里插入图片描述][81dfad75d0f34232a11e34e62bb4c639.png]

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

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

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

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

![在这里插入图片描述][3054221b3b444f839e51a3d580b5c162.png]  
TabStripPlacement 可以设置为 Top、Bottom、Left 和 Right。但是，如果我们将其设置为 Left 或 Right，则会得到如下结果：  
![在这里插入图片描述][8189bd22162048d59becfdb9826d1a51.png]  
我个人希望标签在放置在一侧时旋转，以便标签文本变为垂直而不是水平，但 WPF TabControl 不会这样做。幸运的是，我们可以通过一个小技巧来完成这个行为：

<TabControl.Resources>  
  
</TabControl.Resources>  
  
  
  
  
  
  
  
  
![在这里插入图片描述][309599381d13403da6ba1d71ba47bea5.png]  
如果您还没有阅读关于模板或样式的章节，这可能看起来有点令人困惑，但我们所做的是使用针对 TabItem 元素的样式，我们覆盖 HeaderTemplate 然后将旋转变换应用于选项卡。对于放置在左侧的选项卡，我们旋转 270 度 - 如果放置在右侧，您应该只旋转 90 度，以使其看起来正确。

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

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

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

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

<TabControl.Resources>  
  
</TabControl.Resources>  
  
  
  
  
  
  
  
  
![在这里插入图片描述][93b0a2429fe7424c93cc0ce2fa664848.png]  
如您所见，我几乎只是在 ContentPresenter 周围添加了一个 Border 控件来实现这种更改后的外观。希望这应该表明获得自定义样式的选项卡是多么容易，以及这种技术有多少可能性。

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

[a5d0992763134ca9847773d3779c5019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fd63a9088b304a8d8d757375a4ac28c9.png
[ef220a756faf491c94c1ede6d3678536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6bdf41b66870418796b288761c05a0f5.png
[81dfad75d0f34232a11e34e62bb4c639.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/194afe6101ea4714b7426ecb782cfce5.png
[3054221b3b444f839e51a3d580b5c162.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ad7876ccb9d74f6d9a8062d5b59cfeb1.png
[8189bd22162048d59becfdb9826d1a51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/24cf9011634a4277925379e5ef53964b.png
[309599381d13403da6ba1d71ba47bea5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/70144739178345ae95a59339519bf027.png
[4b745dd5dedd4ef896cd58bbcdffb849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/47ddbebacdd046f1be2b9ecdf8e2e22b.png
[93b0a2429fe7424c93cc0ce2fa664848.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/340509fc75774034bbff8a14f6b9c36a.png