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);
}
}
}
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>
<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和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>
<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>
效果图:
径向渐变中的渐变停止点