1. 绘画

1.1 图形类型

  • Line

    X1、Y1、X2、Y2,Stroke,StrokeThickness
  • Rectangle 矩形
  • Ellipse 椭圆
  • Polygon 多边形(自动闭合)
  • Polyline 多变形(不自动闭合)
  • Path

1.2 线段

  1. <Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="3"/>

效果:

1.3 矩形及填充色

  • SolidColorBrush 单色画刷
  • LinearGradientBrush 线性渐画刷
  • RadialGradientBrush 径向渐变画刷
  • ImageBrush 图片
  • DrawingBrush 矢量图和位图做填充
  • VisualBrush 控件的

    举例:
  1. <WrapPanel>
  2. <WrapPanel.Resources>
  3. <Style TargetType="Rectangle">
  4. <Setter Property="Width" Value="150"/>
  5. <Setter Property="Height" Value="150"/>
  6. <Setter Property="Margin" Value="10"/>
  7. <Setter Property="Stroke" Value="Black"/>
  8. </Style>
  9. <LinearGradientBrush x:Key="DefaultColor">
  10. <GradientStop Color="#ff4b1f" Offset="0.1"/>
  11. <GradientStop Color="#1fddff" Offset="1"/>
  12. </LinearGradientBrush>
  13. </WrapPanel.Resources>
  14. <Rectangle Fill="{StaticResource DefaultColor}"/>
  15. <Rectangle>
  16. <Rectangle.Fill>
  17. <LinearGradientBrush>
  18. <GradientStop Color="#999999" Offset="0"/>
  19. <GradientStop Color="#555555" Offset="0.5"/>
  20. <GradientStop Color="#111111" Offset="1"/>
  21. </LinearGradientBrush>
  22. </Rectangle.Fill>
  23. </Rectangle>
  24. <Rectangle>
  25. <Rectangle.Fill>
  26. <RadialGradientBrush>
  27. <GradientStop Color="#999999" Offset="0"/>
  28. <GradientStop Color="#555555" Offset="0.5"/>
  29. <GradientStop Color="#111111" Offset="1"/>
  30. </RadialGradientBrush>
  31. </Rectangle.Fill>
  32. </Rectangle>
  33. <Rectangle>
  34. <Rectangle.Fill>
  35. <ImageBrush ImageSource="/Resources/Images/Cars/Audi.jpg"/>
  36. </Rectangle.Fill>
  37. </Rectangle>
  38. <!--使用 Drawing 绘制区域,可用形状、文本、视频、图像或其他绘制项填充,这里使用形状-->
  39. <Rectangle>
  40. <Rectangle.Fill>
  41. <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
  42. <DrawingBrush.Drawing>
  43. <GeometryDrawing Brush="{StaticResource DefaultColor}">
  44. <GeometryDrawing.Geometry>
  45. <EllipseGeometry RadiusX="10" RadiusY="10"/>
  46. </GeometryDrawing.Geometry>
  47. </GeometryDrawing>
  48. </DrawingBrush.Drawing>
  49. </DrawingBrush>
  50. </Rectangle.Fill>
  51. </Rectangle>
  52. <!--使用 Drawing 绘制区域,这里使用图像填充-->
  53. <Rectangle>
  54. <Rectangle.Fill>
  55. <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
  56. <DrawingBrush.Drawing>
  57. <ImageDrawing ImageSource="/Resources/Images/Cars/Cayenne.jpg" Rect="0,0 0.5,0.5"/>
  58. </DrawingBrush.Drawing>
  59. </DrawingBrush>
  60. </Rectangle.Fill>
  61. </Rectangle>
  62. <!--使用 System.Windows.Media.VisualBrush.Visual 绘制区域-->
  63. <Rectangle>
  64. <Rectangle.Fill>
  65. <VisualBrush>
  66. <VisualBrush.Visual>
  67. <Ellipse Fill="{StaticResource DefaultColor}" Opacity="0.6" Stretch="Fill" HorizontalAlignment="Stretch"
  68. VerticalAlignment="Stretch" Width="100" Height="100"></Ellipse>
  69. </VisualBrush.Visual>
  70. </VisualBrush>
  71. </Rectangle.Fill>
  72. </Rectangle>
  73. </WrapPanel>

效果:

1.4 椭圆

  1. <Ellipse Width="100" Height="100" Stroke="#FFBBDDDD">
  2. <Ellipse.Fill>
  3. <RadialGradientBrush GradientOrigin="0.2, 0.5" RadiusX="0.5" RadiusY="0.5">
  4. <RadialGradientBrush.RelativeTransform>
  5. <TransformGroup>
  6. <RotateTransform CenterX="0" CenterY="0" Angle="30"/>
  7. </TransformGroup>
  8. </RadialGradientBrush.RelativeTransform>
  9. <GradientStop Color="#FF225555" Offset="0"/>
  10. <GradientStop Color="#FF336666" Offset="0.2"/>
  11. <GradientStop Color="#FF558888" Offset="0.4"/>
  12. <GradientStop Color="#FF88AAAA" Offset="0.6"/>
  13. <GradientStop Color="#FFAACCCC" Offset="0.8"/>
  14. <GradientStop Color="#FFCCEEEE" Offset="1"/>
  15. </RadialGradientBrush>
  16. </Ellipse.Fill>
  17. </Ellipse>

效果:

WPF 基础 - 绘画 1) 线段、矩形、圆弧及填充色的更多相关文章

  1. WPF 基础 - 绘画 2) Path

    1. Path 霸中霸 既可以替代其他几种图形,也可以将直线.圆弧.贝尔赛曲线组合起来; 重要属性:Geometry Data: 其中 Geometry 为抽象类,不可实例化,可使用其子类: Line ...

  2. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. WPF基础到企业应用系列6——布局全接触

    本文转自:http://knightswarrior.blog.51cto.com/1792698/365351 一. 摘要 首先很高兴这个系列能得到大家的关注和支持,这段时间一直在研究Windows ...

  4. WPF 基础到企业应用系列索引

    转自:http://www.cnblogs.com/zenghongliang/archive/2010/07/09/1774141.html WPF 基础到企业应用系列索引 WPF 基础到企业应用系 ...

  5. WPF笔记(1.1 WPF基础)——Hello,WPF!

    原文:WPF笔记(1.1 WPF基础)--Hello,WPF! Example 1-1. Minimal C# WPF application// MyApp.csusing System;using ...

  6. [Qt扒手] PyQt5 基础绘画例子

    [说明] 好吧,坦白从宽,我是Qt扒手(不要鄙视我).这是我根据qt官网提供的C++版本的例子(http://doc.qt.io/qt-5/qtwidgets-painting-basicdrawin ...

  7. WPF入门(三)->几何图形之矩形(RectangleGeometry)

    原文:WPF入门(三)->几何图形之矩形(RectangleGeometry) 我们可以使用RectangleGeometry来绘制一个矩形或者正方形 RectangleGeometry 类:描 ...

  8. C# WPF基础巩固

    时间如流水,只能流去不流回. 学历代表你的过去,能力代表你的现在,学习能力代表你的将来. 学无止境,精益求精. 一.写作目的 做C# WPF开发,无论是工作中即将使用,还是只应付跳槽面试,开发基础是非 ...

  9. C# WPF 歌词控件(支持逐字定位描色效果)

    原文:C# WPF 歌词控件(支持逐字定位描色效果) 之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词.今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ ...

随机推荐

  1. LEETCODE - 1181【前后拼接】

    class Solution { public: string gethead(string str){//获取头单词 string ret = ""; int strlen = ...

  2. 并发编程之java内存模型(Java Memory Model ,JMM)

    一.图例 0.两个概念 Heap(堆):运行时的数据区,由垃圾回收负责,运行时分配内存(所以慢),对象存放在堆上 如果两个线程,同时调用同一个变量,怎两个线程都拥有,该对象的私有拷贝 (可以看一下,T ...

  3. springboot使用RestTemplate+httpclient连接池发送http消息

    简介 RestTemplate是spring支持的一个请求http rest服务的模板对象,性质上有点像jdbcTemplate RestTemplate底层还是使用的httpclient(org.a ...

  4. CS144学习(2)TCP协议实现

    Lab1-4 分别是完成一个流重组器,TCP接收端,TCP发送端,TCP连接四个部分,将四个部分组合在一起就是一个完整的TCP端了.之后经过包装就可以进行TCP的接收和发送了. 代码全部在github ...

  5. Promise nested then execute order All In One

    Promise nested then execute order All In One Promise nested then nested Promise not return new Promi ...

  6. how to design a search component in react

    how to design a search component in react react 如何使用 React 设计并实现一个搜索组件 实时刷新 节流防抖 扩展性,封装,高内聚,低耦合 响应式 ...

  7. MBP 2018

    MBP 2018 touch pad MacBook Pro 如何调节键盘背光 https://support.apple.com/zh-cn/HT202310 F6 & F5 如何清洁 Ma ...

  8. LeetCode 刷题 App / LeetCode 题解 App

    LeetCode 刷题 APP / LeetCode 题解 App 全端支持 http://leetcode-app.xgqfrms.xyz/ http://leetcode-desktop.xgqf ...

  9. js bitwise operation all in one

    js bitwise operation all in one 位运算 & 按位与 | 按位或 ^ 按位异或 / XOR let a = 5; // 000000000000000000000 ...

  10. deep copy & deep merge

    deep copy & deep merge JSON.parse(JSON.stringify(obj)); lodash https://lodash.com/docs/ https:// ...