四. Canvas
Canvas比较简单，只是一个存储元素的容器，它不会自动调整内部元素的排列及大小。不指定元素位置，元素将默认显示在画布的左上方。Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds="False";我们可以通过设置ClipToBounds="True来裁剪多出的内容。
要实现的效果如下图(用XAML和C#实现同一效果)：
XAML代码实现：
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPFLayoutDemo.CanvasDEMO" x:Name="Window"
Title="CanvasDEMO" WindowStartupLocation="CenterScreen" Width="640"
Height="480">
<Canvas Margin="0,0,0,0" Background="White">
<Rectangle Fill="Red" Stroke="Azure" Width="209" Height="159"
Canvas.Left="310" Canvas.Top="181"/>
<Ellipse Fill="Azure" Stroke="Green"
Width="258"
Height="97" Panel.ZIndex="1" Canvas.Left="165"
Canvas.Top="145"/>
</Canvas>
</Window>
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPFLayoutDemo.CanvasDEMO" x:Name="Window"
Title="CanvasDEMO" WindowStartupLocation="CenterScreen" Width="640"
Height="480">
<Canvas Margin="0,0,0,0" Background="White">
<Rectangle Fill="Red" Stroke="Azure" Width="209" Height="159"
Canvas.Left="310" Canvas.Top="181"/>
<Ellipse Fill="Azure" Stroke="Green"
Width="258"
Height="97" Panel.ZIndex="1" Canvas.Left="165"
Canvas.Top="145"/>
</Canvas>
</Window>
C#代码实现：
namespace WPFLayoutDemo{
public partial class CanvasDEMOCodeBehind {
public CanvasDEMOCodeBehind() {
this.InitializeComponent();
Canvas canv = new Canvas();
//把canv添加为窗体的子控件 this.Content = canv;
canv.Margin = new Thickness(0, 0, 0, 0);
canv.Background = new SolidColorBrush(Colors.White);
//Rectangle
Rectangle r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Red);
r.Stroke = new SolidColorBrush(Colors.Red);
r.Width = 145;
r.Height = 126;
r.SetValue(Canvas.LeftProperty, (double)124);
r.SetValue(Canvas.TopProperty, (double)122);
canv.Children.Add(r);
//Ellipse
Ellipse el = new Ellipse(); el.Fill = new SolidColorBrush(Colors.Azure);
el.Stroke = new SolidColorBrush(Colors.Azure);
el.Width = 121;
el.Height = 100;
el.SetValue(Canvas.ZIndexProperty, 1);
el.SetValue(Canvas.LeftProperty, (double)195);
el.SetValue(Canvas.TopProperty, (double)191);
canv.Children.Add(el);
}
}
}
public partial class CanvasDEMOCodeBehind {
public CanvasDEMOCodeBehind() {
this.InitializeComponent();
Canvas canv = new Canvas();
//把canv添加为窗体的子控件 this.Content = canv;
canv.Margin = new Thickness(0, 0, 0, 0);
canv.Background = new SolidColorBrush(Colors.White);
//Rectangle
Rectangle r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Red);
r.Stroke = new SolidColorBrush(Colors.Red);
r.Width = 145;
r.Height = 126;
r.SetValue(Canvas.LeftProperty, (double)124);
r.SetValue(Canvas.TopProperty, (double)122);
canv.Children.Add(r);
//Ellipse
Ellipse el = new Ellipse(); el.Fill = new SolidColorBrush(Colors.Azure);
el.Stroke = new SolidColorBrush(Colors.Azure);
el.Width = 121;
el.Height = 100;
el.SetValue(Canvas.ZIndexProperty, 1);
el.SetValue(Canvas.LeftProperty, (double)195);
el.SetValue(Canvas.TopProperty, (double)191);
canv.Children.Add(el);
}
}
}
