关于WPF的画笔_wpf canvas 画笔

画笔是什么，通俗的可以理解成画画用的笔吧，用来绘制我们的项目界面，让界面更加的绚丽多彩和富有层次。

下面我们就了解以下画笔是怎么用的吧。

 

一、SolidColorBrush

SolidColorBrush是一支使用纯色的画笔。全部区域用同一种颜色绘制。

下面我们把Background属性设置为定义纯色的字符串，就可以定义纯色，使用BrushValueSerializer把字符串转换为一个SolidColorBursh元素。

<Button Height="30" Background="PapayaWhip"/>

在设置Background子元素，把SolidColorBrush元素添加为它的内容，也可以得到同样的效果，应用程序中的第一个按钮大PapayaWhip用作纯背景色：

<Button Height="30" Margin="0,276,-0.4,64.4" Content="Solid Color">

            <Button.Background>

                <SolidColorBrush Color="PapayaWhip"/>

            </Button.Background>

        </Button>

如图所示：

• LinearGradientBrush

对于平滑颜色变化，就是我们说的渐变色。可以使用LinearGradientBrush。这个画笔定义了StartPoint和EndPoint属性。使用这些属性可以为线性渐变指定2D坐标。默认的渐变方向是从（0,0）到（1,1）的对角线。定义其他值可以给渐变指定不同的方向。例如，StartPoint指定为（0,0），EndPoint指定为（0,1），就得到了一个垂直渐变。StartPoint不变，EndPoint值指定为（1,0），就得到了一个水平渐变。

 

通过画笔的内容，可以用GradientStop元素定义指定偏移位置的颜色值。在各个偏移位置之间，颜色是平滑过渡的

<Button Height="80" Content="Linear Gradient Brush">

            <Button.Background>

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

                    <GradientStop Offset="0" Color="LightBlue"/>

                    <GradientStop Offset="0.4" Color="Blue"/>

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

                </LinearGradientBrush>

            </Button.Background>

<Button/>

• RadialGradientBrush

使用RadialGradientBrush可以以放射产生平滑的颜色渐变。代码中，第三个元素Path使用了RadialGradientBrush。该画笔定义了从GradientOrigin点开始的颜色

<Canvas Width="200" Height="150">

        <Path Canvas.Top="0" Canvas.Left="20" Stroke="Black">

            <Path.Fill>

                <RadialGradientBrush GradientOrigin="0.2,0.2">

                    <GradientStop Offset="0" Color="LightBlue"/>

                    <GradientStop Offset="0.6" Color="Blue"/>

                    <GradientStop Offset="1.0" Color="DarkBlue"/>

                </RadialGradientBrush>

            </Path.Fill>

            <Path.Data>

                <CombinedGeometry GeometryCombineMode="Union">

                    <CombinedGeometry.Geometry1>

                        <EllipseGeometry Center="80,60" RadiusX="80" RadiusY="40"/>

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                        <RectangleGeometry Rect="30,60 105 50"/>

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

            </Path.Data>

        </Path>

    </Canvas>

• DrawingBrush

DrawingBrush可以定义用画笔绘制的图形。用画笔绘制的图形在GeometryDrawing元素中定义。

<Button Content="Drawing Brush" Margin="10" Padding="10">

        <Button.Background>

            <DrawingBrush>

                <DrawingBrush.Drawing>

                    <GeometryDrawing Brush="Red">

                        <GeometryDrawing.Pen>

                            <Pen>

                                <Pen.Brush>

                                    <SolidColorBrush>Blue</SolidColorBrush>

                                </Pen.Brush>

                            </Pen>

                        </GeometryDrawing.Pen>

                        <GeometryDrawing.Geometry>

                            <PathGeometry>

                                <PathGeometry.Figures>

                                    <PathFigure StartPoint="70,40">

                                        <PathFigure.Segments>

                                            <BezierSegment Point1="90,70"Point2="130,46"

                                                           Point3="150,63"/>

                                            <LineSegment Point="120,110"/>

                                            <BezierSegment Point1="100,95" Point2="70,90" Point3="45,91"/>

                                            <LineSegment Point="70,40"/>

                                        </PathFigure.Segments>

                                    </PathFigure>

                                </PathGeometry.Figures>

                            </PathGeometry>

                        </GeometryDrawing.Geometry>

                    </GeometryDrawing>

                </DrawingBrush.Drawing>

            </DrawingBrush>

        </Button.Background>

    </Button>

效果如图所示：

• ImageBrush

    要把图像加载到画笔中，可以使用ImageBrush元素。通过这个元素，显示ImageSource属性定义的图像。图像可以从文件系统中访问，或者在程序集中访问。

<Button Content="Image Brush" Width="100" Height="80" Margin="5" Foreground="White">

        <Button.Background>

            <ImageBrush ImageSource="Images/55e90e5e13194.jpg"/>

        </Button.Background>

    </Button>

效果如图所示：

• VisualBrush

VisualBrush可以在画笔中使用其他WPF元素。下面给Visual添加一个WPF元素，第六个元素包含了一个矩形和一个按钮

<Button Content="Visual Brush" Width="100" Height="80">

        <Button.Background>

            <VisualBrush>

                <VisualBrush.Visual>

                    <StackPanel Background="White">

                        <Rectangle Width="25" Height="25" Fill="Blue"/>

                        <Button Content="Drawing Button" Background="Red"/>

                    </StackPanel>

                </VisualBrush.Visual>

            </VisualBrush>

        </Button.Background>

    </Button>

在VisualBrush中，还可以创建反射等有趣的效果。这里显示的按钮包括一个StackPanel，它包含一个播放视频的MediaElement和一个Border。Border边框包含一个用VisualBrush填充的矩形。这支画笔定义了一个不透明的值和一个变换。把Visual属性订到Border元素上。变换通过设置VisualBrush的RelativeTransform属性来完成。这个变换使用了相对坐标。把ScaleY设置为-1.完成Y方向上的反射。TranslateTransform在Y方向上移动变换。从而使反射效果位于原始对象的下面:

<Button Width="200" Height="200" Foreground="White">

        <StackPanel>

            <MediaElement x:Name="reflected" Source="古风/Demo_小.mp4"/>

            <Border Height="100">

               <Rectangle>

                    <Rectangle.Fill>

                        <VisualBrush Opacity="0.35" Stretch="None" Visual="{Binding ElementName=reflected}">

                            <VisualBrush.RelativeTransform>

                                <TransformGroup>

                                    <ScaleTransform ScaleX="1" ScaleY="1"/>

                                </TransformGroup>

                            </VisualBrush.RelativeTransform>

                        </VisualBrush>

                    </Rectangle.Fill>

                </Rectangle>

            </Border>

        </StackPanel>

    </Button>