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=".Imageslogo.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>

实际效果如下图所示:
这里写图片描述

相关内容推荐