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(255164143112);
            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(229178234188);
            gt2.Offset = 0.7;
            gsc.Add(gt2);
            //设置线性渐变色的起始坐标
            Point p1 = new Point(00);
            lgb2.StartPoint = p1;
            //设置线性渐变色的终止坐标
            Point p2 = new Point(11);
            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 使用线性渐变绘制区域。 线性渐变沿直线定义渐变。 该直线的终点由线性渐变的 StartPointEndPoint 属性定义。 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>

 效果图:

 

径向渐变中的渐变停止点

渐变示意图。
 

 

 

posted @ 2012-04-16 09:25  神舟龙  阅读(1411)  评论(0编辑  收藏  举报