WPF使用border画框

以前的界面中使用的框大都是由美工做好的，但是这样就遇到几个问题：

1. 框只是换一个颜色，就需要多做出一张图，资源包中也要多一个图片资源；
2. 文字的数量会改变，用一张固定的图进行拉伸，边角处会变得越来越不尽如人意。

于是去查找了一下使用border画框的方法。

下文主要一下几种效果：

1. 弧形转角边框线
2. 虚线边框线
3. 彩色渐变边框线

弧形转角边框线

效果图：



代码：

        <Border VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="20" BorderThickness="3" Background="#EE7600" BorderBrush="Transparent">
            <Label Content="错误提示框" Foreground="#FFFFFF" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

虚线边框线

效果图：

        <Border VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="5" BorderThickness="3" >
            <Border.BorderBrush>
                <LinearGradientBrush SpreadMethod="Repeat" StartPoint="0, 5" EndPoint="5, 0" MappingMode="Absolute">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0"/>
                        <GradientStop Color="Red" Offset="0.2"/>
                        <GradientStop Color="Transparent" Offset="0.4"/>
                        <GradientStop Color="Transparent" Offset="0.6"/>
                        <GradientStop Color="Red" Offset="0.8"/>
                        <GradientStop Color="Red" Offset="1"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Label Content="哈哈哈我会画框了" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

彩色渐变边框线

效果图：

        <Border VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="5" BorderThickness="3" >
            <Border.BorderBrush>
                <LinearGradientBrush SpreadMethod="Repeat" StartPoint="0, 2" EndPoint="1, 0" MappingMode="RelativeToBoundingBox">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="red" Offset="0"/>
                        <GradientStop Color="Orange" Offset="0.2"/>
                        <GradientStop Color="Yellow" Offset="0.4"/>
                        <GradientStop Color="Green" Offset="0.6"/>
                        <GradientStop Color="Cyan" Offset="0.8"/>
                        <GradientStop Color="Blue" Offset="1"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Label Content="哈哈哈我会画框了" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>

还有这样的



这样的



这样的



这样的



搭配好颜色的渐变效果还是很好看的