windows phone 了解LinearGradientBrush类和RadialGradienBrush类(11)-阿里云开发者社区

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

2017-11-14 840

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

我们了解到在能在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类的实例代码如下：

效果图：

径向渐变中的渐变停止点

本文转自shenzhoulong 51CTO博客，原文链接：http://blog.51cto.com/shenzhoulong/835534，如需转载请自行联系原作者

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

热门文章

最新文章

相关电子书

相关实验场景