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

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

  • Статья

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

Элемент управления GridSplitter в сочетании с элементом управления контейнера Grid можно использовать для создания макетов окон, размер которых пользователь может изменять во время выполнения. Например, в приложении, имеющем разделенный на области пользовательский интерфейс, пользователь может переместить разделитель для того, чтобы увеличить размер необходимой области. В данном руководстве описано создание макета для приложения службы сообщений.

В данном руководстве нужно выполнить следующие задачи:

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

  • Настройка панели сетки по умолчанию,

  • добавить горизонтальный разделитель GridSplitter,

  • Добавление панели закрепления и элементов управления,

  • Добавление панели сетки и элементов управления,

  • Выполнение тестирования приложения.

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

Приложение с изменяемыми размерами

Bb546954.alert_note(ru-ru,VS.90).gifПримечание.

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

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

Для выполнения этого пошагового руководства необходимы следующие компоненты:

  • Visual Studio 2008

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

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

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

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

    Bb546954.alert_note(ru-ru,VS.90).gifПримечание.

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

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

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

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

По умолчанию новое приложение WPF содержит сетку Window с панелью Grid. Рекомендуется выделить эту сетку Grid для GridSplitter. Схема сетки выглядит следующим образом.

Строка 1: панель Dock для первой части макета.

Строка 2: разделитель GridSplitter.

Строка 3: панель Grid для остального макета.

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

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

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

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

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

  4. Установите значение Auto для свойства Height второй строки.

  5. Установите значение 70 для свойства MinHeight третьей строки.

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

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

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

Добавление горизонтального разделителя GridSplitter

На следующем этапе добавляется разделитель GridSplitter.

Добавление горизонтального разделителя GridSplitter

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

  2. Из панели элементов перетащите элемент управления GridSplitter в сетку Grid.

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

    Свойство

    Значение

    ResizeDirection

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    10

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

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

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

Следующий этап — добавление панели DockPanel и настройка макета верхней части приложения. DockPanel содержит Label и RichTextBox. Задайте цвет Label и RichTextBox, чтобы выделить область верхней половины приложения при перемещении разделителя GridSplitter.

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

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

  2. Из панели элементов перетащите элемент управления DockPanel в сетку Grid.

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

    Свойство

    Значение

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    LastChildFill

    True (флажок установлен)

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. Из панели элементов перетащите элемент управления Label в панель DockPanel.

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

    Свойство

    Значение

    Background

    Blue (#FF0000FF)

    Foreground

    White (#FFFFFFFF)

    Content

    Display

    DockPanel.Dock

    Top

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  6. В представлении «Конструктор» выберите DockPanel.

    Bb546954.alert_note(ru-ru,VS.90).gifСовет.

    Так как в сетке есть несколько элементов управления, для упрощения выбора DockPanel можно использовать клавишу TAB, окно Структура документа или представление XAML. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.

  7. Из панели элементов перетащите элемент управления RichTextBox в панель DockPanel.

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

    Свойство

    Значение

    Background

    LightBlue (#FFADD8E6)

    DockPanel.Dock

    Bottom

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    True (флажок установлен)

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

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

Следующий этап — добавление сетки Grid и настройка макета нижней части приложения. Grid содержит Button и RichTextBox. Задайте цвет RichTextBox, чтобы выделить область нижней половины приложения при перемещении разделителя GridSplitter.

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

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

  2. Из панели элементов перетащите элемент управления Grid в сетку Grid.

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

    Свойство

    Значение

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    2

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

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

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

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

  6. Установите значение Auto для свойства Width второго столбца.

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

  8. Из панели элементов перетащите элемент управления Button в сетку Grid.

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

    Свойство

    Значение

    Content

    OK

    Grid.Column

    1

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    60

    Height

    60

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    5

  10. Из панели элементов перетащите элемент управления RichTextBox в сетку Grid.

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

    Свойство

    Значение

    Background

    PaleGoldenrod (#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    False (флажок не установлен)

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

Тестирование приложения

Последней процедурой является тестирование приложения.

Тестирование приложения

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

    Приложение запускается и появляется окно Window1.

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

    Верхняя и нижняя половины приложения расширяются и сжимаются для использования всего свободного пространства.

  3. Перетащите разделитель для изменения размеров частей приложения. Сделайте одну часть приложения меньше другой.

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

    Верхняя и нижняя половины приложения расширяются и сжимаются пропорционально в зависимости от положения разделителя.

  5. Переместите разделитель как можно ближе к верхней части приложения.

    Верхняя половина приложения исчезает и отображается только нижняя половина.

  6. Переместите разделитель как можно ближе к нижней части приложения.

    Нижняя половина приложения по-прежнему отображается. Это происходит потому, что для свойство MinHeight третьей строки было установлен значение «70».

    Bb546954.alert_note(ru-ru,VS.90).gifПримечание.

    70 = 60 (высота кнопки) + 5 (верхняя граница кнопки) + 5 (нижняя граница кнопки)

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

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

Ниже приведен пример готового файла 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="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

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

Приложение, созданное в данном примере, содержит горизонтальный разделитель. Можно поэкспериментировать, создав такое же приложение только с вертикальным разделителем.

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

См. также

Задачи

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

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

Макет с абсолютным и динамическим положением

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

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