zoukankan      html  css  js  c++  java
  • 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>
    

    还有这样的

    这样的

    这样的

    这样的

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

  • 相关阅读:
    hdu 3573(数学+贪心)
    hdu 4726(贪心)
    hdu 5895(矩阵快速幂+欧拉函数)
    hdu 5894(组合数取模)
    hdu 5833(欧拉路)
    hdu 5875(单调栈)
    hdu 5877(树状数组+dfs)
    初识安卓-安装中遇到的一点坑
    第十二届湖南省省赛总结
    LuoGuP3594:[POI2015]WIL-Wilcze doły
  • 原文地址:https://www.cnblogs.com/yutou2016/p/7211078.html
Copyright © 2011-2022 走看看