开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

WPF设计の画刷(Brush)

简介: 原文:WPF设计の画刷(Brush)   一、什么是画刷         画刷是是一种渲染方式,用于填充图形形状,如矩形、椭圆、扇形、多边形和封闭路径。在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,LinearGradientBrush和PathGradientBrush。
+关注继续查看
原文:WPF设计の画刷(Brush)

 

一、什么是画刷

        画刷是是一种渲染方式,用于填充图形形状,如矩形、椭圆、扇形、多边形和封闭路径。在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,LinearGradientBrush和PathGradientBrush。在层次关系上,它们都位于System.Drawing空间下,继承自System.Drawing.Brush类。

       画刷主要分为三大类:

 

1、SolidBrush(实心画刷)我们最常用

    实心画刷是我们用的最多的,也是最简单的一个,其实也就是填充色的意思,一个很简单的例子:

其实这里的Background=Red使用的就是SolidColorBrush,xaml进行解析时,发现Background是Brush类型,刚才我也说了

Brush具有图形转换的能力,最后xaml就会通过Transform把”Red"字符串解析成SolidColorBrush,更直观一点的话,我们可以

用C#代码来描述。

1     public partial class MainWindow : Window
2     {
3         public MainWindow()
4         {
5             InitializeComponent();
6 
7             button1.Background = new SolidColorBrush(Colors.Red);
8         }
9     }

2、GradientBrush(梯度画刷、渐变画刷)

a、线性渐进画刷

<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Canvas>
<Rectangle Canvas.Left="51" Canvas.Top="187" Height="101" Name="rectangle2" Stroke="Black" Width="325">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Window>

得到的效果:

b、圆形梯度画刷

  <Ellipse x:Name="ellipseWithRadialGradientBrush" Height="113.56" Stroke="#FF000000">
   <Ellipse.Fill>
    <RadialGradientBrush>
     <GradientStop Color="#FFA21212" Offset="1"/>
     <GradientStop Color="#FFF8C906" Offset="0"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>

效果:

中心偏移:

  <Ellipse x:Name="ellipseWithRadialGradientBrushCenterOffset" Stroke="#FF000000">
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.399,0.149">
     <GradientStop Color="#FFA21212" Offset="1"/>
     <GradientStop Color="#FFF8C906" Offset="0"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>

3、ImageBrush(图像画刷) 

     顾名思义,就是把图像转换为画刷的方式渲染。

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="400" Width="600">
    <Grid>
        <Grid.Background>
            <ImageBrush x:Name="landBrush" ImageSource="C:\Users\john\Desktop\test.gif"/>
        </Grid.Background>
    </Grid>
</Window>

4、VisualBrush(控件画刷)

这个我们可以用来做水印。

首先作为windows资源引入:

        <Window.Resources>
            <VisualBrush x:Key="test" TileMode="Tile" Opacity="0.8">
                <VisualBrush.Visual>
                    <StackPanel>
                        <TextBlock Foreground="Gold">
                       昨夜星辰昨夜风
                        </TextBlock>
                        <TextBlock Foreground="LightBlue">
                       画楼西畔桂堂东
                        </TextBlock>
                        <TextBlock Foreground="LightGray">
                       身无彩凤双飞翼
                        </TextBlock>
                        <TextBlock Foreground="Pink">
                      心有灵犀一点通
                        </TextBlock>
                    </StackPanel>
                </VisualBrush.Visual>
            </VisualBrush>
        </Window.Resources>

 

5、DrawingBrush(自定义画刷)

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DrawingBrush x:Key="test">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing>
                            <!-- 绘制矩形 -->
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry RadiusX="0.2" RadiusY="0.5"
                                                       Rect="0.02,0.02,0.96,0.96" />
                            </GeometryDrawing.Geometry>
                            <!-- 矩形填充色 -->
                            <GeometryDrawing.Brush>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="Green" Offset="0" />
                                    <GradientStop Color="Red" Offset="1" />
                                </LinearGradientBrush>
                            </GeometryDrawing.Brush>
                            <!-- 矩形边框 -->
                            <GeometryDrawing.Pen>
                                <Pen Thickness="0.02">
                                    <Pen.Brush>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="AliceBlue" Offset="0" />
                                            <GradientStop Color="Black" Offset="1" />
                                        </LinearGradientBrush>
                                    </Pen.Brush>
                                </Pen>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Window.Resources>
    <Grid>
        <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" />
    </Grid>
</Window>

 

 

6、常见效果举例:

a、头像:

    <Grid>
        <Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Width="113" Height="113">
            <Ellipse.Fill>
                <ImageBrush ImageSource="Resources/wx_camera_1504279469046.jpg"/>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>

效果:

 b、对称:

XAML代码:
<Ellipse x:Name="ellipseWithDrawingBrush" Stroke="#FF000000" Width="113" Height="113">
  <Ellipse.Fill>
  <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing Brush="Red">
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
                  <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Pen>
                <Pen Thickness="10">
                  <Pen.Brush>
                    <LinearGradientBrush>
                      <GradientStop Offset="0.0" Color="Black" />
                      <GradientStop Offset="1.0" Color="Gray" />
                    </LinearGradientBrush>
                  </Pen.Brush>
                </Pen>
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
</Ellipse.Fill>
  </Ellipse>

 

 

DrawingBrush填充后的效果

 

注意ImageBrush中属性的设置和不同的效果

     TileMode="FlipX"
     AlignmentX="Left"
     AlignmentY="Top"
     Viewport="0,0,0.3,0.3"

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF设计の自定义窗体
原文:WPF设计の自定义窗体   效果图如下:     实现思路:  1.继承Window类 2.为自定义的CustomWindow类设计窗体样式(使用Blend很方便!) 3.为窗体增加最大最小化和关闭按钮,并实现鼠标拖拽改变窗体大小(使用Derek Bartram的WindowResizer.
791 0
WPF设计の不规则窗体
原文:WPF设计の不规则窗体   我们在工作中,经常会需要画一些不规则的窗体,现在总结如下。 一、利用VisualBrush实现。这依赖于VisualBrush的特性,任何控件可以作为画刷,而画刷又可以作为背景。
622 0
wpf控件设计时支持(3)
原文:wpf控件设计时支持(3)     wpf设计时调试 编辑模型 装饰器 1.wpf设计时调试   为了更好的了解wpf设计时框架,那么调试则非常重要,通过以下配置可以调试控件的设计时代码 (1)将启动项目配置成外部的visual studio ide启动程序devenv.
579 0
wpf控件设计时支持(2)
原文:wpf控件设计时支持(2) 这篇介绍在wpf设计时集合项属性添加项的定义和自定义控件右键菜单的方法 集合项属性设计时支持   1.为集合属性设计器识别具体项类型 wpf设计器允许定义集合项的类型,如新发布的WPF的DataGrid控件,其中的Columns包括一下几种类型,Columns集合属性是以下几个类型的抽象类集合.
807 0
wpf控件设计时支持(1)
原文:wpf控件设计时支持(1)    这部分内容几乎是大家忽略的内容,我想还是来介绍一下. 本篇源码下载 1.属性元数据 在vs IDE中,在asp.net,winfrom等开发环境下,右侧的PropertyGrid属性面板,会对属性进行分类,这有利于了解控件属性的用途.
577 0
WPF 多线程 UI:设计一个异步加载 UI 的容器
原文 WPF 多线程 UI:设计一个异步加载 UI 的容器 对于 WPF 程序,如果你有某一个 UI 控件非常复杂,很有可能会卡住主 UI,给用户软件很卡的感受。但如果此时能有一个加载动画,那么就不会感受到那么卡顿了。
920 0
使用Blend设计出符合效果的WPF界面
原文:使用Blend设计出符合效果的WPF界面 之前不会用blend,感觉好难的,但美工给出的效果自己有没办法实现,所以研究了一下blend,感觉没有想象中的那么难 废话不多说,开始界面设计 今天拿到美工给的一个界面效果图 这个界面说实话,还可以吧,勉强说得过去。
1728 0
借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的。
776 0
在WPF设计工具Blend2中制作立方体图片效果
原文:在WPF设计工具Blend2中制作立方体图片效果 --------------------------------------------------------------------------------引用时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
775 0
Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
结合Photoshop和WPF,共同创建一个矢量的个性化进度条。
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载