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>

 效果图：

径向渐变中的渐变停止点