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"/>
<b></Canvas></b>
</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.
(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})
Позиционирование содержимого внутри панелей 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"/>
<Button x:Name="btnOK" Width="80" Content="OK"/>
</WrapPanel>
Когда эта разметка загружена, при изменении ширины окна содержимое выглядит не особо привлекательно, т.к. оно перетекает слева направо внутри окна (рис. 25.2).
![]()
По умолчанию содержимое WrapPanel перетекает слева направо. Тем не менее, если изменить значение свойства Orientation на Vertical, то можно заставить содержимое перетекать сверху вниз:
<WrapPanel Background="LightSteelBlue" <b>Orientation ="Vertical"</b>>
