Контейнеры в WPF. Canvas (холст)

Контейнер Canvas — это наиболее простой в использовании контейнер в WPF, положение элементов в котором задаются разработчиком с использованием свойств контейнера для каждого элемента.

Контейнер Canvas

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

• Canvas.Left указывает, на сколько единиц от левой стороны контейнера будет находиться элемент;
• Canvas.Top — насколько единиц ниже верхней границы контейнера находится элемент;
• Canvas.Bottom — насколько единиц выше нижней границы контейнера находится элемент;
• Canvas.Right — насколько единиц от правой границы контейнера находится элемент.

Стоит обратить внимание на то, что для Canvas нельзя одновременно задавать пары значений Canvas.Left/Canvas.Right и Canvas.Top/Canvas.Bottom. Если заданы все четыре свойства, то система построения макета в WPF в этом случае отдает предпочтение паре значений Canvas.Left/Canvas.Topвне зависимости от порядка указания свойств у элемента.

Пример использования Canvas

В примере показана расстановка компонентов в контейнере Canvas. Для того, чтобы позиционировать элементы внутри контейнера, для каждого элемента устанавливаются свойства: Canvas.Bottom, Canvas.Right, Canvas.Top или Canvas.Left.

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="275" Width="400">
    <Canvas>
        <Button Canvas.Top="10" Canvas.Left="10" Content="1" Background="Red" Width="100"/>
        <Button Canvas.Bottom="10" Canvas.Left="10" Content="2" Background="Blue" Width="100"/>
        <Button Canvas.Top="10" Canvas.Right="10" Content="3" Background="Green" Width="100"/>
        <Button Canvas.Bottom="10" Canvas.Right="10" Content="4" Background="Yellow" Width="100"/>

        <Button Canvas.Bottom="50" Canvas.Right="50" Canvas.Top="30" Canvas.Left="60"  Content="4" Background="Pink" Width="100"/>

    </Canvas>
</Window>

Результат работы представленного выше кода XAML представлен на рисунке:

Итого

Контейнер Canvas — это наиболее простой в использовании контейнер WPF. У этого контейнера нет свойств, позволяющих автоматически позиционировать элементы внутри себя (все элементы «намертво прибиты» к своим координатам). Позиция элемента определяется с использованием свойств Canvas.Left,Canvas.Right, Canvas.Top, Canvas.Bottom. При этом, контейнер Canvas может значительно повысить производительность вашего приложения WPF, если вам не требуется автоматическое позиционирование элементов управления в окне приложения.