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

Обновлен: Ноябрь 2007

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

В Windows Presentation Foundation (WPF) для Visual Studio (конструктор) содержится элемент управления «панель» Canvas, который поддерживает абсолютное позиционирование. Элемент управления «панель» Canvas можно использовать для абсолютного позиционирования элементов в приложениях.

Важное примечание.

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

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

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

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

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

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

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

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

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

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

• Visual Studio 2008

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

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

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

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

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

   В WPF (конструктор) откроется файл Window1.xaml.

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

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

   Свойство	Значение
   Width	400
   Height	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:

   Свойство	Значение
   Content	Имя:
   Canvas.Left	20
   Canvas.Top	20
   Width	120
   Height	23

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

4. В окне Свойства установите следующие свойства для Label:

   Свойство	Значение
   Content	Пароль:
   Canvas.Left	20
   Canvas.Top	60
   Width	120
   Height	23

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

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

   Свойство	Значение
   Canvas.Left	160
   Canvas.Top	20
   Width	200
   Height	23

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

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

   Свойство	Значение
   Canvas.Left	160
   Canvas.Top	60
   Width	200
   Height	23

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

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

    Свойство	Значение
    Content	ОК
    Canvas.Left	196
    Canvas.Top	120
    Width	75
    Height	23

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

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

    Свойство	Значение
    Content	Отмена
    Canvas.Left	283
    Canvas.Top	120
    Width	75
    Height	23

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

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

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

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

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

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

2. В меню Отладка выберите команду Начать отладку.

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

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

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

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

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

Ниже приведен пример готового файла Window1.xaml.

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="200" Width="400" ResizeMode="CanResize" Name="Window1" 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

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

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