wpf 定制虚线边框

                               wpf 定制控件虚线边框

该虚线边框能被使用在任何带BorderBrush属性的控件，效果如下：

代码 1：

通用border style 定义，代码来自 

https://stackoverflow.com/questions/6195395/how-can-i-achieve-a-dashed-or-dotted-border-in-wpf

  <DrawingBrush x:Key="borderBrush" Viewport="0,0,8,8" ViewportUnits="Absolute" TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="Black">
                        <GeometryDrawing.Geometry>
                            <GeometryGroup>
                                <RectangleGeometry Rect="0,0,50,50" />
                                <RectangleGeometry Rect="50,50,50,50" />
                            </GeometryGroup>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>

 

这其实是wpf brush中一种功能强大的brush, tile brush, 从tile名字可知，主要可以用在图标/图片重复铺陈方面。当然在brush 的内容里也可以使用drawing 对象绘制定制化的图形。以上代码就是绘制了这样图形，因为 Viewport="0,0,8,8", ViewportUnits="Absolute" 指定了该图形将以8个有效像素来绘制，而不是50，50并没有大小的意义；而TileMode="Tile" 是指定了填充模式为重复铺陈。

因此，如果我使用该brush作为区域（区域面积远大于8，8）填充刷时，会是以下的效果：

作为border brush使用方式：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.Column="1" BorderBrush="{StaticResource borderBrush}" BorderThickness="1,1,1,0">
            <TextBlock>Test1</TextBlock>
        </Border>
        <Border Grid.Row="1" Grid.Column="1" BorderBrush="{StaticResource borderBrush}" BorderThickness="1,1,1,0">
            <TextBlock>Test2</TextBlock>
        </Border>
        <Border Grid.Row="2" Grid.Column="1" BorderBrush="{StaticResource borderBrush}" BorderThickness="1">
            <TextBlock>Test3</TextBlock>
        </Border>
    </Grid>

效果如贴图1。

原因是这样的：

因为在这里borderThickness =1， 因此整个 内容只有1/8 能够得到绘制，那么水平方向只得到这样的部分 ，然后重复铺陈，而竖直方向只得到这样的所以就得到第一个图的效果。

从而我们知道，如果我们需要更大的borderThickness, 那么我们就需要调整viewport的size.