Создание пользовательского интерфейса для приложения WPF

Статья
11/05/2008

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

Создание пользовательского интерфейса для приложения Windows Presentation Foundation (WPF) аналогично такому же процессу для приложения Windows Forms. Он заключается в перетаскивании элементов управления из панели элементов на поверхность разработки. Интегрированная среда разработки имеет отличия в приложениях WPF. Кроме окна Свойства и панели элементов, IDE WPF располагает редактором XAML. XAML — это язык XAML (расширяемый язык исправления для приложений), используемый для создания пользовательского интерфейса. На следующем рисунке изображено расположение редактора XAML. Дополнительные сведения см. в разделе Пошаговое руководство. Изменение XAML в конструкторе WPF.

Редактор XAML
Windows XAML

Аналогично созданию элемента управления путем написания кода при разработке Windows Forms, разметку XAML также можно использовать для создания элементов управления. В большинстве случаев писать на XAML для создания элементов управления не придется — гораздо проще перетащить элементы из панели элементов позволить Visual C#, экспресс-выпуск создать XAML. Затем разметку XAML можно отредактировать, чтобы изменить атрибуты элемента управления, такие как Высота или Текст. Например, следующая XAML-разметка заменяет разметку, которая создается при двойном щелчке элемента управления Button с целью его добавления в окно WPF.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

По умолчанию изменяемые атрибуты (например, "Ширина" и "Высота") выделены красным цветом. Изменить значения можно непосредственно в разметке XAML, как показано в следующем примере.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

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

В меню Файл выберите команду Создать проект.
В диалоговом окне Создание проекта выберите Приложение WPF.
В поле Имя введите Приложение WPF и нажмите кнопку ОК.

Будет создан новый проект WPF. Откроется новое окно с именем Window1 и его XAML-разметка будет отображена в редакторе XAML интегрированной среды разработки (IDE) Visual C#, экспресс-выпуск.
Щелкните окно Window1, чтобы выделить его.
В представлении XAML измените значение атрибута Title элемента Window на WPF Application.

Текст в строке заголовка Window1 изменится на Приложение WPF.

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

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

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

Перетащите элемент управления TextBox с панели элементов в верхнюю правую часть окна WPF.
Выделите элемент TextBox, щелкнув его.
В окне Свойства щелкните первую стрелку ("По левому краю") для свойства HorizontalAlignment, как показано на следующей иллюстрации.

Свойство HorizontalAlignment

Оно перемещает элемент управления TextBox из правой части окна WPF в левую.
Задайте следующие свойства для элемента TextBox.

Свойство

Значение

VerticalAlignment

Верхний край

Ширина

75

Высота

26
В редакторе XAML измените значение атрибута Width элемента TextBox на 140 и измените элемент Margin на 30, 56, 0, 0, как показано в следующем примере.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
После ввода новых значений ширина и расположение элемента управления TextBox будут изменены.
Добавьте в окно WPF элемент управления Button, разместив его рядом с элементом управления TextBox.
Измените текст между открывающим и закрывающим тегами Button с Button на Submit, как показано в следующем примере.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
Текст на кнопке изменится после ввода нового значения.
Нажмите клавишу F5 для выполнения программы. Откроется окно, содержащее добавленное текстовое поле и кнопку.

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