在WPF中自定义你的绘制（二）

2022-07-16 18:35:47

原文:在WPF中自定义你的绘制（二）

  在WPF中自定义你的绘制（二）
                                                                   周银辉

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

在WPF中自定义你的绘制（二）<Grid>
在WPF中自定义你的绘制（二）          <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000" Margin="61,36,100,0" VerticalAlignment="Top" Height="33"/>       
在WPF中自定义你的绘制（二）    </Grid>

而另外一个名为EllipseGeometry的对象同样可以做到：

在WPF中自定义你的绘制（二）<GeometryDrawing  Brush="Blue">
在WPF中自定义你的绘制（二）         <GeometryDrawing.Geometry>
在WPF中自定义你的绘制（二）                    <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
在WPF中自定义你的绘制（二）         </GeometryDrawing.Geometry>            
在WPF中自定义你的绘制（二）         <GeometryDrawing.Pen>
在WPF中自定义你的绘制（二）                      <Pen Thickness="1" Brush="Black" />
在WPF中自定义你的绘制（二）         </GeometryDrawing.Pen>
在WPF中自定义你的绘制（二）</GeometryDrawing>

向后者这样由几何图形名称加Geometry后缀的，就是今天我们要讨论的几何图形.
我们可以发现，Ellipse继承于Shape类，EllipseGemotry继承于Geometry类，虽然我们利用它们都可以绘制圆形，但EllipseGeometry比Ellipse是更轻量级的类，我们使用它可以获得更好的性能效益，但EllipseGeometry不支持WPF布局系统（Layout）、输入和焦点。这也是Shape与Geometry的区别。
我们也可以使用C#代码像传统的绘制（OnPaint）一样来自定义我们的绘制：

在WPF中自定义你的绘制（二）protected override void OnRender(DrawingContext dc)
在WPF中自定义你的绘制（二）在WPF中自定义你的绘制（二）        在WPF中自定义你的绘制（二）{
在WPF中自定义你的绘制（二）            base.OnRender(dc);
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制（二）            Geometry ellipse = new EllipseGeometry(new Point(100, 70), 100, 50);
在WPF中自定义你的绘制（二）            GeometryDrawing drawing = new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green,1), ellipse);
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制（二）            dc.DrawDrawing(drawing);
在WPF中自定义你的绘制（二）        }

效果如下图：
在WPF中自定义你的绘制（二）
其他基本几何图形（如RectangleGeometry,LineGeometry等）与此类似。

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

在WPF中自定义你的绘制（二） protected override void OnRender(DrawingContext dc)
在WPF中自定义你的绘制（二）在WPF中自定义你的绘制（二）        在WPF中自定义你的绘制（二）{
在WPF中自定义你的绘制（二）            base.OnRender(dc);
在WPF中自定义你的绘制（二）            BitmapImage bmp = new BitmapImage(new Uri("http://images.cnblogs.com/logo.gif", UriKind.Absolute));
在WPF中自定义你的绘制（二）            ImageDrawing drawing = new ImageDrawing(bmp, new Rect(10, 10, 326, 43));
在WPF中自定义你的绘制（二）            dc.DrawDrawing(drawing);
在WPF中自定义你的绘制（二）        }

效果如下:
在WPF中自定义你的绘制（二）

3,绘制文本
在WPF中我们可以高度定制文本的绘制，这需要了解GlyphRunDrawing类以及GlyphRun对象，其实在我们使用TextBlock时经常使用GlyphRun对象，它包含了文本字体的很多细节属性，请参见SDK的GlyphRun类。

在WPF中自定义你的绘制（二）<Page
在WPF中自定义你的绘制（二）    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
在WPF中自定义你的绘制（二）    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
在WPF中自定义你的绘制（二）    xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
在WPF中自定义你的绘制（二）    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
在WPF中自定义你的绘制（二）    mc:Ignorable="PresentationOptions"
在WPF中自定义你的绘制（二）    Margin="20" Background="White">
在WPF中自定义你的绘制（二）    
在WPF中自定义你的绘制（二）    <!-- The example shows how to use different property settings of Glyphs objects. -->
在WPF中自定义你的绘制（二）    <Canvas
在WPF中自定义你的绘制（二）        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
在WPF中自定义你的绘制（二）        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
在WPF中自定义你的绘制（二）        Background="PowderBlue"
在WPF中自定义你的绘制（二）    >
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            StyleSimulations    = "ItalicSimulation"
在WPF中自定义你的绘制（二）            UnicodeString       = "Hello World!"
在WPF中自定义你的绘制（二）            Fill                = "SteelBlue"
在WPF中自定义你的绘制（二）            OriginX             = "50"
在WPF中自定义你的绘制（二）            OriginY             = "75"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <!-- "Hello World!" with default kerning -->
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            UnicodeString       = "Hello World!"
在WPF中自定义你的绘制（二）            Fill                = "Maroon"
在WPF中自定义你的绘制（二）            OriginX             = "50"
在WPF中自定义你的绘制（二）            OriginY             = "150"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <!-- "Hello World!" with explicit character widths for proportional font -->
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            UnicodeString       = "Hello World!"
在WPF中自定义你的绘制（二）            Indices             = ",80;,80;,80;,80;,80;,80;,80;,80;,80;,80;,80"
在WPF中自定义你的绘制（二）            Fill                = "Maroon"
在WPF中自定义你的绘制（二）            OriginX             = "50"
在WPF中自定义你的绘制（二）            OriginY             = "225"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <!-- "Hello World!" with fixed-width font -->
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\COUR.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            StyleSimulations    = "BoldSimulation"
在WPF中自定义你的绘制（二）            UnicodeString       = "Hello World!"
在WPF中自定义你的绘制（二）            Fill                = "Maroon"
在WPF中自定义你的绘制（二）            OriginX             = "50"
在WPF中自定义你的绘制（二）            OriginY             = "300"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <!-- "Open file" without "fi" ligature -->
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            StyleSimulations    = "BoldSimulation"
在WPF中自定义你的绘制（二）            UnicodeString       = "Open file"
在WPF中自定义你的绘制（二）            Fill                = "SlateGray"
在WPF中自定义你的绘制（二）            OriginX             = "400"
在WPF中自定义你的绘制（二）            OriginY             = "75"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）        
在WPF中自定义你的绘制（二）        <!-- "Open file" with "fi" ligature -->
在WPF中自定义你的绘制（二）        <Glyphs
在WPF中自定义你的绘制（二）            FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
在WPF中自定义你的绘制（二）            FontRenderingEmSize = "36"
在WPF中自定义你的绘制（二）            StyleSimulations    = "BoldSimulation"
在WPF中自定义你的绘制（二）            UnicodeString       = "Open file"
在WPF中自定义你的绘制（二）            Indices             = ";;;;;(2:1)191"
在WPF中自定义你的绘制（二）            Fill                = "SlateGray"
在WPF中自定义你的绘制（二）            OriginX             = "400"
在WPF中自定义你的绘制（二）            OriginY             = "150"
在WPF中自定义你的绘制（二）        />
在WPF中自定义你的绘制（二）    
在WPF中自定义你的绘制（二）    </Canvas>
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制（二）</Page>
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制（二）

在WPF中自定义你的绘制（二）

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

上一篇：j2e中操作EXCEL


下一篇：PNG的使用技巧