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>

還有這樣的

這樣的

這樣的

這樣的

搭配好顏色的漸變效果還是很好看的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM