总结WPF支持哪些画笔

  1. SolidColorBrush
  2. LinearGradientBrush
  3. RadialGradientBrush
  4. DrawingBrush
  5. ImageBrush
  6. VisualBrush

以下为各个画笔详解

  • 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>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值