参考链接

《WPF编程宝典》3.5
《深入浅出WPF》5.4.4

简述

定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。
Canvas 的默认值 Height 和 Width 属性为零，除非它是自动调整其子元素大小的元素的子元素。比如，将Canvas放在Grid布局中，因为Grid中的元素在没有设置宽高的情况下，默认占满整个空间，所以Canvas的宽高会被Grid设置为Grid的宽和高
Canvas 从不改变子元素的大小
该Panel.ZIndex 属性确定共享相同坐标空间的子元素出现的顺序。一个子元素的较高 Panel.ZIndex 值表示此元素将显示在另一个具有较低值的子元素上方。
Canvas通过下面4个附加属性设置子元素的坐标，且 Canvas.Top 或 Canvas.Left 优先于 Canvas.Bottom 或 Canvas.Right 属性。
垂直对齐和水平对齐在一个 Canvas内部不起作用。
Canvas主要用于WPF中的绘图
实践
官方示例
以下示例生成三个 Rectangle 元素，每个元素 100 像素。第一个 Rectangle 为红色，其左上角 (x，y) 位置指定为 0，0) (。第二 Rectangle 个是绿色，其左上角位置是 (100，100) ，正下方和第一个正方形右侧。第三 Rectangle 个是蓝色，其左上角位置 (50， 50) 。因此，第三 Rectangle 个覆盖第一 Rectangle 个和第二个左上角象限的右下象限。由于第三 Rectangle 个方块是最后一个布局的，所以它似乎位于其他两个方块的顶部，即重叠部分假定第三 Rectangle个方块的颜色。
```
<Page WindowTitle="Canvas Sample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Canvas Height="400" Width="400">
 <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
 <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
 <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
</Canvas>
</Page>
```
```csharp // Create the application’s main window mainWindow = new Window (); mainWindow.Title = “Canvas Sample”;

// Create the Canvas myParentCanvas = new Canvas(); myParentCanvas.Width = 400; myParentCanvas.Height = 400;

// Define child Canvas elements myCanvas1 = new Canvas(); myCanvas1.Background = Brushes.Red; myCanvas1.Height = 100; myCanvas1.Width = 100; Canvas.SetTop(myCanvas1, 0); Canvas.SetLeft(myCanvas1, 0);

myCanvas2 = new Canvas(); myCanvas2.Background = Brushes.Green; myCanvas2.Height = 100; myCanvas2.Width = 100; Canvas.SetTop(myCanvas2, 100); Canvas.SetLeft(myCanvas2, 100);

myCanvas3 = new Canvas(); myCanvas3.Background = Brushes.Blue; myCanvas3.Height = 100; myCanvas3.Width = 100; Canvas.SetTop(myCanvas3, 50); Canvas.SetLeft(myCanvas3, 50);

// Add child elements to the Canvas’ Children collection myParentCanvas.Children.Add(myCanvas1); myParentCanvas.Children.Add(myCanvas2); myParentCanvas.Children.Add(myCanvas3);

// Add the parent Canvas as the Content of the Window Object mainWindow.Content = myParentCanvas; mainWindow.Show (); ```

Canvas

参考链接

简述

实践

官方示例

个人实践