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

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

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

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

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

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

Задание свойств окна для динамического поведения

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

Задание свойств окна для динамического поведения

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

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

   Свойство	Значение	Эффект
   ResizeMode	CanResize	Это позволяет пользователю изменять размер окна, чтобы увеличить место для элементов управления.
   SizeToContent	WidthAndHeight	Позволяет окну автоматически изменять размер при расширении его содержимого.

Задание свойств панели для динамического поведения

При добавлении новой панели (например, Grid, DockPanel или StackPanel) в окно или на другую панель можно установить свойства, чтобы максимально увеличить гибкость динамического макета.

Задание свойств панели для динамического поведения

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

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

   Свойство	Значение	Эффект
   Width	Auto	Панель растягивается до ширины родительского окна или панели.
   Height	Auto	Панель растягивается до высоты родительского окна или панели.

Задание свойств сетки для динамического поведения

Можно использовать значения «Auto» и «*» для создания сеток, которые динамически изменяют размер в соответствии с содержимым. Автоматическое изменение размеров используется для соответствия размеров элементов управления их содержимому, даже если размер содержимого изменяется. Значение размера «*» используется для пропорционального распределения доступного места. Дополнительные сведения см. в разделе Star.

При использовании представления конструктора для создания новых строк и столбцов они по умолчанию создаются со значением размера Star. Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.

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

Задание свойств сетки для динамического поведения

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

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

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

   1. Выберите или добавьте определение нового столбца.

   2. Для максимальной гибкости при задании ширины столбцов используйте значения «Auto» и «*».

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

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

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

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

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

   2. Для максимальной гибкости при задании высоты строк используйте значения «Auto» и «*».

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

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

Задание свойств элемента управления для динамического поведения

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

Задание свойств элемента управления для динамического поведения

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

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

   Свойство	Значение	Эффект
   Width	Auto	Элемент управления расширяется по горизонтали в соответствии с содержимым.
   Height	Auto	Элемент управления расширяется по вертикали в соответствии с содержимым.
   MinWidth	0	Элемент управления может быть сужен по горизонтали насколько необходимо.
   MinHeight	0	Элемент управления может быть сужен по вертикали насколько необходимо.
   MaxWidth	Infinity	Элемент управления может быть растянут по горизонтали насколько необходимо.
   MaxHeight	Infinity	Элемент управления может быть растянут по вертикали насколько необходимо.

   Примечание.
   Показанные значения являются значениями по умолчанию.

См. также

Задачи

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

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

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

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

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

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

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