当前位置：首页 > news >正文

C# WPF编程-TabControl

news 来源：原创 2025/5/17 4:37:54

C# WPF编程-TabControl

布局：
代码：
效果

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;
                }                
            }           
        }
    }
}