Пошаговое руководство. Построение динамического макета

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

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

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

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

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

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

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

• Настройка элемента управления «панель» Grid по умолчанию.

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

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

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

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

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

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

• Visual Studio 2008

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

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

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

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

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

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

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

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

   Свойство	Значение
   Width	400
   Height	200
   SizeToContent	WidthAndHeight

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

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

Настройка элемента управления панели «сетка», используемого по умолчанию

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

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

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

2. (Необязательно) В окне Свойства найдите свойство «ShowGridLines» и установите его флажок.

   При выполнении приложения в окне будут отображаться линии сетки. Это полезно для отладки, но для рабочего кода следует снять флажок свойства «ShowGridLines».

3. В окне Свойства найдите свойство «ColumnDefinitions» и нажмите кнопку с многоточием в столбце значений свойств.

   Откроется диалоговое окно Редактор коллекции.

   1. Нажмите кнопку Добавить четыре раза, чтобы добавить четыре столбца.

   2. Задайте для свойства «Width» первой строки значение «Auto».

   3. Задайте для свойства «Width» второй строки значение «*».

   4. Задайте для свойства «Width» третьей строки значение «Auto».

   5. Задайте для свойства «Width» четвертой строки значение «Auto».

   6. Нажмите кнопку ОК, чтобы закрыть Редактор коллекции и вернуться к WPF (конструктор).

      Теперь в сетке четыре столбца, но появится только один. Столбцы, для свойства «Width» которых установлено значение «Auto», временно скрыты, поскольку они не имеют содержимого. В данном примере это нормально. Во избежание этого можно в качестве размера указать звездочку, а в конце работы заменить ее на «Auto».

4. В окне Свойства найдите свойство «RowDefinitions» и нажмите кнопку с многоточием в столбце значений свойств.

   Откроется диалоговое окно Редактор коллекции .

   1. Нажмите кнопку Добавить четыре раза, чтобы добавить четыре строки.

   2. Задайте для свойства «Height» первой строки значение «Auto».

   3. Задайте для свойства «Height» второй строки значение «Auto».

   4. Задайте для свойства «Height» третьей строки значение «*».

   5. Задайте для свойства «Height» четвертой строки значение «Auto».

   6. Нажмите кнопку ОК, чтобы закрыть Редактор коллекции и вернуться к WPF (конструктор).

      Теперь в сетке четыре строки, но отображается только одна. Строки, для свойства «Height» которых установлено значение «Auto», временно скрыты, поскольку они не имеют содержимого. В данном примере это нормально. Во избежание этого можно в качестве размера указать звездочку, а в конце работы заменить ее на «Auto».

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

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

Далее нужно добавить элементы управления в панель и использовать вложенные свойства Column и Row панели Grid для их динамического позиционирования.

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

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

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

   Свойство	Значение
   Content	Имя:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,20,10,10

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

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

   Свойство	Значение
   Content	Пароль:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,10,10,10

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

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

   Свойство	Значение
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,20,20,10

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

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

   Свойство	Значение
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,10,20,10

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

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

    Свойство	Значение
    Content	OK
    Grid.Column	2
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	10,10,6,20

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

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

    Свойство	Значение
    Content	Cancel
    Grid.Column	3
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	6,10,20,20

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

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

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

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

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

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

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

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

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

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

5. Измените размеры окна по вертикали и по горизонтали.

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

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

7. В представлении конструктора выберите подпись «Имя».

8. В окне Свойства измените значение свойства «Content» на Пожалуйста, введите полное имя:.

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

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

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

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

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

Ниже приведен пример готового файла 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" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Следующие действия

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

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

См. также

Задачи

Практическое руководство. Построение динамического макета

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

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

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

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

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

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

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