概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文将简单介绍Silverlight中的画刷，在Silverlight中，共提供了五种：SolidColorBrush、LinearGradientBrush、RadialGradientBrush、ImageBrush、VideoBrush，接下来将逐一进行介绍。

SolidColorBrush

SolidColorBrush用单一的颜色进行填充， 在使用SolidColorBrush时只要指定Color属性就可以了，除此之外，还可以选择指定Opacity等属性。在我们使用其他图形时，如果指定了Fill属性，则默认会用SolidColorBrush进行填充。下面的示例，使用SolidColorBrush填充两个矩形：

<Canvas Background="#CDFCAE">

    <Rectangle Canvas.Top="60" Canvas.Left="20"

               Width="200" Height="100" Stroke="Green"

               StrokeThickness="2">

        <Rectangle.Fill>

            <SolidColorBrush Color="Orange">

            </SolidColorBrush>

        </Rectangle.Fill>

    </Rectangle>

    <Rectangle Canvas.Top="60" Canvas.Left="280"

               Width="200" Height="100" Stroke="Green"

               StrokeThickness="2">

        <Rectangle.Fill>

            <SolidColorBrush Color="Orange"

                             Opacity="0.5">

            </SolidColorBrush>

        </Rectangle.Fill>

    </Rectangle>

</Canvas>

运行后如下所示：

LinearGradientBrush

LinearGradientBrush将会使用线性渐变来进行填充，需要设置渐变的坐标：起始点属性StartPoint和结束点EndPoint，两点的坐标最大值为1，最小值为0，用GradientStop来设置不同的颜色渐变以及它的偏移量。如下面的例子：

<Canvas Background="#FFFFFF">

    <Rectangle Canvas.Top="40" Canvas.Left="100"

           Width="300" Height="160" Stroke="Green"

           StrokeThickness="4">

        <Rectangle.Fill>

            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                <GradientStop Color="#FBFE03" Offset="0.0" />

                <GradientStop Color="#41F702" Offset="0.25" />

                <GradientStop Color="#FF0000" Offset="0.75" />

                <GradientStop Color="#0066FF" Offset="1.0" />

            </LinearGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

</Canvas>

运行后如下图所示：

下面我们对渐变的坐标以及各个颜色渐变的偏移量做一下解释，如下图所示：

设置不同的渐变起始点和偏移量我们可以得到多种不同的渐变效果，如下面的示例：

<Canvas Background="#FFFFFF">

    <Rectangle Canvas.Top="80" Canvas.Left="20"

           Width="120" Height="80" Stroke="Green"

           StrokeThickness="4">

        <Rectangle.Fill>

            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                <GradientStop Color="#FBFE03" Offset="0.0" />

                <GradientStop Color="#41F702" Offset="0.25" />

                <GradientStop Color="#FF0000" Offset="0.75" />

                <GradientStop Color="#0066FF" Offset="1.0" />

            </LinearGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

    <Rectangle Canvas.Top="80" Canvas.Left="160"

           Width="120" Height="80" Stroke="Green"

           StrokeThickness="4">

        <Rectangle.Fill>

            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <GradientStop Color="#FBFE03" Offset="0.0" />

                <GradientStop Color="#41F702" Offset="0.25" />

                <GradientStop Color="#FF0000" Offset="0.75" />

                <GradientStop Color="#0066FF" Offset="1.0" />

            </LinearGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

    <Rectangle Canvas.Top="80" Canvas.Left="300"

           Width="120" Height="80" Stroke="Green"

           StrokeThickness="4">

        <Rectangle.Fill>

            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                <GradientStop Color="#FBFE03" Offset="0.0" />

                <GradientStop Color="#41F702" Offset="0.25" />

                <GradientStop Color="#FF0000" Offset="0.75" />

                <GradientStop Color="#0066FF" Offset="1.0" />

            </LinearGradientBrush>

        </Rectangle.Fill>

    </Rectangle>

</Canvas>

运行后如下图所示：

RadialGradientBrush

RadialGradientBrush使用放射性渐变来进行颜色填充，用GradientOrigin来指定放射源的位置坐标，Center指定图形的中心位置坐标，RadiusX和RadiusY分别指定在X轴和Y轴上的放射半径，同样使用GradientStop指定不同颜色的渐变及偏移量，如下面的例子：

<Canvas Background="#CDFCAE">

    <Ellipse Canvas.Top="30" Canvas.Left="100"

             Width="300" Height="180">

        <Ellipse.Fill>

            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

                                RadiusX="0.5" RadiusY="0.5">

                <GradientStop Color="#FBFE03" Offset="0.0" />

                <GradientStop Color="#41F702" Offset="0.25" />

                <GradientStop Color="#FF0000" Offset="0.75" />

                <GradientStop Color="#0066FF" Offset="1.0" />

            </RadialGradientBrush>

        </Ellipse.Fill>

    </Ellipse>

</Canvas>

运行后如下所示：

在这个示例中，对于上面提到的放射源位置的坐标和图形中心坐标、在X轴和Y轴上的放射半径它们四个之间的关系，大家看下面四个圆形，我们为四个属性设置不同的值：

<Canvas Background="#CDFCAE">

    <Ellipse Canvas.Top="20" Canvas.Left="80"

             Width="120" Height="120">

        <Ellipse.Fill>

            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

                                RadiusX="0.5" RadiusY="0.5">

                <GradientStop Color="#FFFFFF" Offset="0.0" />

                <GradientStop Color="#000000" Offset="1.0" />

            </RadialGradientBrush>

        </Ellipse.Fill>

    </Ellipse>

    <Ellipse Canvas.Top="20" Canvas.Left="280"

             Width="120" Height="120">

        <Ellipse.Fill>

            <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5"

                                RadiusX="0.5" RadiusY="0.5">

                <GradientStop Color="#FFFFFF" Offset="0.0" />

                <GradientStop Color="#000000" Offset="1.0" />

            </RadialGradientBrush>

        </Ellipse.Fill>

    </Ellipse>

    <Ellipse Canvas.Top="160" Canvas.Left="80"

             Width="120" Height="120">

        <Ellipse.Fill>

            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

                                RadiusX="0.25" RadiusY="0.5">

                <GradientStop Color="#FFFFFF" Offset="0.0" />

                <GradientStop Color="#000000" Offset="1.0" />

            </RadialGradientBrush>

        </Ellipse.Fill>

    </Ellipse>

    <Ellipse Canvas.Top="160" Canvas.Left="280"

             Width="120" Height="120">

        <Ellipse.Fill>

            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

                                RadiusX="0.5" RadiusY="0.25">

                <GradientStop Color="#FFFFFF" Offset="0.0" />

                <GradientStop Color="#000000" Offset="1.0" />

            </RadialGradientBrush>

        </Ellipse.Fill>

    </Ellipse>

</Canvas>

运行后的效果如下所示，在图上标注了他们各自的放射源位置坐标、中心位置坐标、X轴上和Y轴上的放射半径。

ImageBrush

ImageBrush使用图片来对图形进行填充，使用方式比较简单，我们只需要指定ImageSource属性就可以了，如下面的例子使用图片来填充一个矩形：

<Canvas Background="#CDFCAE">

    <Rectangle Canvas.Top="40" Canvas.Left="100"

       Width="300" Height="160" Stroke="Green"

       StrokeThickness="4" RadiusX="10" RadiusY="10">

        <Rectangle.Fill>

            <ImageBrush ImageSource="bg1.png"></ImageBrush>

        </Rectangle.Fill>

    </Rectangle>

</Canvas>

运行后效果如下所示：

对于图片我们后面会有专门一篇文章进行讲解，这里就不再说明。

结束语

本文简单介绍了Silverlight中的Brushes，这些Brushes对于自定义控件的外观或者做出更酷更炫的界面效果，将会有很大的帮助。

作者：TerryLee
出处：http://terrylee.cnblogs.com 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
 

一步一步学Silverlight 2系列（27）：使用Brush进行填充的更多相关文章

  1. 一步一步学Silverlight 2系列文章

    概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...

  2. 一步一步学Silverlight 2系列（32）：图形图像综合实例—“功夫之王”剧照播放

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. 一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 一步一步学Silverlight 2系列（30）：使用Transform实现更炫的效果（下）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. 一步一步学Silverlight 2系列（29）：使用Transform实现更炫的效果（上）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. 一步一步学Silverlight 2系列（28）：图片处理

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  7. 一步一步学Silverlight 2系列（26）：基本图形

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  8. 一步一步学Silverlight 2系列（25）：综合实例之Live Search

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. 一步一步学Silverlight 2系列（24）：与浏览器交互相关辅助方法

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

随机推荐

  1. UOJ#370. 【UR #17】滑稽树上滑稽果

    $n \leq 1e5$个点,每个点有个权值$a_i \leq 2e5$.现将点连成树,每个点$i$的链接代价为$a_i \ \ and \ \ i父亲的代价$,这里的$and$是二进制按位与,求最小 ...

  2. hdu 4965 矩阵快速幂 矩阵相乘性质

    Fast Matrix Calculation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Jav ...

  3. Educational Codeforces Round 36 (Rated for Div. 2) G. Coprime Arrays

    求a_i 在 [1,k]范围内,gcd(a_1,a_2...,a_n) = 1的a的数组个数. F(x)表示gcd(a_1,a_2,...,a_n) = i的a的个数 f(x)表示gcd(a_1,a_ ...

  4. 【WEB基础】HTML & CSS 基础入门（5）边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

  5. 常用业务返回对象类ResponseJson

    目录 1.ResponseJson类 2.使用举例 1.ResponseJson类 import java.io.Serializable; public class ResponseJson imp ...

  6. Vue.js组件的通信之子组件向父组件的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. win7系统使用engine进行开发报错，“未能加载文件或程序集”

    http://www.gisall.com/wordpress/?p=7161 使用vs2010加 arcengine 开发winfrom应用,新建了uc,拖了几个控件后,编译,报未能加载文件或程序集 ...

  8. 使用 Unicode 编码

    面向公共语言执行库的应用程序使用编码将字符表示形式从本机字符方案(Unicode)映射为其它方案. 应用程序使用解码将字符从非本机方案(非 Unicode)映射为本机方案. System.Text 命 ...

  9. Effective C++ 43，44

    43.明智地使用多继承. 多继承带来了极大的复杂性.最主要的一条就是二义性. 当派生类为多继承时,其多个基类有同名的成员时,就会出现二义性.通常要明白其使用哪个成员的.显式地限制修饰成员不仅非常笨拙, ...

  10. C#读取指定路径下的Config配置文件

    ExeConfigurationFileMap map = new ExeConfigurationFileMap(); map.ExeConfigFilename = @"F:\App1. ...