WPF中如何在文本外面加虚线外框

Posted 2023-03-16

首先来个框：<Grid<BorderHorizontalAlignment="Center"VerticalAlignment="Center"Width="60"Height="30"CornerRadius="5"第一个想到的就是修改Border的Brush，来看看这样的xaml：<Grid<BorderHorizontalAlignment="Center"VerticalAlignment="Center"Width="60"Height="30"CornerRadius="5"BorderThickness="3"<Border.BorderBrush<LinearGradientBrushSpreadMethod="Repeat"StartPoint="0,5"EndPoint="5,0"MappingMode="Absolute"<LinearGradientBrush.GradientStops<GradientStopColor="Blue"Offset="0"/<GradientStopColor="Blue"Offset="0.2"/<GradientStopColor="Transparent"Offset="0.4"/<GradientStopColor="Transparent"Offset="0.6"/<GradientStopColor="Blue"Offset="0.8"/<GradientStopColor="Blue"Offset="1"/</LinearGradientBrush.GradientStops</LinearGradientBrush</Border.BorderBrush<TextBlockText="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Border</Grid看看效果图：再换个思路，更换为使用DrawingBrush：<Grid<BorderHorizontalAlignment="Center"VerticalAlignment="Center"Width="60"Height="30"CornerRadius="5"BorderThickness="3"<Border.BorderBrush<DrawingBrush<DrawingBrush.Drawing<GeometryDrawing<GeometryDrawing.Pen<PenBrush="Blue"Thickness="3"<Pen.DashStyle<DashStyleDashes="3,2,0,2"/</Pen.DashStyle</Pen</GeometryDrawing.Pen<GeometryDrawing.Geometry<RectangleGeometryRect="0,0,60,30"RadiusX="3"RadiusY="3"/</GeometryDrawing.Geometry</GeometryDrawing</DrawingBrush.Drawing</DrawingBrush</Border.BorderBrush<TextBlockText="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Border</Grid看看效果图：利用Pen的DashStyle可以轻易的实现点划的虚线图，当然也可以轻易实现点点划的虚线，DashStyle的规则为：实线长度，空线长度，实线长度，空线长度…，而实现长度如果为0，就代表点。不过细看这张图的话，还是会发现一些不和谐的东西，圆角从外侧看，确实是圆的，但是仔细看内侧的话，发现其内侧竟然是个直角。。。好吧，换个思路，放弃Border了，直接用Canvas，加Rectange:<Grid<GridHorizontalAlignment="Center"VerticalAlignment="Center"Width="60"Height="30"<Canvas<RectangleRadiusX="5"RadiusY="5"Width="60"Height="30"Stroke="Blue"StrokeDashArray="5,2,1,2"StrokeThickness="2"/</Canvas<TextBlockText="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Grid</Grid看看效果图：看起来还不错，确实是圆角的，不过这后面两个方案也有个明显的缺点，就是无法随着文本框内容的增长而动态的绘制。当然可以用Binding来进一步消除这个问题：<Grid<GridHorizontalAlignment="Center"VerticalAlignment="Center"Width="60"Height="30"x:Name="g"<Canvas<RectangleRadiusX="5"RadiusY="5"Width="BindingElementName=g,Path=Width"Height="BindingElementName=g,Path=Height"Stroke="Blue"StrokeDashArray="5,2,1,2"StrokeThickness="2"/</Canvas<TextBlockText="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Grid</Grid效果图：看起来还不错，不过这个方案还是存在问题的，如果容器Grid本身是自增长的，那么杯具就开始了：<Grid<GridHorizontalAlignment="Center"VerticalAlignment="Center"x:Name="g"<Canvas<RectangleRadiusX="5"RadiusY="5"Width="BindingElementName=g,Path=Width"Height="BindingElementName=g,Path=Height"Stroke="Blue"StrokeDashArray="5,2,1,2"StrokeThickness="2"/</Canvas<TextBlockText="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Grid</Grid效果图：可以发现，Grid使用了自增长的方式，Binding也只能获得错误的Width和Height，也就是0，不过别担心，WPF还提供了ActualWidth和ActualHeight：<Grid<GridHorizontalAlignment="Center"VerticalAlignment="Center"x:Name="g"<Canvas<RectangleRadiusX="5"RadiusY="5"Width="BindingElementName=g,Path=ActualHeight"Stroke="Blue"StrokeDashArray="5,2,1,2"StrokeThickness="2"/</Canvas<TextBlockMargin="10,7,10,7"Text="aaa"HorizontalAlignment="Center"VerticalAlignment="Center"/</Grid</Grid效果图：哈哈，圆满达成目标。 参考技术A

现在的人都是什么瞎扯淡的回答，我来说一下，WPF添加虚线外框只需要在文本外添加一个标签Rectangel就行了

其中StrokeDashArray属性是设置虚线的，数值代表虚线之间的间隙

代码如下：

<Rectangle Stroke="#C5D9FB" RadiusX="6" RadiusY="6" StrokeDashArray="5" />
<TextBlock Text="示例1" />

参考网址Rectangle StorkeDashArray属性