WPF中绘画和动画（3）

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>

实际效果如图2所示：