Пошаговое руководство. Построение макета на основании абсолютного положения

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

В Конструктор WPF для Visual Studio содержится элемент управления "панель" Canvas, который поддерживает абсолютное позиционирование. Для абсолютного позиционирования элементов в приложениях можно использовать элемент управления "панель" Canvas.

Важно!

По возможности следует использовать динамический макет.Динамические макеты являются самыми гибкими, адаптируются к изменениям содержимого, таким как локализация, и позволяют конечному пользователю осуществлять наиболее полный контроль за средой.Примеры динамических макетов см. в разделах Пошаговое руководство. Создание масштабируемого приложения с помощью конструктора WPF и Пошаговое руководство. Построение динамического макета.

В данном пошаговом руководстве выполняются следующие задачи.

• Создание приложения WPF.

• Добавление элемента управления "панель" Canvas в приложение.

• Добавление в панель элементов управления.

• Тестирование макета.

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

Примечание

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска.Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров.Дополнительные сведения см. в разделе Работа с параметрами.

Обязательные компоненты

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

• Visual Studio 2010

Создание проекта

Первым этапом является создание проекта приложения.

Создание проекта

1. Создайте новый проект приложения WPF на языке Visual Basic или Visual C# с именем AbsoluteLayout. Дополнительные сведения см. в разделе Практическое руководство. Создание нового проекта приложения WPF.

   Примечание

   В данном пошаговом руководстве не требуется написания кода.Язык, выбранный для проекта, используется в приложении для страниц кода программной части.

   Файл MainWindow.xaml будет открыт в сред. Конструктор WPF.

2. В представлении конструктора выберите окно. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.

3. В окне Свойства задайте значения следующих свойств для элемента управления Window.

   Свойство	Значение
   Ширина	400
   Высота	200

   Совет

   Для изменения размера окна в представлении конструктора можно также использовать маркеры изменения размера.

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

   1. В окне Свойства установите значения следующего свойства для объекта Window:

      Свойство	Значение
      ResizeMode	NoResize

   2. В окне Свойства задайте значения следующих свойств для элемента управления Window.

      Свойство	Значение
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. В меню Файл выберите команду Сохранить все.

Добавление элемента управления "панель"

По умолчанию новое приложение WPF содержит окно Window с панелью Grid. Для создания макета на основе абсолютного позиционирования необходимо использовать панель Canvas. В этой процедуре удаляется используемая по умолчанию панель Grid и добавляется панель Canvas.

Добавление элемента управления "панель"

1. В представлении конструктора выберите сетку.

2. Нажмите клавишу DELETE для удаления панели Grid.

3. В панели элементов в группе Элементы управления перетащите элемент управления Canvas на объект Window.

4. В окне Свойства установите для свойства "Height" элемента управления Canvas значение "Auto".

   Панель Canvas растягивается до высоты объекта Window.

5. В окне Свойства установите для свойства "Width" элемента управления Canvas значение "Auto".

   Элемент управления Canvas растягивается до ширины Window.

6. В меню Файл выберите команду Сохранить все.

Добавление в панель элементов управления

Далее следует добавить элементы управления в панель и использовать вложенные свойства Left и Top элемента управления Canvas для их абсолютного позиционирования.

Добавление в панель элементов управления

1. В панели элементов перетащите из группы Общие элемент управления Label на элемент управления Canvas.

2. В окне Свойства задайте значения следующих свойств для элемента управления Label.

   Свойство	Значение
   Содержимое	Имя:
   Canvas.Left	20
   Canvas.Top	20
   Ширина	120
   Высота	23

3. В панели элементов перетащите из группы Общие элемент управления Label на элемент управления Canvas.

4. В окне Свойства задайте значения следующих свойств для элемента управления Label.

   Свойство	Значение
   Содержимое	Пароль:
   Canvas.Left	20
   Canvas.Top	60
   Ширина	120
   Высота	23

5. В панели элементов перетащите из группы Общие элемент управления TextBox на элемент управления Canvas.

6. В окне Свойства задайте значения следующих свойств для элемента управления TextBox.

   Свойство	Значение
   Canvas.Left	160
   Canvas.Top	20
   Ширина	200
   Высота	23

7. В панели элементов перетащите из группы Общие элемент управления TextBox на элемент управления Canvas.

8. В окне Свойства задайте значения следующих свойств для элемента управления TextBox.

   Свойство	Значение
   Canvas.Left	160
   Canvas.Top	60
   Ширина	200
   Высота	23

9. В панели элементов перетащите из группы Общие элемент управления Button на элемент управления Canvas.

10. В окне Свойства задайте значения следующих свойств для элемента управления Button.

    Свойство	Значение
    Содержимое	ОК
    Canvas.Left	196
    Canvas.Top	120
    Ширина	75
    Высота	23

11. В панели элементов перетащите из группы Общие элемент управления Button на элемент управления Canvas.

12. В окне Свойства задайте значения следующих свойств для элемента управления Button.

    Свойство	Значение
    Содержимое	Отмена
    Canvas.Left	283
    Canvas.Top	120
    Ширина	75
    Высота	23

13. В меню Файл выберите команду Сохранить все.

Тестирование макета

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

Тестирование макета

1. (Необязательно) Если на предыдущем шаге размер окна был заблокирован, то для выполнения этой процедуры его необходимо разблокировать. В окне Свойства задайте значения следующих свойств для элемента управления Window.

   Свойство	Значение
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinity
   MaxHeight	Infinity
   ResizeMode	CanResize

2. В меню Отладка щелкните Начать отладку.

   Запускается приложение и открывается окно.

3. Измените размеры окна.

   Для элементов управления соблюдается абсолютное позиционирование и их размер или расположение не изменяется.

4. Закройте окно.

Объединение частей приложения

Ниже показан полный файл MainWindow.xaml:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

См. также

Задачи

Практическое руководство. Построение макета на основе абсолютного положения

Основные понятия

Выравнивание в конструкторе WPF

Система макета

Общие сведения о конструкторах WPF и Silverlight

Другие ресурсы

Примеры создания макетов