WPF TabControl标题横向显示

转载已于 2022-06-15 10:11:18 修改

· 892 阅读

4 ·

版权

原文链接：https://blog.youkuaiyun.com/dnazhd/article/details/89841942

文章标签：

#wpf #tabcontrol

于 2022-06-13 10:03:49 首次发布

c# 专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何在WPF中通过设置TabControl的TabStripPlacement和TabItem样式，实现TabControl标题栏的纵向显示，并详细展示了XAML代码和关键样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行效果：

WPF实现纵向显示TabControl标题栏通过设置TabStripPlacement属性，标题字体纵向显示则可通过改变TabItem样式，在其中加入TextBlock控件，使用TextWrapping="Wrap"的特性来实现，具体效果如图：

主窗体XAML代码：、

<Window x:Class="VerticalTabDemo.MainWindow"
        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:VerticalTabDemo"
        mc:Ignorable="d"
        Title="VerticalTabDemo" Height="400" Width="525">
    <Window.Resources>
        <!--TextBlock样式-->
        <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="FontSize" Value="26"></Setter>
            <Setter Property="TextWrapping" Value="Wrap"></Setter>
            <Setter Property="TextAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Bottom"></Setter>
            <Setter Property="Height" Value="100"></Setter>
        </Style>
        <!--Tab样式-->
        <SolidColorBrush x:Key="TabControl.BodyBackground" Color="#ffffff" />
        <SolidColorBrush x:Key="TabControl.HeaderBackGround" Color="#ffffff" />
        <SolidColorBrush x:Key="TabControl.ActivedHeaderBackground" Color="#FFA500" />
        <SolidColorBrush x:Key="TabControl.BorderBrush" Color="#d3d3d3" />
        <SolidColorBrush x:Key="TabControl.ActivedHeaderBorderBrush" Color="#FF8C00" />
        <SolidColorBrush x:Key="TabItem.Foreground" Color="#000000" />
        <SolidColorBrush x:Key="TabItem.ActivedForeground" Color="#ffffff" />
        <Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}" BasedOn="{StaticResource {x:Type TabControl}}">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Height" Value="Auto" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Border Background="{StaticResource TabControl.BodyBackground}" BorderThickness="0" Margin="0">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Border Name="Mask" Grid.Column="0" Background="{StaticResource TabControl.HeaderBackGround}"/>
                                <Border Grid.Column="0" Padding="0" Margin="0">
                                    <TabPanel IsItemsHost="True">
                                        <TabPanel.OpacityMask>
                                            <VisualBrush Visual="{Binding ElementName=Mask}" />
                                        </TabPanel.OpacityMask>
                                    </TabPanel>
                                </Border>
                                <Border Grid.Column="1" Margin="0" BorderThickness="0,1,1,1" BorderBrush="{StaticResource TabControl.BorderBrush}" />
                                <Border Grid.Column="1">
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="bg" Background="{StaticResource TabControl.HeaderBackGround}" Margin="0" CornerRadius="2"
                            SnapsToDevicePixels="True" ClipToBounds="True" BorderThickness="1" BorderBrush="{StaticResource TabControl.BorderBrush}">
                            <TextBlock Style="{StaticResource TextBlockStyle}">
                            <ContentPresenter x:Name="contentPresenter"
                                          ContentSource="Header"
                                          Focusable="False" 
                                          Margin="0"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                          VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}">
                                <ContentPresenter.ContentTemplate>
                                    <DataTemplate> 
                                        <TextBlock Text="{Binding Path=Header, RelativeSource={RelativeSource AncestorType=TabItem}}" TextWrapping="Wrap"></TextBlock>
                                    </DataTemplate>
                                </ContentPresenter.ContentTemplate>
                            </ContentPresenter>
                            </TextBlock>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="contentPresenter" Property="TabItem.Foreground" Value="{StaticResource TabItem.ActivedForeground}"/>
                                <Setter TargetName="bg" Property="TabItem.Background" Value="{StaticResource TabControl.ActivedHeaderBackground}"/>
                                <Setter TargetName="bg" Property="TabItem.BorderBrush" Value="{StaticResource TabControl.ActivedHeaderBorderBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl TabStripPlacement="Left" Margin="10,10,10,30" Style="{StaticResource TabControlStyle}">
            <TabItem Header="选项一" Style="{StaticResource TabItemStyle}">
                <Grid>
                    <Label Content="选项一内容" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="26"></Label>
                </Grid>
            </TabItem>
            <TabItem Header="选项二" Style="{StaticResource TabItemStyle}">
                <Grid>
                    <Label Content="选项二内容" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="26"></Label>
                </Grid>
            </TabItem>
            <TabItem Header="选项三" Style="{StaticResource TabItemStyle}">
                <Grid>
                    <Label Content="选项三内容" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="26"></Label>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

原博客地址：

WPF实现纵向显示TabControl标题及标题字体样式_RunnerDNA的博客-优快云博客https://blog.youkuaiyun.com/dnazhd/article/details/89841942