Windows Phone开发(31):画刷

移动开发
Windows Phone是微软发布的一款手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验整合至手机中。

画刷是啥玩意儿?哈,其实画刷是用来涂鸦,真的,没骗你,至于你信不信,反正我信了。

本文通过价绍几个典型的画刷,使你明白画刷就是用来涂鸦的。

一、纯色画刷SolidColorBrush。

这个家伙比较“纯”,当然它不是装纯,的确很纯,纯到只用一种颜色,所以叫“单色画刷”。

来,看看这个示例,我们画一个矩形(放在一个Canvas中),然后用这个纯家伙来打扮一下。

  1. <Rectangle Canvas.Left="5" Canvas.Top="130" Width="85" Height="75"
  2.     <Rectangle.Fill> 
  3.         <SolidColorBrush Color="White"/> 
  4.     </Rectangle.Fill> 
  5. </Rectangle> 

因为内置有转换器,微软一向是关心开发者的身体健康的,所以,MS不舍得我们写代码的时候过多劳累,所以,上面的内容可以简写为。

  1. <Rectangle Canvas.Left="110" Canvas.Top="156" 
  2.            Width="120" Height="120" Fill="Blue"/> 

这两段代码实现的效果是一样的,很明显,你会更喜欢后者,因为它简练了N多。

接下来我们看看Color属性有哪些表示方法。

1、名字,比如Blue,不用我翻译了,明白了;

2、RGB,如#CCCCCC,如果你干过网页设计,写过CSS样式,你懂的;

3、ARGB,如#0CBBBBBB,其实就是在前面加一个A值,0-1之间,透明度。

可以说,你记住了以上三点,你就可以写出数不尽的颜色。

二、渐变画刷。

如果你玩过像Photoshop这些绘图软件,或者你做过GDI编程,当然你玩过WPF更好,简直一模一样。
渐变颜色,我们可以通俗地理解为:由N多种颜色组成,这些颜色有各自的分布主式,并且,在各段颜色之间都有一个过渡。

下面看看两种渐变形式:线性和径向。

(一)线性渐变

先看看下面的图,相信没有什么文字可以比图片更直观,相信你一看就知道何为线性渐变,只可意会啊。

好,上面的效果是如何实现的呢?用到这个类LinearGradientBrush。看一看XAML代码。

  1. <Rectangle Canvas.Top="312" Canvas.Left="40" Width="278" Height="95"
  2.     <Rectangle.Fill> 
  3.         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"
  4.             <GradientStop Color="Yellow" Offset="0"/> 
  5.             <GradientStop Color="Green" Offset="0.5"/> 
  6.             <GradientStop Color="Orange" Offset="1"/> 
  7.         </LinearGradientBrush> 
  8.     </Rectangle.Fill> 
  9. </Rectangle> 

其中,我们要关注几个地方:
1、StartPoint,线性渐变的起始点,既然是线性了,肯定有始有终的了,X和Y都在0和1之间;
2、EndPoint,结束点,同样,值范围在0-1之间,包含0和1.
3、0,0点在左上角,1,1点在右下角。
每个LinearGradientBrush都可以包含N个GradientStop,表示每种颜色的终点位置,如下图所示。

 

如果你还不是很理解,最好的法子就是多练习。

  1. <Ellipse Canvas.Top="465" Canvas.Left="40" Width="150" Height="120"
  2.     <Ellipse.Fill> 
  3.         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"
  4.             <GradientStop Color="#FF8E8EE8" /> 
  5.             <GradientStop Color="#FFDBBC55" Offset="0.6" /> 
  6.             <GradientStop Color="#FF61DDF5" Offset="0.99" /> 
  7.         </LinearGradientBrush> 
  8.     </Ellipse.Fill> 
  9. </Ellipse> 

以上两个例子的运行效果如下图所示。

(二)径向渐变

名字不好理解,还是看图写作文吧。

怎么样,美吗?看看实现的XAML代码吧。

  1. <Rectangle Canvas.Left="242" Canvas.Top="465" Width="150" Height="150"
  2.     <Rectangle.Fill> 
  3.         <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"
  4.             <GradientStop Color="Green" Offset="0.2"/> 
  5.             <GradientStop Color="LightBlue" Offset="0.7"/> 
  6.             <GradientStop Color="Yellow" Offset="1"/> 
  7.         </RadialGradientBrush> 
  8.     </Rectangle.Fill> 
  9. </Rectangle> 

看看,有几个属性比刺眼。

1、Center,中心点,你看到了,径向渐变很像一个圆,有中心点,有半径,同样,取值范围是[0,1]。

2、RadiusX和RadiusY,同理,范围在[0,1],横轴和纵轴上的半径。

可以发现这些值都是相对的逻辑值,这样使用比绝对位置更灵活。

三、视频画刷VideoBrush。

这个要配合MediaElement一起使用,在前面的文章中已经介绍过。

四、图象画刷ImageBrush。

如果你觉得前面的都是用颜色的,不够爽,不妨看看这个,用图片来填充。

实现的XAML如下。

  1. <Ellipse Canvas.Left="40" Canvas.Top="445" Width="398" Height="248"
  2.     <Ellipse.Fill> 
  3.         <ImageBrush ImageSource="test.jpg"/> 
  4.     </Ellipse.Fill> 
  5. </Ellipse> 

这个就简单了,ImageSource属性就是指向一张图片,使用方法与Image控件类似。

责任编辑:闫佳明 来源: oschina
相关推荐

2012-08-02 10:16:39

Windows Pho

2012-06-13 13:01:57

Windows Pho

2012-06-11 13:08:10

Windows Pho

2012-06-12 10:43:20

Windows Pho

2012-08-01 10:26:33

Windows Pho

2012-06-25 16:14:26

Windows Pho

2012-08-16 11:31:30

Windows Pho

2012-08-09 13:39:22

Windows Pho

2012-08-13 09:56:45

Windows Pho

2012-06-06 13:48:34

Windows Pho

2012-06-07 09:33:13

Windows Pho

2012-06-20 10:21:50

Windows Pho

2012-07-24 10:15:34

Windows Pho

2012-06-19 09:31:53

Windows Pho

2012-07-13 14:41:12

2012-06-21 10:59:31

Windows Pho

2012-07-11 09:21:35

Windows Pho

2012-07-31 09:44:27

Windows Pho

2012-06-29 14:13:10

2013-07-30 12:37:56

Windows PhoWindows Pho
点赞
收藏

51CTO技术栈公众号