windows phone 了解LinearGradientBrush类和RadialGradienBrush类(11)

 

我们了解到在能在xaml中完成的设计，一般在隐藏文件中也可通过代码完成；本节中的案例是实现对同一设计效果的不同写法；例如在隐藏文件中代码如下：

View Code

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内容如下:

View Code

< 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>

 效果图：

 

径向渐变中的渐变停止点