Пошаговое руководство. Упорядочение содержимого WPF для формы Windows Forms во время разработки

В этом пошаговом руководстве показано, как использовать функции структуры Windows Forms, такие как закрепление и линии привязки, для размещения элементов управления Windows Presentation Foundation (WPF).

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

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

  • создание элемента управления WPF;

  • размещение элементов управления WPF на панели макета;

  • использование линий привязки для выравнивания элементов управления WPF;

  • привязка и закрепление элементов управления WPF.

Note

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

Предварительные требования

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

  • Visual Studio 2012.

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

Первым шагом является создание проекта Windows Forms.

Note

При размещении содержимого WPF поддерживаются только проекты C# и Visual Basic.

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

  • Создание нового проекта приложения Windows Forms в Visual Basic или Visual C# с именем ArrangeElementHost.

Создание элемента управления WPF

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

Создание элементов управления WPF

  1. Добавьте в проект новый элемент управления WPF UserControl. Используйте имя по умолчанию для этого типа элемента управления (UserControl1.xaml). Дополнительные сведения см. в разделе Пошаговое руководство: Создание нового содержимого WPF в формах Windows Forms во время разработки.

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

  3. В свойства окна, установите для параметра Width и Height свойства 200.

  4. Задайте для свойства Background значение Blue.

  5. Выполните построение проекта.

Размещение элементов управления WPF на панели макета

Элементы управления WPF можно использовать на панели макета так же, как и другие элементы управления Windows Forms.

Размещение элементов управления WPF на панели макета

  1. Откройте Form1 в конструкторе Windows Forms.

  2. В элементов, перетащите TableLayoutPanel на форму.

  3. На TableLayoutPanel панель смарт-тега элемента управления, выберите удалить последнюю строку.

  4. Увеличьте высоту и ширину элемента управления TableLayoutPanel.

  5. В элементов, дважды щелкните UserControl1 для создания экземпляра UserControl1 в первой ячейке TableLayoutPanel элемента управления.

    Экземпляр UserControl1 разместится в новом элементе управления ElementHost с именем elementHost1.

  6. В элементов, дважды щелкните UserControl1 для создания другого экземпляра в во вторую ячейку TableLayoutPanel элемента управления.

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

  8. В свойства окна, установите для параметра Padding свойства 10, 10, 10, 10.

    Размер обоих элементов управления ElementHost изменится в соответствии с новой структурой.

Выравнивание элементов управления WPF с помощью линий привязки

Линии привязки позволяют легко выравнивать элементы управления в форме. Линии привязки также можно использовать для выравнивания элементов управления WPF. Дополнительные сведения см. в разделе Пошаговое руководство: Упорядочение элементов управления в Windows Forms с помощью линий привязки.

Выравнивание элементов управления WPF с помощью линий привязки

  1. Из элементов, перетащите экземпляр UserControl1 на форму и поместите его под TableLayoutPanel элемента управления.

    Экземпляр UserControl1 разместится в новом элементе управления ElementHost с именем elementHost3.

  2. С помощью линий привязки выровняйте левый край elementHost3 относительно левого края элемента управления TableLayoutPanel.

  3. С помощью линий привязки установите для elementHost3 ту же ширину, что и для элемента управления TableLayoutPanel.

  4. Перемещайте elementHost3 в сторону элемента управления TableLayoutPanel до тех пор, пока между элементами управления не появится центральная линия привязки.

  5. В свойства окна, задайте значение свойства Margin 20, 20, 20, 20.

  6. Перемещайте elementHost3 от элемента управления TableLayoutPanel до тех пор, пока между элементами управления снова не появится центральная линия привязки. Теперь центральная линия привязки указывает на поле шириной в 20 точек.

  7. Перемещайте элемент управления elementHost3 вправо до тех пор, пока его левый край не будет выровнен относительно левого края элемента управления elementHost1.

  8. Изменяйте ширину элемента elementHost3 до тех пор, пока его правый край не будет выровнен относительно правого края элемента управления elementHost2.

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

Поведение размещенного в форме элемента управления WPF при привязке и закреплении не отличается от поведения других элементов управления Windows Forms.

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

  1. Выберите elementHost1.

  2. В свойства окне Anchor свойства верхнего, нижнего, Left, Right.

  3. Увеличьте размер элемента управления TableLayoutPanel.

    Элемент управления elementHost1 заполнит всю ячейку.

  4. Выберите elementHost2.

  5. В свойства окна, установите для параметра Dock свойства Fill.

    Элемент управления elementHost2 заполнит всю ячейку.

  6. Выберите элемент управления TableLayoutPanel.

  7. Задайте для его свойства Dock значение Top.

  8. Выберите elementHost3.

  9. Задайте для его свойства Dock значение Fill.

    Элемент управления elementHost3 заполнит все оставшееся пространство в форме.

  10. Измените размер формы.

    Размер всех трех элементов управления ElementHost изменится соответствующим образом.

    Дополнительные сведения см. в разделе Как Привязка и закрепление дочерних элементов управления в элементе управления TableLayoutPanel.

См. также