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

效果如下

相关推荐
没有bug.的程序员21 小时前
服务治理与 API 网关:微服务流量管理的艺术
java·分布式·微服务·架构·wpf
Brianna Home1 天前
【案例实战】鸿蒙分布式调度:跨设备协同实战
华为·wpf·harmonyos
c#上位机2 天前
wpf中Grid的MouseDown 事件无法触发的原因
c#·wpf
△曉風殘月〆2 天前
如何在WPF中实现ComboBox多选
wpf
csdn_aspnet2 天前
如何使用现有工具进行 .NET 8 迁移 Wpf
wpf·.net 8
123梦野3 天前
WPF——动画
wpf
攻城狮CSU3 天前
WPF 疑点汇总2.HorizontalAlignment和 HorizontalContentAlignment
wpf
c#上位机3 天前
wpf之命令
c#·wpf
没有bug.的程序员3 天前
分布式链路追踪:微服务可观测性的核心支柱
java·分布式·微服务·架构·wpf
Aevget4 天前
DevExpress WPF中文教程:Data Grid - 如何使用虚拟源?(一)
c#·wpf·界面控件·devexpress·ui开发