前言

这是我今天在回答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有多种实现方式,我只提出了一种,以供参考。

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

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

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  2. css 文本溢出时显示省略号

    .text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...

  3. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

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

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

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

    当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...

  6. Linux vi 文本代码时显示行号或不显示行号

    Linux vi 文本代码时显示行号或不显示行号 前提  安装了vim $vi ~/.vimrc 显示的话加上 set nu 不想显示的话可以注释掉 "set nu 之后 $source ~ ...

  7. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

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

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  9. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

随机推荐

  1. CCF-CSP题解 201403-4 无线网络

    新建不超过\(k\)个无线路由器,求使路由器1.2连通最少的中间路由器. 首先常规建图,将相距不超过\(r\)的路由器(包括新建的)相连. 想到了分层\(dijkstra\).类似的,作\(bfs\) ...

  2. Python之如何修改运行的快捷键

    如果你在Pycharm中运行程序使用Ctrl+shift+F10快捷键,运行失败,使用Pycharm工具组,右键一下选择“Run+文件名称AAA”运行程序,直接运行成功的话,那么你就可以 更换自己的运 ...

  3. contiue和break的用法

    contiue和break的作用分别是什么: 1.continue的意思是终止本次循环,直接进入下一次循环. 注意: continue不能加在循环体的最后一步执行的代码,因为代码加上去毫无意义 2.b ...

  4. python基础知识第五篇(字典)

    字典(dict) info={ "k1":"v1", "k2":"value" } 字典的value可以是任意值,布尔值 ...

  5. 人员简历管理系统-毕业设计(包括文档+源代码+答辩PPT)

    1.开发环境 开发工具:Microsoft Visual Studio 2010操作系统:Windows7(推荐)或更高版本 数据库:sql server 2000 或者更高版本Web服务器:IIS ...

  6. SpringBoot2基础,进阶,数据库,中间件等系列文章目录分类

    本文源码:GitHub·点这里 || GitEE·点这里 一.文章分类 1.入门基础 SpringBoot2:环境搭建和RestFul风格接口 2.日志管理 SpringBoot2:配置Log4j2, ...

  7. sqlserver数据库批量插入-SqlBulkCopy

    当想在数据库中插入大量数据时,使用insert 不仅效率低,而且会导致一系列的数据库性能问题 当使用insert语句进行插入数据时.我使用了两种方式: 每次插入数据时,都只插入一条数据库,这个会导致每 ...

  8. DC8: Vulnhub Walkthrough

    镜像下载链接: https://www.vulnhub.com/entry/dc-8,367/#download 主机扫描: http://10.10.202.131/?nid=2%27 http:/ ...

  9. 微信小程序—支付宝小程序与微信小程序的不同点对比

    支付宝小程序语法 http://caibaojian.com/aliapp-wxapp.html https://www.cnblogs.com/bgwhite/p/9447639.html http ...

  10. JavaScript-----15.简单数据类型和复杂数据类型

    1. 简单数据类型和复杂数据类型 简单数据类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型 值类型:在存储时变量中存储的是值本身:string number Boolean undefined ...