WPF实现文字纵向排布的TabItem

文章目录

WPF布局

基本用法

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

效果如下

相关推荐
分布式存储与RustFS1 天前
告别复杂配置:用Milvus、RustFS和Vibe Coding,60分钟DIY专属Chatbot
wpf·文件系统·milvus·对象存储·minio·rustfs·vibe
攻城狮CSU2 天前
WPF 绑定机制实现原理
wpf
攻城狮CSU2 天前
WPF 之数据绑定一(Data Binding)
wpf
wuty0072 天前
记录一下 WPF进程 SendMessage 发送窗口消息进行进程间通信,存在进程权限无法接受消息的问题
wpf·进程间通信·sendmessage·进程权限
c#上位机3 天前
wpf之ToggleButton控件
c#·wpf
浪扼飞舟3 天前
WPF用户控件和依赖属性
wpf
c#上位机4 天前
wpf之MVVM中只读属性更新界面
c#·wpf·mvvm
就是有点傻4 天前
WPF自定义控件之环形进度条
wpf
He BianGu4 天前
【笔记】WPF中如何的动态设置DataGridTextColumn是否显示
笔记·wpf
Pota-to成长日记4 天前
Redisson 看门狗机制深度解析:分布式锁的守护者
分布式·wpf