Поделиться через

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

  • Статья

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

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

Важно!

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

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

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

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

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

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

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

Динамический макет

Примечание

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

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

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

  • Visual Studio 2010

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

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

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

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

    Примечание

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

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

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

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

    Свойство

    Значение

    Ширина

    400

    Высота

    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.

    Свойство

    Значение

    Содержимое

    Имя:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Ширина

    Auto

    Высота

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Top

    Margin

    20,20,10,10

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

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

    Свойство

    Значение

    Содержимое

    Пароль:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Ширина

    Auto

    Высота

    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

    Ширина

    Auto

    Высота

    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

    Ширина

    Auto

    Высота

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,20,10

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

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

    Свойство

    Значение

    Содержимое

    ОК

    Grid.Column

    2

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Ширина

    75

    Высота

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,6,20

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

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

    Свойство

    Значение

    Содержимое

    Отмена

    Grid.Column

    3

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Ширина

    75

    Высота

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    6,10,20,20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ниже показан полный файл 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" 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 в этом примере на следующие панели:

См. также

Задачи

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

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

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

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

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

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

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

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