昨天突然被问到如何在wpf里面给一段文本加个虚线外框,由于有一段时间没玩wpf了,一时还真没想出来,虽然大概有个思路,但是也不保证正确。今天回到家,闲着没事情也就随便试验了一下。
首先来个框:
看看效果:
一个中规中矩的实线框,如何改造成我们想要的虚线框哪?
第一个想到的就是修改Border的Brush,来看看这样的xaml:
看看效果图:
因为把Brush修改成斜线的渐变色(蓝色->透明->蓝色),因此总体上看起来就是个虚线,但是在圆角的效果取有些不怎么如意。
再换个思路,更换为使用DrawingBrush:
看看效果图:
利用Pen的DashStyle可以轻易的实现点划的虚线图,当然也可以轻易实现点点划的虚线,DashStyle的规则为:实线长度,空线长度,实线长度,空线长度…,而实现长度如果为0,就代表点。
不过细看这张图的话,还是会发现一些不和谐的东西,圆角从外侧看,确实是圆的,但是仔细看内侧的话,发现其内侧竟然是个直角。。。
好吧,换个思路,放弃Border了,直接用Canvas,加Rectange:
看看效果图:
看起来还不错,确实是圆角的,不过这后面两个方案也有个明显的缺点,就是无法随着文本框内容的增长而动态的绘制。当然可以用Binding来进一步消除这个问题:
效果图:
看起来还不错,不过这个方案还是存在问题的,如果容器Grid本身是自增长的,那么杯具就开始了:
效果图:
可以发现,Grid使用了自增长的方式,Binding也只能获得错误的Width和Height,也就是0,不过别担心,WPF还提供了ActualWidth和ActualHeight:
效果图:
哈哈,圆满达成目标。