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,各位大佬们就百度自行搜索吧~~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值