XAML 实例演示之五 – Canvas和ViewBox控件的使用
XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。
前面系列文章：
本文介绍了如何使用Canvas和ViewBox控件制作微笑头像。Canvas 画布布局控件允许对子元素进行绝对定位（absolute positioning）。范例中将Canvas控件放置在ViewBox控件中，这样允许伸展子元素Canvas。
微笑头像-XAML范例代码如下所示：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Welcome to EntLib.com | Little Green Man">
<Viewbox>
<Canvas Width="180" Height="180" VerticalAlignment="Center">
<Ellipse Canvas.Left="10"
Canvas.Top="10"
Width="160"
Height="160"
Fill="LimeGreen"
Stroke="Black" />
<Ellipse Canvas.Left="45"
Canvas.Top="50"
Width="25"
Height="25"
Fill="White"
Stroke="Black" />
<Ellipse Canvas.Left="52"
Canvas.Top="55"
Width="10"
Height="10"
Fill="Black"
Stroke="Black" />
<Ellipse Canvas.Left="77.5"
Canvas.Top="50"
Width="25"
Height="25"
Fill="Yellow"
Stroke="Black" />
<Ellipse Canvas.Left="110"
Canvas.Top="50"
Width="25"
Height="25"
Fill="White"
Stroke="Black" />
<Ellipse Canvas.Left="117"
Canvas.Top="55"
Width="10"
Height="10"
Fill="Black"
Stroke="Black" />
<Path Data="M 50,100 A 30,30 900 0 0 130,100" Stroke="Red"/>
</Canvas>
</Viewbox>
</Window>
在Kaxaml 工具中演示效果如下：
通过拖拉Windows边框，微笑头像自动放大、缩小。伸展后效果如下：
所有shape 对象 (Ellipse, Line, Path, Polygon, Polyline, 和Rectangle) 有相同的属性，三个常用的属性是：
Stroke – 表示如何画图形的外框。
StrokeThickness – 表示图形外框的粗细。
Fill – 表示如何填充图形内部。