Язык программирования C#9 и платформа .NET5

Троелсен Эндрю

Чтобы добавить содержимое к

Canvas

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

Canvas

. Затем для каждого элемента управления необходимо указать левый верхний угол с использованием свойств

Canvas.Тор

и

Canvas.Left

; именно здесь должна начинаться визуализация. Правый нижний угол каждого элемента управления можно задать неявно, устанавливая свойства

Canvas.Height

и

Canvas.Width

, либо явно с применением свойств

Canvas.Right

и

Canvas.Bottom

.

Для демонстрации

Canvas

в действии откройте готовый файл

SimpleCanvas.xaml

в редакторе Kaxaml. Определение

Canvas

должно иметь следующий вид (в случае загрузки примеров в приложение WPF дескриптор

Page

нужно будет заменить дескриптором

Window

):

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Fun with Panels!" Height="285" Width="325">

<Canvas Background="LightSteelBlue">

<Button x:Name="btnOK" Canvas.Left="212" Canvas.Top="203"

Width="80" Content="OK"/>

<Label x:Name="lblInstructions" Canvas.Left="17" Canvas.Top="14"

Width="328" Height="27"

FontSize="15"

Content="Enter Car Information"/>

<Label x:Name="lblMake" Canvas.Left="17" Canvas.Top="60" Content="Make"/>

<TextBox x:Name="txtMake" Canvas.Left="94" Canvas.Top="60"

Width="193" Height="25"/>

<Label x:Name="lblColor" Canvas.Left="17" Canvas.Top="109" Content="Color"/>

<TextBox x:Name="txtColor" Canvas.Left="94" Canvas.Top="107"

Width="193" Height="25"/>

<Label x:Name="lblPetName" Canvas.Left="17" Canvas.Top="155"

Content="Pet Name"/>

<TextBox x:Name="txtPetName" Canvas.Left="94" Canvas.Top="153"

Width="193" Height="25"/>

</Canvas>

</Page>

В верхней половине экрана отобразится окно, показанное на рис. 25.1.

Обратите внимание, что порядок объявления элементов содержимого внутри

Canvas

не влияет на расчет местоположения; на самом деле местоположение основано на размере элемента управления и значениях его свойств

Canvas.Top

,

Canvas.Bottom

,

Canvas.Left

и

Canvas.Right

.

На

заметку! Если подэлементы внутри

Canvas

не определяют специфическое местоположение с использованием синтаксиса присоединяемых свойств (например,

Canvas.Left

и

Canvas.Тор

), тогда они автоматически прикрепляются к левому верхнему углу

Canvas

.

Применение типа

Canvas

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

Canvas

не изменяют свои размеры динамически при использовании стилей или шаблонов (скажем, их шрифты остаются незатронутыми). Во-вторых, панель

Canvas

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

Пожалуй, наилучшим применением типа

Canvas

является позиционирование графического содержимого. Например, при построении изображения с использованием XAML определенно понадобится сделать так, чтобы все линии, фигуры и текст оставались на своих местах, а не динамически перемещались в случае изменения пользователем размера окна. Мы еще вернемся к

Canvas

в главе 26 при обсуждении служб визуализации графики WPF.

Позиционирование содержимого внутри панелей WrapPanel

Панель

WrapPanel

позволяет определять содержимое, которое будет протекать сквозь панель, когда размер окна изменяется. При позиционировании элементов внутри

WrapPanel

их координаты верхнего левого и правого нижнего углов не указываются, как обычно делается в

Canvas

. Однако для каждого подэлемента допускается определение значений свойств

Height

и

Width

(наряду с другими свойствами), чтобы управлять их общим размером в контейнере.

Поскольку содержимое внутри

WrapPanel

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

SimpleWrapPanel.xaml

находится следующая разметка (заключенная внутрь определения

Page

):

<WrapPanel Background="LightSteelBlue">

<Label x:Name="lblInstruction" Width="328" Height="27"

FontSize="15" Content="Enter Car

Information"/>

<Label x:Name="lblMake" Content="Make"/>

<TextBox x:Name="txtMake" Width="193" Height="25"/>

<Label x:Name="lblColor" Content="Color"/>

<TextBox x:Name="txtColor" Width="193" Height="25"/>

<Label x:Name="lblPetName" Content="Pet Name"/>

<TextBox x:Name="txtPetName" Width="193" Height="25"/>