【UWP】仅在TextBlock文本溢出时显示Tooltip

原文:【UWP】仅在TextBlock文本溢出时显示Tooltip

前言

这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考。

通常,我们使用ToolTip最简单的方式是这样:

<TextBlock Text="Test"
           ToolTipService.ToolTip="Test"
           />

这样在光标悬浮在TextBlock上方时,会显示一个提示条,但是这似乎又违背了一个设计原则:

ToolTip作为提示,应该仅在当前内容显示不全,且用户有意愿查看完整内容时作为替代元素出现

这很好理解,如果TextBlock足以显示所有文本内容,那么显示Tooltip显然是多此一举的事情。但UWP并没有对这种常见的情况进行自动处理,比如将TextBlock在文本溢出时自动显示Tooltip作为一个默认行为,所以我们就需要自己来实现这个操作。


思路

我能想到的思路是借助TextBlock.IsTextTrimmed属性,在True的时候设置Tooltip的值为TextBlock.Text,在False的时候设置Tooltip的值为null

但在实际创建的时候,我发现这很难做到,原因如下:

  1. Converter的ConverterParameter属性是一个简单对象(object),无法通过绑定进行传值(只有DependencyProperty才能使用绑定),这意味着我无法在绑定IsTextTrimmed的同时通过ConverterParameter属性传入Text的值
  2. 我也不能直接在Converter内绑定TextBlock本身,目标太大,而我只想要IsTextTrimmed属性改变时进行判断.

综上,在查找一些资料后,我决定改造一下Converter本身。

解决方法

Converter

public class TrimConverter : DependencyObject, IValueConverter
{
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(TrimConverter), new PropertyMetadata(""));

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool isTrim = System.Convert.ToBoolean(value);
        return isTrim ? Text : null;
    }

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

我在Converter内部创建了一个DependencyProperty用来存放TextBlock.Text的值。

使用

<Page.Resources>
    <local:TrimConverter x:Key="TrimConverter" Text="{Binding ElementName=TestBlock,Path=Text}"/>
</Page.Resources>

...
<TextBlock MaxWidth="100" TextTrimming="CharacterEllipsis"
           x:Name="TestBlock"
           ToolTipService.ToolTip="{Binding ElementName=TestBlock,
                                            Path=IsTextTrimmed,
                                            Converter={StaticResource TrimConverter}}"/>

在XAML界面中完成绑定后,实测可以解决我的需求。

但是这个解决方法并不完美,它有一个问题:

和TextBlock本身耦合,由于Text值需要绑定,只能一个TextBlock创建一个Converter,不能够复用



实现在TextBlock文本溢出时显示Tooltip有多种实现方式,我只提出了一种,以供参考。

原文地址:https://www.cnblogs.com/lonelyxmas/p/11963523.html

时间: 2024-10-05 00:58:39

【UWP】仅在TextBlock文本溢出时显示Tooltip的相关文章

CSS 文本溢出时显示省略标记

如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

当文本溢出时显示为省略号

当元素设置固定宽度之后,如果元素内的文本超出宽度之后将其设置为省略号效果的方法: text-overflow 属性规定当文本溢出包含元素时发生的事情. 语法 text-overflow: clip|ellipsis|string; 值 描述   clip 修剪文本.   ellipsis 显示省略符号来代表被修剪的文本.   string 使用给定的字符串来代表被修剪的文本. white-space 属性设置如何处理元素内的空白. 可能的值 值 描述 normal 默认.空白会被浏览器忽略. p

文本溢出时显示省略号

效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0;"> <title>test</title> <style> .test{ width:200px

控制表格内的文本溢出时隐藏

table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ text-align:center; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overflow:hid

text-overflow文本溢出隐藏“...”显示

一.文本溢出省略号显示 1.文本溢出是否"..."显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时"..."显示) 定义此属性有四个必要条件:1)须有容器宽度:width:value: 2)强制文本在一行内显示:white-space:nowrap: 3)溢出内容隐藏:overflow:hidden: 4)溢出文本显示"...":text-overflow:ellipsis: 2.溢出属性:overf

CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)

当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word-break 属性规定自动换行的处理方法.word-break: normal|break-all|keep-all;值 描述normal 使用浏览器默认的换行规则.break-all 允许在单词内换行.keep-all 只能在半角空格或连字符处换行.2,overflow 属性规定当内容溢出元素框时发

wpf textblock超出显示范围后显示tooltip

原文:wpf textblock超出显示范围后显示tooltip public static class TextTrmmingShowToolTip { public static readonly DependencyProperty IsToolTipProperty = DependencyProperty.RegisterAttached( "IsToolTip", typeof(bool), typeof(TextTrmmingShowToolTip), new Prope

css文本溢出隐藏显示省略号(单行+多行)

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-

Thinkphp设置仅在调试模式关闭时显示404页面

404页面是网站必备的一个页面,它承载着用户体验与SEO优化的重任.404页面通常为用户访问了网站上不存在或已删除的页面,服务器返回的404错误.如果站长没有设置404页面,会出现死链接,蜘蛛爬行这类网址时,不利于搜索引擎收录. 综上百科来的一堆啰嗦为一句话就是404页面是必要的: 接下来的内容就是讲述使用thinkphp时如何设置404页面: 本来奔着减少脑细胞损耗的原则:直接谷歌了下:结果发现市面上那些thinkphp设置404页面的文章都是千篇一律的建一个控制器:里面然后通过_empty(