网站建设售后协议小网站广告投放

WPF中的TabControl是一个非常灵活和强大的控件，用于在一组页面或选项卡之间进行导航。每个选项卡（TabItem）可以包含任意复杂的UI内容。接下来，我将介绍如何使用TabControl，包括基本用法、样式定制以及如何实现垂直标签布局。

• TabControl : 添加选项卡控件
• TabItem：添加选项卡页面

布局：

<Window x:Class="WpfBaseDemo.WindowTabctrolDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfBaseDemo"mc:Ignorable="d"Title="WindowTabctrolDemo" Height="450" Width="800"><Window.Resources><Style x:Key="TabItemHeaderTextStyle"><Setter Property="TextBlock.FontSize" Value="15"/><Setter Property="TextBlock.FontStyle" Value="Italic"/><Setter Property="TextBlock.FontWeight" Value="Bold"/><Setter Property="TextBlock.Foreground" Value="#FF00479D"/></Style></Window.Resources><Grid><Grid.RowDefinitions><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><TabControl Grid.Row="0" Grid.Column="0" SelectionChanged="TabControl_SelectionChanged"><TabItem Header="第一页"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><!-- 日历 --><Calendar Grid.Row="0" Grid.Column="0"/><Slider Grid.Row="0" Grid.Column="1" Value="50" Maximum="100"/></Grid></TabItem><TabItem Header="第二页"></TabItem><TabItem Header="第三页"></TabItem></TabControl><TabControl Grid.Row="0" Grid.Column="1" ><TabItem><TabItem.Header><StackPanel Orientation="Horizontal"><Image Source="Images/mail-send.png"/><TextBlock Text="第一页" Style="{StaticResource TabItemHeaderTextStyle}"/></StackPanel></TabItem.Header></TabItem><TabItem><TabItem.Header><StackPanel Orientation="Horizontal"><Image Source="Images/help-contents.png"/><Label Content="第二页" Style="{StaticResource TabItemHeaderTextStyle}"/></StackPanel></TabItem.Header></TabItem><TabItem><TabItem.Header><StackPanel Orientation="Horizontal"><Image Source="Images/stock_text_center.png"/><Label Content="第三页" Style="{StaticResource TabItemHeaderTextStyle}" /></StackPanel></TabItem.Header><StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"><Rectangle Width="200" Height="200"><Rectangle.Fill><SolidColorBrush Color="Gold"/></Rectangle.Fill></Rectangle></StackPanel></TabItem></TabControl></Grid>
</Window>

代码：

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace WpfBaseDemo
{/// <summary>/// WindowTabctrolDemo.xaml 的交互逻辑/// </summary>public partial class WindowTabctrolDemo : Window{public WindowTabctrolDemo(){InitializeComponent();}private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e){TabControl? tabControl = sender as TabControl;if (tabControl != null) {switch (tabControl.SelectedIndex){case 0:Debug.WriteLine("第一页");break;case 1:Debug.WriteLine("第二页");break;case 2:Debug.WriteLine("第三页");break;default:break;}                }           }}
}

效果