WPF 如何在文本外面加虚线外框
来源:互联网 发布:华宇软件股票 编辑:程序博客网 时间:2024/04/24 05:50
昨天突然被问到如何在wpf里面给一段文本加个虚线外框,由于有一段时间没玩wpf了,一时还真没想出来,虽然大概有个思路,但是也不保证正确。今天回到家,闲着没事情也就随便试验了一下。
首先来个框:
<Grid><Border HorizontalAlignment="Center" VerticalAlignment="Center"Width="60" Height="30" CornerRadius="5"BorderBrush="Blue" BorderThickness="3"><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></Grid>
看看效果:
一个中规中矩的实线框,如何改造成我们想要的虚线框哪?
第一个想到的就是修改Border的Brush,来看看这样的xaml:
<Grid><Border HorizontalAlignment="Center" VerticalAlignment="Center"Width="60" Height="30" CornerRadius="5"BorderThickness="3"><Border.BorderBrush><LinearGradientBrush SpreadMethod="Repeat" StartPoint="0,5" EndPoint="5,0" MappingMode="Absolute"><LinearGradientBrush.GradientStops><GradientStop Color="Blue" Offset="0"/><GradientStop Color="Blue" Offset="0.2"/><GradientStop Color="Transparent" Offset="0.4"/><GradientStop Color="Transparent" Offset="0.6"/><GradientStop Color="Blue" Offset="0.8"/><GradientStop Color="Blue" Offset="1"/></LinearGradientBrush.GradientStops></LinearGradientBrush></Border.BorderBrush><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></Grid>
看看效果图:
因为把Brush修改成斜线的渐变色(蓝色->透明->蓝色),因此总体上看起来就是个虚线,但是在圆角的效果取有些不怎么如意。
再换个思路,更换为使用DrawingBrush:
<Grid><Border HorizontalAlignment="Center" VerticalAlignment="Center"Width="60" Height="30" CornerRadius="5"BorderThickness="3"><Border.BorderBrush><DrawingBrush><DrawingBrush.Drawing><GeometryDrawing><GeometryDrawing.Pen><Pen Brush="Blue" Thickness="3"><Pen.DashStyle><DashStyle Dashes="3,2,0,2"/></Pen.DashStyle></Pen></GeometryDrawing.Pen><GeometryDrawing.Geometry><RectangleGeometry Rect="0,0,60,30" RadiusX="3" RadiusY="3"/></GeometryDrawing.Geometry></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Border.BorderBrush><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></Grid>
看看效果图:
利用Pen的DashStyle可以轻易的实现点划的虚线图,当然也可以轻易实现点点划的虚线,DashStyle的规则为:实线长度,空线长度,实线长度,空线长度…,而实现长度如果为0,就代表点。
不过细看这张图的话,还是会发现一些不和谐的东西,圆角从外侧看,确实是圆的,但是仔细看内侧的话,发现其内侧竟然是个直角。。。
好吧,换个思路,放弃Border了,直接用Canvas,加Rectange:
<Grid><Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="30"><Canvas><Rectangle RadiusX="5" RadiusY="5" Width="60" Height="30"Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/></Canvas><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></Grid>
看看效果图:
看起来还不错,确实是圆角的,不过这后面两个方案也有个明显的缺点,就是无法随着文本框内容的增长而动态的绘制。当然可以用Binding来进一步消除这个问题:
<Grid><Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="30" x:Name="g"><Canvas><Rectangle RadiusX="5" RadiusY="5"Width="{Binding ElementName=g, Path=Width}"Height="{Binding ElementName=g, Path=Height}"Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/></Canvas><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></Grid>
效果图:
看起来还不错,不过这个方案还是存在问题的,如果容器Grid本身是自增长的,那么杯具就开始了:
<Grid><Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="g"><Canvas><Rectangle RadiusX="5" RadiusY="5"Width="{Binding ElementName=g, Path=Width}"Height="{Binding ElementName=g, Path=Height}"Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/></Canvas><TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></Grid>
效果图:
可以发现,Grid使用了自增长的方式,Binding也只能获得错误的Width和Height,也就是0,不过别担心,WPF还提供了ActualWidth和ActualHeight:
<Grid><Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="g"><Canvas><Rectangle RadiusX="5" RadiusY="5"Width="{Binding ElementName=g, Path=ActualWidth}"Height="{Binding ElementName=g, Path=ActualHeight}"Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/></Canvas><TextBlock Margin="10,7,10,7" Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></Grid>
效果图:
哈哈,圆满达成目标。
- WPF 如何在文本外面加虚线外框
- 如何在虚拟机外面换内核
- 如何在屏幕上画虚线矩形框?
- 如何自定义虚线背景框
- 如何取消链接虚线框
- 如何在网页中制作虚线表格
- 如何在Cell里画出虚线?
- WPF 虚线的画法
- WPF中画虚线
- [Unity3D]如何渲染一个在camera frustum外面的物体
- 给页面加虚线
- 添加虚线外框
- 写在主方法类的变量,在main外面声明该变量要加static修饰~
- 如何在visio中画虚线框以及如何解决将visio图形复制到word文档中虚线变为实线的问题
- [杂]在记忆外面
- 如何在visio中画虚线框以及将visio图形复制到word文档
- WPF 去掉tab 虚线边框
- 在文本段落的前后加字符
- hdu 1700
- matlab 产生随机数
- 鼠标移到元素上显示提示信息
- Linux Mysql 5.5 X64位安装,个人实践
- 有什么方法快速的将小硬盘对拷到大硬盘
- WPF 如何在文本外面加虚线外框
- 企业证书APP发布流程
- 微信生成二维码
- android底层开发系列helloworld
- C++构造函数为什么不能是虚函数
- 一步一步学linux多线程编程
- BZOJ 3203 Sdoi2013 保护出题人 凸包+三分
- DVWA安装
- 安卓编译系统简介