Silverlight学习笔记--SilverLight中的画刷

概述SliverLight中的画刷有以下几种： SolidColorBrush: 纯色画刷。主要属性有：Color。 LinearGradientBrush: 线性渐变画刷。主要属性有：StartPoint, EndPoint, GradientStop, SpreadMethod。 RedialGradientBrush: 径向渐变画刷。主要属性有：Center, RadiusX, RadiusY,

Sliverlight中的画刷有以下几种：

SolIDcolorBrush: 纯色画刷。主要属性有：color。

linearGradIEntBrush: 线性渐变画刷。主要属性有：StartPoint,EndPoint,GradIEntStop,SpreadMethod。

RedialGradIEntBrush: 径向渐变画刷。主要属性有：Center,RadiusX,RadiusY,GradIEntOrigin,GradIEntStop。

ImageBrush: 图像画刷。主要属性有：ImageSource,Stretch,AlignmentX,AlignmentY。

VIDeoBrush: 视频画刷。主要属性有：Sourcename,AlignmentY。

1. SolIDcolorBrush.

纯色画刷比较简单，就是设置一个颜色值给color属性。但这个颜色值可以设置成：

颜色字符串：如 Red，Blue等等。总共有256个命名的颜色串。

RGB值：如 #0099FF,#F1F1F1等等。这个跟网页中指定的颜色一样。

ARGB值：如#880099FF,比RGB多了Alpha通道信息，用于指定透明度。

RGB还有一种方式就是如：#09F， #809F，这就是把每一位重复，这样就得到#0099FF， #880099FF。

2. linearGradIEntBrush.

先写个最简单的。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Rectangle WIDth="80" Height="60">        <Rectangle.Fill>            <linearGradIEntBrush StartPoint="0,0" EndPoint="1,1">                <GradIEntStop Offset="0" color="Blue" />                <GradIEntStop Offset="1" color="Red" />            </linearGradIEntBrush>        </Rectangle.Fill>            </Rectangle></Canvas>

渐变的设计挺有意思的，StartPoint和EndPoint描述了一条线，左上角是0,右下角是1,1，这条线是相对于对象的大小

的相对位置，也就是说，假定对象的宽度和高度都是1. 这样，不管对象是什么大小，都可以用同样的值来描述。如果不设置

StartPoint和EndPoint，那么就是从左上角到右下角的一条线。这条线就是渐变的基准线。

然后每一个GradIEntStop中的Offset就是基于这条线上的相对位置，同样，这条线也假定长度为1. Offset就是0到1中间

的一个值，也就指定了基准线上位置。再指定一个color,就代表从上一个点到这个点的线性渐变颜色。

那么，上面的设置就使得rectangle填充成从右上角的蓝色到右下角的红色渐变。

注意，实际上这些相对值，就是StartPoint，EndPoint,Offset都是可以设成小于0或大于1的值。

下来，再看几个例子。

横向渐变：就是把StartPoint和EndPoint设成: ( 0,0 ) –> ( 1,0 ),也就是Y值不变，X值变。

纵向渐变：就是把StartPoint和EndPoint设成：( 0,0 ) –> ( 0,1 ),也就是X值不变，Y值变。

多个颜色值渐变：就是多放几个GradIEntStop。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Rectangle WIDth="80" Height="60" Canvas.left="0">        <Rectangle.Fill>            <linearGradIEntBrush StartPoint="0,0">                <GradIEntStop Offset="0" color="Blue" />                <GradIEntStop Offset="1" color="Red" />            </linearGradIEntBrush>        </Rectangle.Fill>            </Rectangle>    <Rectangle WIDth="80" Height="60" Canvas.left="90">        <Rectangle.Fill>            <linearGradIEntBrush StartPoint="0,0" EndPoint="0,1">                <GradIEntStop Offset="0" color="Blue" />                <GradIEntStop Offset="1" color="Red" />            </linearGradIEntBrush>        </Rectangle.Fill>    </Rectangle>    <Rectangle WIDth="80" Height="60" Canvas.top="70">        <Rectangle.Fill>            <linearGradIEntBrush StartPoint="0,1">                <GradIEntStop Offset="0" color="Red" />                <GradIEntStop Offset="0.2" color="Orange" />                <GradIEntStop Offset="0.4" color="Yellow" />                <GradIEntStop Offset="0.6" color="Green" />                <GradIEntStop Offset="0.8" color="Blue" />                <GradIEntStop Offset="1" color="Purple" />            </linearGradIEntBrush>        </Rectangle.Fill>    </Rectangle>    <Rectangle WIDth="80" Height="60" Canvas.top="70" Canvas.left="90">        <Rectangle.Fill>            <linearGradIEntBrush StartPoint="0,0">                <GradIEntStop Offset="0" color="Red" />                <GradIEntStop Offset="0.4" color="Blue" />                <GradIEntStop Offset="0.4" color="Yellow" />                <GradIEntStop Offset="0.6" color="Yellow" />                <GradIEntStop Offset="0.6" color="Green" />                <GradIEntStop Offset="1" color="Orange" />            </linearGradIEntBrush>        </Rectangle.Fill>    </Rectangle></Canvas>

第1个是横向渐变，第2个是纵向渐变，第3个是多颜色渐变，第4个是带有纯色的多颜色渐变。

最后，还有一个属性SpreadMethod,顾名思义，这就是覆盖方法。这是当渐变没有填充完整个对象时，那么剩下的部分用什么

颜色来填充。可以设的值有：

Pad: 这是默认值。就是用最后一个颜色值来填充。

Repeat: 重复。就是再从第一个颜色往后开始画渐变。

Reflect: 反射。就是从最后一个往前开始画渐变。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Rectangle WIDth="80" Height="60">        <Rectangle.Fill>            <linearGradIEntBrush SpreadMethod="Repeat" StartPoint="0,0.5">                <GradIEntStop Offset="0" color="Red" />                <GradIEntStop Offset="0.2" color="Orange" />                <GradIEntStop Offset="0.4" color="Yellow" />                <GradIEntStop Offset="0.6" color="Green" />             </linearGradIEntBrush>        </Rectangle.Fill>    </Rectangle>    <Rectangle WIDth="80" Height="60" Canvas.left="90">        <Rectangle.Fill>            <linearGradIEntBrush SpreadMethod="Reflect" StartPoint="0,0.5">                <GradIEntStop Offset="0" color="Red" />                <GradIEntStop Offset="0.2" color="Orange" />                <GradIEntStop Offset="0.4" color="Yellow" />                <GradIEntStop Offset="0.6" color="Green" />            </linearGradIEntBrush>        </Rectangle.Fill>    </Rectangle></Canvas>

3. RedialGradIEntBrush.

线性渐变定义了一条基准线，而径向渐变使用Center(圆心),RadiusX(x轴半径),RadiusY(y轴半径)，这三个属性定义

了一个椭圆，GradIEntStop中的颜色就是从圆心到四周以椭圆渐变填充。如下面例子：

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Ellipse WIDth="80" Height="60">        <Ellipse.Fill>            <RadialGradIEntBrush>                <GradIEntStop Offset="0" color="Blue" />                <GradIEntStop Offset="1" color="Red" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse></Canvas>

这里没有Center,默认这三个值分别是（0.5,0.5），（0.5），（0.5）。就是以中心点向四周渐变。

再看下面的例子,把基准圆设成一个椭圆。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Ellipse WIDth="80" Height="60">        <Ellipse.Fill>            <RadialGradIEntBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.25">                <GradIEntStop Offset="0" color="Blue" />                <GradIEntStop Offset="1" color="Red" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse></Canvas>

还有一个属性，GradIEntOrigin，用来设置渐变色从那里开始的。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Ellipse WIDth="80" Height="80">        <Ellipse.Fill>            <RadialGradIEntBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradIEntOrigin="0,0">                <GradIEntStop Offset="0" color="White" />                <GradIEntStop Offset="1" color="Blue" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse>    <Ellipse WIDth="80" Height="80" Canvas.left="90">        <Ellipse.Fill>            <RadialGradIEntBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradIEntOrigin="1,0">                <GradIEntStop Offset="0" color="White" />                <GradIEntStop Offset="1" color="Blue" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse>    <Ellipse WIDth="80" Height="80" Canvas.top="90">        <Ellipse.Fill>            <RadialGradIEntBrush Center="0.5,1">                <GradIEntStop Offset="0" color="White" />                <GradIEntStop Offset="1" color="Blue" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse>    <Ellipse WIDth="80" Height="80" Canvas.top="90" Canvas.left="90">        <Ellipse.Fill>            <RadialGradIEntBrush Center="0.5,1">                <GradIEntStop Offset="0" color="White" />                <GradIEntStop Offset="1" color="Blue" />            </RadialGradIEntBrush>        </Ellipse.Fill>    </Ellipse>    </Canvas>

最后，RadialGradIEntBrush也有 SpreadMethod 属性，用法跟linearGradIEntBrush一样。

4. ImageBrush.

ImageBrush的Stretch属性，与<Image>中的Stretch一样，这里就不说了。

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Ellipse WIDth="80" Height="80">        <Ellipse.Fill>            <ImageBrush ImageSource="Penguins_Small.jpg" />        </Ellipse.Fill>    </Ellipse>    </Canvas>

另外，如果图像小于填充区域的话，还可以设置AlignmentX(可设为：left,Center,Right)和AlignmentY( top,

Center,Bottom)属性来实现对齐方式。

5. VIDeoBrush.

<Canvas     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <MediaElement x:name="myVIDeo" Autoplay="True" Source="test.wmv" Volume="4" Opacity="0"/>    <Ellipse WIDth="80" Height="80">        <Ellipse.Fill>            <VIDeoBrush Sourcename="myVIDeo" Stretch="Fill"/>        </Ellipse.Fill>    </Ellipse>    </Canvas>

总结

以上是内存溢出为你收集整理的Silverlight学习笔记--SilverLight中的画刷全部内容，希望文章能够帮你解决Silverlight学习笔记--SilverLight中的画刷所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。