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控件有三个属性。Left属性表示控件左侧与其父容器Canvas之间的距离。Top属性表示控件顶部与其父容器Canvas之间的距离。

以下代码创建了一个Canvas，并添加了三个Rectangle控件，并使用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控件在页面左上角的位置。

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

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

零基础学唱歌网