Border绘制虚线框（转）
2024-10-10 22:28:56
<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>
效果图：
哈哈，圆满达成目标。
文中的方案为原型，如果要实用，还是建议用上模板：
<Style TargetType="ContentControl" x:Key="myBorder">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="g"
Background="{TemplateBinding ContentControl.Background}"
Width="{TemplateBinding ContentControl.Width}"
Height="{TemplateBinding ContentControl.Height}">
<Canvas>
<Rectangle RadiusX="5" RadiusY="5"
Width="{Binding ElementName=g, Path=ActualWidth}"
Height="{Binding ElementName=g, Path=ActualHeight}"
Stroke="{TemplateBinding ContentControl.BorderBrush}"
StrokeDashArray="5,2,1,2"
StrokeThickness="{TemplateBinding ContentControl.BorderThickness}"/>
</Canvas>
<ContentPresenter Margin="5" Content="{TemplateBinding ContentControl.Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
然后就可以这样使用：
<ContentControl Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="2" BorderBrush="Blue" Style="{StaticResource myBorder}">
<TextBlock Text="abc"/>
</ContentControl>
<ContentControl Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="3" BorderBrush="Red" Style="{StaticResource myBorder}">
<CheckBox>check box</CheckBox>
</ContentControl>
<Button Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentControl BorderThickness="1" BorderBrush="Green" Style="{StaticResource myBorder}">
check box
</ContentControl>
</Button>
效果图为：
原文地址：http://www.cnblogs.com/vwxyzh/archive/2011/12/17/2291256.html
最新文章
- 如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作
- MySQL实现嵌套集合模型
- css写带边框的三角形
- wifipineapple使用教程
- android 设置控件的颜色，字体
- 使用jquery实现局部刷新DIV
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
- docker 镜像管理
- linux与windows回车换行符的区别
- Visual Studio 2017 Enterprise 发布 15.3.2 版，附离线安装包下载。
- CentOS7.2下Nginx的使用
- 自学Aruba1.4-Aruba体系结构-产品线
- 《全栈性能Jmeter》-4JMeter脚本开发
- android极光杀掉程序收不到通知
- codeforces 576a//Vasya and Petya's Game// Codeforces Round #319 (Div. 1)
- sort与sorted
- python 删除前3天的文件
- 淘宝IP地址库API地址
- Selenium自动化测试之数据驱动及用例管理
- 程序员必备的代码审查（Code Review）清单