我们了解到在能在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 >
实现的效果:
两种做法都是引入了类,LinearGradienBush类是利用线性绘制颜色区域,隐藏代码中已经有必要的文字注释,官方的解释和部分概念的理解如下:
官方解释
LinearGradientBrush 使用线性渐变绘制区域。 线性渐变沿直线定义渐变。 该直线的终点由线性渐变的 和 属性定义。 LinearGradientBrush 画笔沿此直线绘制其 。
默认的线性渐变是沿对角方向进行的。 默认情况下,线性渐变的 是被绘制区域的左上角值为 0,0 的 ,其 是被绘制区域的右下角值为 1,1 的 。 所得渐变的颜色是沿着对角方向路径插入的。
下图演示对角渐变。 其中添加了一条线,用于突出显示渐变从起点到终点的内插路径。
对角方向的线性渐变
下一幅插图显示的是同一线性渐变,但它具有突出显示的渐变停止点。
具有突出显示的渐变停止点的对角线性渐变
由于LinearGradientBrush和都是有GradientBrush派生而来,所以很多属性和LinearGradientBrush类的属性相同;
类的实例代码如下:
<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>
效果图:
径向渐变中的渐变停止点