WPF TabControl TabItem Header显示不全设置成省略号

不得不说WPF资料网上都好少,这么一个问题网上没找到一样的,这个小需求摸索了查了三天才自己研究出,在此分享一下成果

首先百度显示不全省略号,大部分都会告诉你,TextBlock里面有一个属性,设置TextTrimming="CharacterEllipsis"即可把多余显示不全的部分显示省略号。

但是tabitem里面没有TextTrimming属性,这个属性只有在TextBlock里才有,一开始我的想法是Header里面加一个TextBlock,TextBlock来显示内容

<TabControl
            x:Name="testTabControl1"
            Width="295"
            Height="75"
            Margin="145,93,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
            <TabItem Width="50" FontStretch="UltraExpanded">
                <TabItem.Header>
                    <TextBlock Text="0123456789" TextTrimming="CharacterEllipsis" />
                </TabItem.Header>
                <Grid Background="#FFE5E5E5" />
            </TabItem>
            <TabItem
                Width="50"
                FontStretch="UltraExpanded"
                Header="0123456789">
                <Grid Background="#FFE5E5E5" />
            </TabItem>
        </TabControl>

在这里插入图片描述
省略号出现了,证明这个想法是可以的,但是工作代码里,只有tabcontrol,tabitem都是后端代码一个个增加进去的的,修改前端不行,然后我又想是不是可以给header增加一个样式,就这么绕弯路研究了一天发现不行,只能给tabitem或者tabcontrol设置样式。
后来搜样式,这两位老哥给了我一点思路:
https://www.cnblogs.com/yk250/p/5652928.html
https://www.cnblogs.com/xiaomingg/p/8870825.html
style样式里面不设置x:Key会应用到所有的控件,代码如下:

 <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <TextBlock
                                Width="50"
                                Height="20"
                                Text="{TemplateBinding Header}"
                                TextTrimming="CharacterEllipsis"
                                ToolTip="{TemplateBinding Header}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

在这里插入图片描述
省略号出现了,后台增加数据
在这里插入图片描述
在这里插入图片描述
证明这个是可行的,但这个是设置全局的tabitem,如何只设置部分呢?加上x:Key,后端绑定样式即可,如下图
在这里插入图片描述
后端代码加一句设置tabitem的style
在这里插入图片描述
如图,设置过style的tabitem加进去了。
在这里插入图片描述
后续如何美化自定义样式的tabitem,各位大佬们就百度自行搜索吧~~~

WPF中,要在TabControl中的TabItem之间设置间距,可以使用`TabControl`的`TabStripPlacement`属性以及`TabPanel`的`ItemContainerStyle`来进行自定义样式。以下是步骤: 1. 首先,在资源Dictionary中定义一个新的`ControlTemplate`,用于`TabItem`: ```xml <Style TargetType="TabItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <DockPanel Margin="{DynamicResource TabItemMargin}"> <!-- 其他TabItem内容 --> <ContentPresenter /> </DockPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 在这里,`{DynamicResource TabItemMargin}`会引用我们即将创建的动态资源。 2. 创建一个名为`TabItemMargin`的动态资源,设置间距值: ```xml <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/YourAssemblyName;component/Styles.xaml" /> <!-- 如果在单独文件中定义 --> </ResourceDictionary.MergedDictionaries> <SolidColorBrush x:Key="TabItemBackgroundBrush" Color="#F0F0F0" /> <Thickness x:Key="TabItemMargin">10, 5, 10, 5</Thickness> <!-- 设置水平和垂直间距 --> </ResourceDictionary> ``` 将`10, 5, 10, 5`替换为你想要的间距值,单位通常是像素。 3. 将上述`ResourceDictionary`添加到应用程序的`App.xaml`中的`Application.Resources`部分,或者放在特定的`Window.Resources`里,以便所有`TabControl`都能应用此样式。 现在,`TabControl`中的TabItem之间的间距已经按照你设定的值进行了调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值