Контейнер Canvas (полотно)

Canvas - це, мабуть, найпростіший контейнер. За умовчуванням, він практично нічого не робить. Лише дозвляє розмістити в ньому елементи керування, після чого їх можна позиціонувати.

Якщо ви хоч колись користувалися іншими UI бібліотеками, наприклад WinForms, то почуватиметеся як вдома. Абсолютне позицонування елементів здається спокусливаою можливість, однак воно має серйозний недолік. Контейнер нічого не робитиме при зміні свого розміру, розміру вікна чи свого вмісту.

Ввійдімо в суть цього простого прикладу. Він показує, як Canvas поводиться, за умовчуванням:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

Як ви бачите, хоч у нас і дві кнопки, та вони всеодно розміщені в одному місці, тому видно лише останню. Canvas не зробить нічого, доки ви не задасте координати його дочірнім елементам. Для цього слід використати закріплені властивості Left, Right, Top та Bottom.

Вони дозволяють вам задавати позицію відносно чотирьох країв контенера. За умовчуванням, вони всі мають значення NaN (не число), через, що Canvas розміщає їх у лівому верхньому куті. Але, як уже сказано, ці значення можна легко змінити:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

Зауважте, що я задавав значення лише потрібним мені властивостям. Для перщих двох кнопок, мені потрібно було лише змінити розташування по осі X. Тож я використав властивості Left та Right, щоб розставити кнопки по різних сторонах.

Для нижніх кнопок, я використав як властивості Left/Right, так і Bottom. Ви, як правило, використовуватимете властивість Top чи Bottom та/або Left чи Right.

Як вже згадано, Canvas дає вам повний контроль над позиціями дочірніх елементів. Тож його не цікавить, чи вистачає для них місця, і, чи не перекривають вони одне одного. Це робить Canvas поганим інструментом для розробки діалогових вікон, однак він чудово підходить, що найменше для одного - малювання. WPF має набір елементів керування, які можна розмістити всередині контейнера Canvas, щоб створити чудові ілюстрації:

Вісь Z

В наступному прикладі ми викоистаємо декілька фігур, щоб проілюструвати ще одну важливу концепцію, потрібну при роботі з Canvas: позиціонування по осі Z. За умовчуванням, якщо два елементи керування всередині контйнера Canvas перекриваються, то верхнім вважається, той що знаходиться нижче в розмітці. Однак че можна змінити, використовуючи прив'язану властивість ZIndex класу Panel.

У перщому прикладі ми зовсім не використовуємо властивість ZIndex:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Зауважте, що всі квадрати перекриавють коло, тому що вказані після нього, крім того кожен із них перекриває елемент визначений раніше. Давайте змінимо це:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

Властивість ZIndex має значення за умовчуванням 0, однак ми вибрали інше значення для кожної фігури. Елемент із вищим значенням властивості ZIndex перекриває елемент з нижчим. Якщо обидва значенн рівні, то пріоритет надається тому елементу, який знаходиться нижче в розмітці. Як ви бачите на скріншоті, зміна значення ZIndex створює зовсім інший вигляд.