Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

    <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"/>

  <Button x:Name="btnOK" Width="80" Content="OK"/>

</WrapPanel>

Когда эта разметка загружена, при изменении ширины окна содержимое выглядит не особо привлекательно, т.к. оно перетекает слева направо внутри окна (рис. 25.2).

По умолчанию содержимое WrapPanel перетекает слева направо. Тем не менее, если изменить значение свойства Orientation на Vertical, то можно заставить содержимое перетекать сверху вниз:

<WrapPanel Background="LightSteelBlue" Orientation ="Vertical">

Панель WrapPanel (как и ряд других типов панелей) может быть объявлена с указанием значений ItemWidth и ItemHeight, которые управляют стандартным размером каждого элемента. Если подэлемент предоставляет собственные значения Height и/или Width, то он будет позиционироваться относительно размера, установленного для него панелью. Взгляните на следующую разметку:

<Page

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

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

  Title="Fun with Panels!" Height="100" Width="650">

  <WrapPanel Background="LightSteelBlue" Orientation ="Horizontal"

      ItemWidth ="200" ItemHeight ="30">

  <Label x:Name="lblInstruction" FontSize="15" Content="Enter Car Information"/>

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

  <TextBox x:Name="txtMake"/>

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

  <TextBox x:Name="txtColor"/>

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

  <TextBox x:Name="txtPetName"/>

  <Button x:Name="btnOK" Width ="80" Content="OK"/>

</WrapPanel>

</Page>

В результате визуализации получается окно, показанное на рис. 25.3 (обратите внимание на размер и позицию элемента управления Button, для которого было задано уникальное значение Width).

После просмотра рис. 25.3 вы наверняка согласитесь с тем, что панель WrapPanel — обычно не лучший выбор для организации содержимого непосредственно в окне, поскольку ее элементы могут беспорядочно смешиваться, когда пользователь изменяет размер окна. В большинстве случаев WrapPanel будет подэлементом панели другого типа, позволяя небольшой области окна переносить свое содержимое при изменении размера (как, например, элемент управления ToolBar).

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

Подобно WrapPanel элемент управления StackPanel организует содержимое внутри одиночной строки, которая может быть ориентирована горизонтально или вертикально (по умолчанию) в зависимости от значения, присвоенного свойству Orientation. Однако отличие между ними заключается в том, что StackPanel не пытается переносить содержимое при изменении размера окна пользователем. Взамен элементы в StackPanel просто растягиваются (согласно выбранной ориентации), приспосабливаясь к размеру самой панели StackPanel. Например, в файле SimpleStackPanel.xaml содержится разметка, которая в результате дает вывод, показанный на рис. 25.4:

<Page

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

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

  Title="Fun with Panels!" Height="200" Width="400">

  <StackPanel Background="LightSteelBlue" Orientation ="Vertical">

    <Label Name="lblInstruction"

        FontSize="15" Content="Enter Car Information"/>

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

    <TextBox Name="txtMake"/>

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

    <TextBox Name="txtColor"/>

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

    <TextBox Name="txtPetName"/>

    <Button Name="btnOK" Width ="80" Content="OK"/>

  </StackPanel>

</Page>

Если присвоить свойству Orientation значение Horizontal, тогда визуализированный вывод станет таким, как на рис. 25.5:

<StackPanel Background="LightSteelBlue" Orientation="Horizontal">

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

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

Из всех панелей, предоставляемых API-интерфейсами WPF, панель Grid является, несомненно, самой гибкой. Аналогично таблице HTML панель Grid может состоять из набора ячеек, каждая из которых имеет свое содержимое. При определении Grid выполняются перечисленные ниже шаги.

1. Определение и конфигурирование каждой колонки.

2.