Border绘制虚线框

  <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