乱弹琴 Silverlight 2.0 (17) 画笔(Brush)

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴Silverlight 2.0 系列文章。

本篇介绍画笔(Brush)的内容。

画笔主要有以下几种：
SolidColorBrush: 纯色画笔
LinearGradientBrush: 线性渐变画笔
RadialGradientBrush: 径向渐变画笔
ImageBrush: 图像画笔
VideoBrush: 视频画笔

继承层次为：
System.Object
  System.Windows.DependencyObject
    System.Windows.Media.Brush
      System.Windows.Media.GradientBrush
        System.Windows.Media.LinearGradientBrush
       System.Windows.Media.RadialGradientBrush
      System.Windows.Media.SolidColorBrush
      System.Windows.Media.TileBrush
        System.Windows.Media.ImageBrush
       System.Windows.Media.VideoBrush

SolidColorBrush

SolidColorBrush是唯一支持属性方式设置的画笔。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Rectangle Canvas.Left="30" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <SolidColorBrush Color="Red"></SolidColorBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <SolidColorBrush Color="Yellow">
            </SolidColorBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <SolidColorBrush Color="White">
            </SolidColorBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

以上的等价代码为：
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Rectangle Canvas.Left="30" Canvas.Top="40" Fill="Red" Width="100" Height="200">    
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Fill="Yellow" Width="100" Height="200">
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Fill="White" Width="100" Height="200">  
    </Rectangle>
</Canvas>

运行效果：


LinearGradientBrush

LinearGradientBrush 使用线性渐变绘制区域。线形渐变横跨一条直线（渐变轴）将两种或更多种色彩进行混合。可以使用 GradientStop 对象指定渐变的颜色及其位置。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Rectangle Canvas.Left="30" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

运行效果：


RadialGradientBrush

RadialGradientBrush 使用径向渐变绘制区域。径向渐变跨一个圆将两种或更多种色彩进行混合。GradientOrigin指定渐变起始原点。与 LinearGradientBrush 类一样，可以使用 GradientStop 对象来指定渐变的色彩及其位置。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Rectangle Canvas.Left="30" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <RadialGradientBrush>
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0.5,1.0">
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="2">
                <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
                <GradientStop Color="Red" Offset="0.5"></GradientStop>
                <GradientStop Color="White" Offset="1.0"></GradientStop>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

C#:
RadialGradientBrush brush = new RadialGradientBrush();
brush.GradientOrigin = new Point(0.5, 0.5);

GradientStop g1 = new GradientStop();
g1.Color = Colors.Yellow;
g1.Offset = 0.5;
//...

brush.GradientStops.Add(g1);
//...

运行效果：


ImageBrush

ImageBrush 使用 ImageSource 绘制一个区域。
Stretch设置填充模式，Stretch 属性接受 Stretch 枚举定义的以下值：
None：不拉伸画笔的内容来填充图块。
Fill：缩放画笔的内容以适合图块。由于内容的高度和宽度是独立缩放的，因此内容的原始长宽比可能不会保留。也就是说，为了完全填充输出图块，画笔的内容可能会扭曲。
Uniform：缩放画笔的内容使其完全放置于图块内。内容的长宽比保留。
UniformToFill：缩放画笔的内容，使它完全填充输出区域，同时保留内容的原始长宽比。

XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <Rectangle x:Name="rect" Canvas.Left="30" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <ImageBrush ImageSource="test.jpg"></ImageBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <ImageBrush ImageSource="test.jpg" Stretch="None"></ImageBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <ImageBrush ImageSource="test.jpg" Stretch="Uniform"></ImageBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

运行效果：


VideoBrush

VideoBrush使用视频元素绘制一个区域。同ImageBrush一样也有Stretch属性。
需要先创建一个MediaElement对象，设置VideoBrush的SourceName属性为该MediaElement对象的名字。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
    <MediaElement x:Name="media" Opacity="0.0" Source="test.wmv">            
    </MediaElement>
    <Rectangle x:Name="rect" Canvas.Left="30" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <VideoBrush SourceName="media"></VideoBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="150" Canvas.Top="40" Width="100" Height="200">
        <Rectangle.Fill>
            <VideoBrush SourceName="media" Stretch="None"></VideoBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Canvas.Left="270" Canvas.Top="40" Width="100" Height="200">  
        <Rectangle.Fill>
            <VideoBrush SourceName="media" Stretch="Uniform"></VideoBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

运行效果：


结束语：

使用画笔，您可以利用任意内容（从简单的纯色到复杂的图案和图像集）绘制用户界面 (UI) 对象。画笔结合图像变换可以实现更加酷炫的效果！

明天"五一"劳动节，祝大家节日快乐！