WPF 入门教程Canvas布局

正确的布局和定位是交互式、高性能和用户友好的Windows应用程序的重要组成部分。本系列文章解释了WPF中的布局过程。本系列文章首先了解WPF布局过程。本系列的下一部分将介绍布局和定位的基础知识，例如元素的大小、空白、填充和对齐方式。在本系列的后面，我将介绍WPF中可用的各种面板和相关的父控件。

本文将详细讨论Canvas面板。

Canvas面板用于使用相对于画布区域的坐标来定位子元素。以下是 Canvas 面板的一些属性。

1. Canvas 的 Height 和 Width 属性的默认值为 0。如果不设置这些值，除非子元素自动调整大小，否则您将看不到画布。
2. Canvas 上的子元素永远不会调整大小。
3. 子元素上的垂直和水平对齐不起作用。子元素放置在由 Canvas Left、Top、Right 和 Bottom 属性设置的位置上。
4. 保证金确实部分起作用。如果设置了 Canvas 的 Left 属性，Right 属性将不起作用。如果设置了 Canvas 的 Top 属性，Bottom 属性将不起作用。

XAML 中的 Canvas 元素表示一个 Canvas 控件。

<Canvas/> 

Canvas控件有三个属性。Left属性表示控件左侧与其父容器Canvas之间的距离。Top属性表示控件顶部与其父容器Canvas之间的距离。

以下代码创建了一个Canvas，并添加了三个Rectangle控件，并使用Canvas控件属性对它们进行定位。

<Canvas Background="LightCyan" >   
   <Rectangle   
      Canvas.Left="10" Canvas.Top="10"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10" Fill="Red" />   
  
   <Rectangle   
      Canvas.Left="60" Canvas.Top="60"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10" Fill="Blue" />   
  
   <Rectangle   
      Canvas.Left="110" Canvas.Top="110"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10" Fill="Green" />   
  
</Canvas>   

输出如图所示

WPF中的Canvas类表示一个Canvas控件。清单2中列出的代码动态创建了一个Canvas Panel，向它添加三个Rectangle控件，并使用Canvas设置它们的左边和顶部位置。SetLeft和画布。置顶的方法。

private void CreateDynamicCanvasPanel()   
{   
  
   // Create a Canvas Panel control   
   Canvas canvasPanel = new Canvas();   
  
   // Set Canvas Panel properties   
   canvasPanel.Background = new SolidColorBrush(Colors.LightCyan );   
   // Add Child Elements to Canvas   
   Rectangle redRectangle = new Rectangle();   
   redRectangle.Width = 200;   
   redRectangle.Height = 200;   
   redRectangle.Stroke = new SolidColorBrush(Colors.Black);   
   redRectangle.StrokeThickness = 10;   
   redRectangle.Fill = new SolidColorBrush(Colors.Red);   
  
   // Set Canvas position   
   Canvas.SetLeft(redRectangle, 10);   
   Canvas.SetTop(redRectangle, 10);   
  
   // Add Rectangle to Canvas   
  
   canvasPanel.Children.Add(redRectangle);   
  
   // Add Child Elements to Canvas   
   Rectangle blueRectangle = new Rectangle();   
   blueRectangle.Width = 200;   
   blueRectangle.Height = 200;   
   blueRectangle.Stroke = new SolidColorBrush(Colors.Black);   
   blueRectangle.StrokeThickness = 10;   
   blueRectangle.Fill = new SolidColorBrush(Colors.Blue);   
  
   // Set Canvas position   
   Canvas.SetLeft(blueRectangle, 60);   
   Canvas.SetTop(blueRectangle, 60);   
  
   // Add Rectangle to Canvas   
  
   canvasPanel.Children.Add(blueRectangle);   
  
   // Add Child Elements to Canvas   
   Rectangle greenRectangle = new Rectangle();   
   greenRectangle.Width = 200;   
   greenRectangle.Height = 200;   
   greenRectangle.Stroke = new SolidColorBrush(Colors.Black);   
   greenRectangle.StrokeThickness = 10;   
   greenRectangle.Fill = new SolidColorBrush(Colors.Green);   
  
   // Set Canvas position   
   Canvas.SetLeft(greenRectangle, 110);   
   Canvas.SetTop(greenRectangle, 110);   
  
   // Add Rectangle to Canvas   
   canvasPanel.Children.Add(greenRectangle);   
  
   // Set Grid Panel as content of the Window   
   RootWindow.Content = canvasPanel;   
  
}   

控件的z轴次序决定该控件是在另一个重叠控件的前面还是后面。控件的默认z顺序是在其中创建控件的顺序。Canvas的ZIndex属性表示控件的z轴顺序。ZIndex的最大值为32766。

红色、蓝色和绿色矩形的z轴顺序分别为1、2和3。现在代码使用Canvas的ZIndex属性更改这些矩形的z顺序。

下面代码片段设置了Canvas控件在页面左上角的位置。

<Canvas Background="LightCyan" >   
   <Rectangle   
      Canvas.Left="10" Canvas.Top="10"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10"   
      Fill="Red" Canvas.ZIndex="2" />   
  
   <Rectangle   
      Canvas.Left="60" Canvas.Top="60"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10"   
      Fill="Blue" Canvas.ZIndex="1" />   
  
   <Rectangle   
      Canvas.Left="110" Canvas.Top="110"   
      Height="200" Width="200"   
      Stroke="Black" StrokeThickness="10"   
      Fill="Green" Canvas.ZIndex="3" />   
  
</Canvas>

新的输出如图所示，其中Blue矩形位于Red矩形的下方，Green矩形位于两个矩形的上方。

停靠面板用于停靠相对窗口的左、右、顶部和底部的子元素。