WPF中绘画和动画（三）

1． 矩形

矩形由笔触（Stroke，即边线）和填充（Fill）构成。Stroke属性的设置于Line一样，Fill属性的数据类型是Brush。Brush是个抽象类，所以我们不可能拿一个Brush类的实例为Fill属性赋值而只能用Brush派生类的实例进行赋值。

WPF的绘画系统包含非常丰富的Brush类型，常用的有：

（1） SolidColorBrush：实心画刷。在XAML中可以使用颜色名称字符串（如Red、Blu）直接赋值。

（2） LinearGradientBrush：线性渐变画刷。色彩艳设定的直线方向、按设定的变化点进行渐变。

（3） RadialGradientBrush：径向渐变画刷。色彩沿半径的方向、按设定的变化点进行渐变，形成圆形填充。

（4） ImageBrush：使用图片（Image）作为填充内容。

（5） DrawingBrush：使用矢量图（Vector）和位图（Bitmap）作为填充内容。

（6） VisualBrush：WPF中的每个控件都是由FrameworkElement类派生来的，而FrameworkElement又是由Visual类派生来的。Visual意为“可视”之意，每个控件的可视化形象就可以通过Visual类的方法获得。获得这个可视化的形象后，我们可以用这个形象进行填充，这就是VisualBrush。比如当我想把窗体上的某个控件拽到另一个位置，当鼠标松开之前需要在鼠标只指针下显现一个控件的“幻影”，这个“幻影”就是用VisualBrush填充出来的一个矩形，并让矩形捕捉鼠标的位置、随鼠标移动。

下面是用各种画刷填充矩形的综合实例：

<Window x:Class="WpfApplication1.Window1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Rectangle and Brush" Height="390" Width="600">

    <Grid Margin="10">

        <Grid.RowDefinitions>

            <RowDefinition Height="160"/>

           <RowDefinition Height=" 10"/>

            <RowDefinition Height="160"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="180"/>

            <ColumnDefinition Width="10"/>

            <ColumnDefinition Width="180"/>

            <ColumnDefinition Width="10"/>

            <ColumnDefinition Width="180"/>

        </Grid.ColumnDefinitions>

        <!--实心填充-->

        <Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>

        <!--线性渐变-->

        <Rectangle Grid.Column="2" Grid.Row="0">

            <Rectangle.Fill>

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

                    <GradientStop Color="#ffb6f8f1" Offset="0"/>

                    <GradientStop Color="#ff0082bd" Offset="0.25"/>

                    <GradientStop Color="#ff95deff" Offset="0.6"/>

                    <GradientStop Color="#ff004f72" Offset="1"/>                   

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

       <!--径向渐变-->

        <Rectangle Grid.Column="4" Grid.Row="0">

            <Rectangle.Fill>

                <RadialGradientBrush>

                    <GradientStop Color="#ffb6f8f1" Offset="0"/>

                    <GradientStop Color="#ff0082bd" Offset="0.25"/>

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

                    <GradientStop Color="#ff004f72" Offset="1.5"/>                   

                </RadialGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <!--图片填充-->

        <Rectangle Grid.Column="0" Grid.Row="2">

            <Rectangle.Fill>

                <ImageBrush ImageSource=".\Images\logo.bmp" Viewport="0,0,0.3,0.15" TileMode="Tile"/>

            </Rectangle.Fill>

        </Rectangle>

        <!--矢量图填充-->

        <Rectangle Grid.Column="2" Grid.Row="2">

            <Rectangle.Fill>

                <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">

                    <DrawingBrush.Drawing>

                        <GeometryDrawing Brush="LightBlue">

                            <GeometryDrawing.Geometry>

                                <EllipseGeometry RadiusX="10" RadiusY="10"/>

                            </GeometryDrawing.Geometry>

                        </GeometryDrawing>

                    </DrawingBrush.Drawing>

                </DrawingBrush>

            </Rectangle.Fill>

        </Rectangle>

        <!—无填充，用线性渐变填充边线-->

        <Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">

            <Rectangle.Stroke>

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

                    <GradientStop Color="White" Offset="0.3"/>

                    <GradientStop Color="Black" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Stroke>

        </Rectangle>

    </Grid>

</Window>

实际效果如下图所示：