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

来源：互联网发布：移动app开发需要java 编辑：程序博客网时间：2024/06/07 06: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类的实例代码如下：

效果图：

径向渐变中的渐变停止点