WPF实现文字纵向排布的TabItem

文章目录

- 基本用法
- 文字竖排显示

基本用法

WPF中的TabControl是一个容器控件，用于在单个窗体或页面中承载多个选项卡。每个选项卡可以包含不同的控件，用于显示不同的内容，其最简单的调用方法如下，只需在TabControl中无脑添加TabItem，就可以得到一个个用之不竭的控件抽屉了

xml 复制代码

<TabControl>
  <TabItem Header="TAB1">
  </TabItem>
  <TabItem Header="TAB2">
  </TabItem>
</TabControl>

通过调整TabStripPlacement属性，可以更改抽屉标题的位置，例如

xml 复制代码

<TabControl TabStripPlacement="Left">
    <!--内容不变-->
</TabControl>

效果如下

文字竖排显示

通过设置TabStripPlacement得到的纵向TabItem并不美观，尤其是抽屉较少的情况下，左下角有大量的空白，如果能够想办法让文字纵向显示，就十分完美。直接在文字中加入\n并不能实现这一功能，为此，需要修改TabItem的HeaderTemplate，具体方法是，添加一个Resources，并在其中以TabItem为目标新建一个Style。

通过为TabItem中的文本区域添加一个Convert，从而实现标题文字的竖排显示

xml 复制代码

<TabControl.Resources>
   <local:TabItemConverter x:Key="TabItemConverter"/>
   <Style x:Key="TabItemVerticalStyle" TargetType="TabItem">
       <Setter Property="HeaderTemplate">
           <Setter.Value>
               <DataTemplate>
                   <TextBlock Text="{Binding Path=Header,
                       RelativeSource={RelativeSource AncestorType=TabItem},
                       Converter={StaticResource TabItemConverter}}">
                   </TextBlock>
               </DataTemplate>
           </Setter.Value>
       </Setter>
   </Style>
</TabControl.Resources>

其中，local是本地命名空间，在本例中，是tabTest

xml 复制代码

<Window x:Class="tabTest.MainWindow"
     xmlns:local="clr-namespace:tabTest"
     Title="MainWindow" Height="200" Width="360">

而TabItemConverter，则是手动实现的文字转换类，这个类通过继承IValueConverter接口来实现，后者内部封装了两个方法，分别是Convert和ConvertBack，只需实现前一个方法即可，修改结果如下

cs 复制代码

public class TabItemConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture){
        string str = value.ToString();
        return string.Join("\n", str.Select(s => s));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){
        throw new NotImplementedException();
    }
}

效果如下