Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Canvas

59

Canvas позволяет размещать элементы, используя точные координаты, что, вообще говоря, является плохим выбором при проектировании развитых управляемых данными форм и стандартных диалоговых окон, но ценным инструментом, когда требуется построить нечто другое (вроде поверхности рисования для инструмента построения диаграмм). Canvas также является наиболее легковесным из контейнеров компоновки. Это объясняется тем, что он не включает в себя никакой сложной логики компоновки, согласовывающей размерные предпочтения своих дочерних элементов. Вместо этого он просто располагает их в указанных позициях с точными размерами, которые нужны.

Для позиционирования элемента в контейнере Canvas устанавливаются присоединенные свойства Canvas.Left и Canvas.Тор. Свойство Canvas.Left задает количество единиц измерения между левой гранью элемента и левой границей Canvas. Свойство Canvas.Тор устанавливает количество единиц измерения между вершиной элемента и верхней границей Canvas. Как всегда, эти значения выражаются в независимых от устройства единицах измерения, которые соответствуют обычным пикселям, когда системная установка DPI составляет 96 dpi.

В качестве альтернативы вместо Canvas.Left можно использовать Canvas.Right, чтобы расположить элемент относительно правого края Canvas, и Canvas.Bottom вместо Canvas.Тор — чтобы расположить его относительно низа. Одновременно использовать Canvas.Right и Canvas.Left или Canvas.Тор и Canvas.Bottom нельзя.

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

Ниже приведен пример простого контейнера Canvas:

<Canvas>
        <Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>
        <Button Canvas.Left="100" Canvas.Top="50"
                Width="100" Height="70">(100,50)</Button>
        <Button Canvas.Left="70" Canvas.Top="100"
                Width="70" Height="30">(70,100)</Button>
</Canvas>
Позиционирование в Canvas

Если вы измените размеры окна, то Canvas растянется для заполнения всего доступного пространства, но ни один из элементов управления на его поверхности не изменит своего положения и размеров. Контейнер Canvas не имеет средства привязки или стыковки, которые доступны в координатных компоновках Windows Forms. Отчасти это объясняется легковесностью Canvas. Другая причина в том, чтобы предотвратить использование Canvas для целей, для которых он не предназначен (например, для компоновки стандартного пользовательского интерфейса).

Подобно любому другому контейнеру компоновки, Canvas может вкладываться внутрь пользовательского интерфейса. Это значит, что Canvas можно использовать для рисования более детализированного содержимого в одной части окна и применять более стандартные панели WPF для остальных элементов.

Если вы используете Canvas рядом с другими элементами, можно установить его свойство ClipToBounds в true. В результате элементы внутри Canvas, которые выходят за его пределы, будут усечены на гранях Canvas. (Это предотвратит перекрытие других элементов в окне.) Все прочие контейнеры компоновки всегда усекают свои дочерние элементы, выходящие за их границы, независимо от установки ClipToBounds.

Z-порядок

При наличии более одного перекрывающегося элемента с помощью присоединенного свойства Canvas.ZIndex можно управлять их расположением. Обычно все добавляемые элементы имеют одинаковый ZIndex — 0. Элементы с одинаковым ZIndex отображаются в том порядке, в каком они представлены в коллекции Canvas.Children, который основан на порядке их определения в разметке XAML.

Элементы, объявленные позже в разметке, такие как кнопка (70,100), отображаются поверх элементов, объявленных ранее, вроде кнопки (100,50).

За счет увеличения ZIndex любой элемент можно передвинуть на более высокий уровень. Это объясняется тем, что элементы с большими ZIndex всегда появляются поверх элементов с меньшими ZIndex. Используя этот подход, можно поменять уровни в компоновке из предыдущего примера на противоположные:

<Button Canvas.Left="100" Canvas.Top="50" Canvas.ZIndex="1"
       Width="100" Height="70">(100,50)</Button>

Действительные значения, которые используется для свойства Canvas.ZIndex, не важны. Важно отношение значений ZIndex разных элементов между собой. Для ZIndex можно указывать любое положительное или отрицательное целое число.

Свойство ZIndex в частности удобно, если нужно изменить позицию элемента программно. Просто вызовите Canvas.SetZIndex() и передайте ему элемент, который необходимо модифицировать, и новое значение ZIndex. К сожалению, не предусмотрено метода BringToFront() или SendToBack(), так что на вас возлагается задача отслеживать максимальное и минимальное значения ZIndex, если планируется реализовать это поведение.

ZIndex
Пройди тесты