在WPF中自定义你的绘制(二)

简介: 原文:在WPF中自定义你的绘制(二)                                                   在WPF中自定义你的绘制(二)                                                                  ...
原文: 在WPF中自定义你的绘制(二)

                                                   在WPF中自定义你的绘制(二)
                                                                   周银辉

1,绘制几何图形
也许你在使用WPF进行开发的时候已经注意到一个很有意思的现象,要在屏幕上显示一个圆形(椭圆),你可以使用Ellipse对象,如下面的代码所示:

img_a6339ee3e57d1d52bc7d02b338e15a60.gif < Grid >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif          
< Ellipse  Fill ="#FFFFFFFF"  Stroke ="#FF000000"  Margin ="61,36,100,0"  VerticalAlignment ="Top"  Height ="33" />        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ Grid >
而另外一个名为EllipseGeometry的对象同样可以做到:
img_a6339ee3e57d1d52bc7d02b338e15a60.gif < GeometryDrawing   Brush ="Blue" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif         
< GeometryDrawing .Geometry >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                    
< EllipseGeometry  Center ="50,50"  RadiusX ="20"  RadiusY ="45"   />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif         
</ GeometryDrawing.Geometry >             
img_a6339ee3e57d1d52bc7d02b338e15a60.gif         
< GeometryDrawing .Pen >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                      
< Pen  Thickness ="1"  Brush ="Black"   />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif         
</ GeometryDrawing.Pen >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ GeometryDrawing >
向后者这样由几何图形名称加Geometry后缀的,就是今天我们要讨论的几何图形.
我们可以发现, Ellipse继承于Shape类,EllipseGemotry继承于Geometry类,虽然我们利用它们都可以绘制圆形,但EllipseGeometry比Ellipse是更轻量级的类,我们使用它可以获得更好的性能效益,但EllipseGeometry不支持WPF布局系统(Layout)、输入和焦点。这也是Shape与Geometry的区别。
我们也可以使用C#代码像传统的绘制(OnPaint)一样来自定义我们的绘制:
img_a6339ee3e57d1d52bc7d02b338e15a60.gif protected   override   void  OnRender(DrawingContext dc)
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif {
img_33d02437d135341f0800e3d415312ae8.gif            
base.OnRender(dc);
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif            Geometry ellipse 
= new EllipseGeometry(new Point(10070), 10050);
img_33d02437d135341f0800e3d415312ae8.gif            GeometryDrawing drawing 
= new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green,1), ellipse);
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif            dc.DrawDrawing(drawing);
img_05dd8d549cff04457a6366b0a7c9352a.gif        }

效果如下图:
customPaint2.png
其他基本几何图形(如RectangleGeometry,LineGeometry等)与此类似。

2, 绘制图片
最简单的使用图片的方式当然是利用Image控件,就像以前我们使用PictureBox一样,但更多的我们是使用自定义方式来绘制,ImageDrawing 对象为我们绘制图片提供了方便。

img_a6339ee3e57d1d52bc7d02b338e15a60.gif   protected   override   void  OnRender(DrawingContext dc)
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif {
img_33d02437d135341f0800e3d415312ae8.gif            
base.OnRender(dc);
img_33d02437d135341f0800e3d415312ae8.gif            BitmapImage bmp 
= new BitmapImage(new Uri("http://images.cnblogs.com/logo.gif", UriKind.Absolute));
img_33d02437d135341f0800e3d415312ae8.gif            ImageDrawing drawing 
= new ImageDrawing(bmp, new Rect(101032643));
img_33d02437d135341f0800e3d415312ae8.gif            dc.DrawDrawing(drawing);
img_05dd8d549cff04457a6366b0a7c9352a.gif        }
效果如下:
customPaint3.png

3,绘制文本
在WPF中我们可以高度定制文本的绘制,这需要了解GlyphRunDrawing类以及GlyphRun对象,其实在我们使用TextBlock时经常使用GlyphRun对象,它包含了文本字体的很多细节属性,请参见SDK的GlyphRun类。
img_a6339ee3e57d1d52bc7d02b338e15a60.gif < Page
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    xmlns:PresentationOptions
="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    mc:Ignorable
="PresentationOptions"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    Margin
="20"  Background ="White" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
<!--  The example shows how to use different property settings of Glyphs objects.  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< Canvas
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        Background
="PowderBlue"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\ARIAL.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            StyleSimulations    
= "ItalicSimulation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Hello World!"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "SteelBlue"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "50"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "75"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
<!--  "Hello World!" with default kerning  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\ARIAL.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Hello World!"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "Maroon"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "50"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "150"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
<!--  "Hello World!" with explicit character widths for proportional font  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\ARIAL.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Hello World!"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Indices             
= ",80;,80;,80;,80;,80;,80;,80;,80;,80;,80;,80"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "Maroon"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "50"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "225"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
<!--  "Hello World!" with fixed-width font  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\COUR.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            StyleSimulations    
= "BoldSimulation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Hello World!"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "Maroon"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "50"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "300"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
<!--  "Open file" without "fi" ligature  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\TIMES.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            StyleSimulations    
= "BoldSimulation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Open file"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "SlateGray"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "400"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "75"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
<!--  "Open file" with "fi" ligature  -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< Glyphs
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
FontUri              = "C:\WINDOWS\Fonts\TIMES.TTF"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            FontRenderingEmSize 
= "36"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            StyleSimulations    
= "BoldSimulation"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            UnicodeString       
= "Open file"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Indices             
= ";;;;;(2:1)191"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            Fill                
= "SlateGray"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginX             
= "400"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            OriginY             
= "150"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
/>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ Canvas >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ Page >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
customPaint4.png


在《在WPF中自定义你的绘制(三)》中我们会继续讨论自定义绘制中更深入的话题:合并绘制、利用路径绘制图形、将我们的绘制转变为画刷,谢谢!



目录
相关文章
|
C# 虚拟化 索引
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel
原文:【WPF】UI虚拟化之------自定义VirtualizingWrapPanel 前言 前几天QA报了一个关于OOM的bug,在排查的过程中发现,ListBox控件中被塞入了过多的Item,而ListBox又定义了两种样式的ItemsPanelTemplate。
2232 0
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:【WPF】右下角弹出自定义通知样式(Notification)——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
3089 1
|
5月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
|
5月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
60 0
|
5月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。
966 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
|
C# C++ 数据可视化
WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不影响 程序的编译运行 这个样式表 在vs 里会提示动画不兼容 Foreground属性 报错 ...
1797 1
|
C#
WPF 控件自定义背景
<!--控件要设置尺寸的话,设置的尺寸必须比下面的图形的尺寸要小,不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
1021 0
|
C#
WPF开发-Label自定义背景-Decorator
首先在App.xaml文件当中添加样式和模板
2049 0