Автор: Махеш Чанд (Mahesh Chand)

В этой статье будет показано, как использовать область полотна WPF с применением XAML и C#.

Область полотна используется для размещения дочерних элементов с помощью координат, связанных с областью полотна. Далее приводятся некоторые свойства областей полотна.

• Значения по умолчанию для свойство полотна Height и Width — 0. Если эти значения не установить, то нельзя будет увидеть полотно, пока не будет задано автоматическое изменение размеров дочерних элементов. 
• Размеры дочерних элементов на полотне не изменяются.
• Вертикальное и горизонтальное выравнивание дочерних элементов не работает. Дочерние элементы размещаются в положениях, заданных свойствами полотна Left, Top, Right и Bottom.
• Поля работают частично. Если установлено свойство полотна Left, то свойство Right не работает. Если установлено свойство полотна Top, то свойство Bottom не работает.

Элемент Canvas в XAML представляет элемент управления Canvas.  

<Canvas/>

Элемент управления Canvas имеет три свойства. Свойство Left представляет расстояние между левой стороной элемента управления и его родительским контейнером Canvas. Свойство Top представляет расстояние между верхней стороной элемента управления и его родительским контейнером Canvas.

Код, приведенный в листинге 1, создает элемент управления 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>

Листинг 1

Результат этого кода будет выглядеть аналогично показанному на рисунке 1.

Рисунок 1

Класс Canvas в WPF представляет элемент управления Canvas. Приведенный в следующем листинге код динамически создает элемент управления CanvasPanel, добавляет в него три элемента управления Rectangle и устанавливает их положение слева и справа c помощью методов Canvas.SetLeft и Canvas.SetTop. Результат кода, приведенного в этом листинге, показан на рисунке 1.

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;

}

Листинг 2

Z-порядок элемента управления задает его расположение впереди или позади другого пересекающегося с ним элемента управления. Z-порядок по умолчанию соответствует тому порядку, в котором элементы создаются. Свойство ZIndex элемента управления Canvas представляет Z-порядок элемента управления. Максимальное значение ZIndex — 32766.

На рисунке 1 Z-порядок красного, синего и зеленого прямоугольников соответственно 1, 2 и 3. Теперь код, приведенный в листинге 2, изменяет Z-порядок этих прямоугольников с помощью свойства ZIndex элемента управления Canvas. 

Фрагмент кода, приведенный в листинге 2, устанавливает положение элемента управления 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>

Листинг 3

Новый результат выглядит, как показано на рисунке 2, где синий прямоугольник находится под красным, а зеленый прямоугольник располагается поверх всех остальных.

Рисунок 2