windows phone 瞭解LinearGradientBrush類和RadialGradienBrush類(11)

 

我們瞭解到在能在xaml中完成的設計，一般在隱藏文件中也可通過代碼完成；本節中的案例是實現對同一設計效果的不同寫法；例如在隱藏文件中代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace LinearGB
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 構造函數
        public MainPage()
        {
            InitializeComponent();
            Init();
        }
        private void Init()
        {
            TextBlock tb = new TextBlock();
            tb.Name = "tbName";
            tb.Text = "顯示顏色";
            tb.VerticalAlignment = VerticalAlignment.Center;
            tb.HorizontalAlignment = HorizontalAlignment.Center;
            //實例化
            //LinearGradientBrush lgb1 = new LinearGradientBrush();
            LinearGradientBrush lgb2 = new LinearGradientBrush();
          
            GradientStopCollection gsc = new GradientStopCollection();
            //設置過渡點的顏色和偏移量
            GradientStop gt1 = new GradientStop();
            //Color c = new Color();
            //c.R = 255;
            //c.A = 230;
            //c.G = 22;
            //c.B = 43;
            //gt1.Color=c;
            gt1.Color = Color.FromArgb(255, 164, 143, 112);
            gt1.Offset = 0.2;
            gsc.Add(gt1);

            GradientStop gt2 = new GradientStop();
            //Color c2 = new Color();
            //c2.R = 251;
            //c2.A = 231;
            //c2.G = 12;
            //c2.B = 13;
            //gt2.Color = c2;
            gt2.Color = Color.FromArgb(229, 178, 234, 188);
            gt2.Offset = 0.7;
            gsc.Add(gt2);
            //設置線性漸變色的起始座標
            Point p1 = new Point(0, 0);
            lgb2.StartPoint = p1;
            //設置線性漸變色的終止座標
            Point p2 = new Point(1, 1);
            lgb2.EndPoint = p2;
            //設置漸變停止點
            lgb2.GradientStops = gsc;

            //設置前景色
            tb.Foreground = lgb2;

            ContentPanel.Children.Add(tb);
        }
}
}

複製代碼

 

 上面代碼實現的效果：

 從xaml文件中同樣也可以實現類似的效果，ContentPanel下的textblock內容如下:

<TextBlock x:Name="tbName" Text="顯示顏色" VerticalAlignment="Center" HorizontalAlignment="Center" >
                <TextBlock.Foreground>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
                        <LinearGradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Offset="0.2" Color="AliceBlue"></GradientStop>
                            <GradientStop Offset="0.7" Color="Brown"></GradientStop>
                        </GradientStopCollection>
                         </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </TextBlock.Foreground>
            </TextBlock>

複製代碼

 實現的效果：

---

 

 兩種做法都是引入了LinearGradientBrush類，LinearGradienBush類是利用線性繪製顏色區域，隱藏代碼中已經有必要的文字註釋，官方的解釋和部分概念的理解如下：

 

官方解釋

LinearGradientBrush 使用線性漸變繪製區域。 線性漸變沿直線定義漸變。 該直線的終點由線性漸變的 StartPoint 和 EndPoint 屬性定義。 LinearGradientBrush 畫筆沿此直線繪製其 GradientStops。

默認的線性漸變是沿對角方向進行的。 默認情況下，線性漸變的 StartPoint 是被繪製區域的左上角值爲 0,0 的 Point，其 EndPoint 是被繪製區域的右下角值爲 1,1 的 Point。 所得漸變的顏色是沿着對角方向路徑插入的。

下圖演示對角漸變。 其中添加了一條線，用於突出顯示漸變從起點到終點的內插路徑。

對角方向的線性漸變

下一幅插圖顯示的是同一線性漸變，但它具有突出顯示的漸變停止點。

具有突出顯示的漸變停止點的對角線性漸變

 由於LinearGradientBrush和RadialGradienBrush都是有GradientBrush派生而來，所以很多屬性和LinearGradientBrush類的屬性相同；

 RadialGradienBrush類的實例代碼如下：

<TextBlock x:Name="tbRadia" VerticalAlignment="Center"  HorizontalAlignment="Center" Text="擴散式輻射">
                <TextBlock.Foreground>
                     <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
        RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="Yellow" Offset="0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1" />
      </RadialGradientBrush>
                </TextBlock.Foreground>
            </TextBlock>

 效果圖：

 

徑向漸變中的漸變停止點