Разработка пользовательского интерфейса для WPF-приложения (Visual Basic)

Статья
11/05/2008

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

В этом разделе вы узнаете, как создать WPF-приложение и добавить элементы управления к пользовательскому интерфейсу.

Разработка приложений Windows Presentation Foundation (WPF) аналогична разработке приложений Windows Forms; нужно добавить элементы управления в область конструктора. Однако существуют некоторые различия. В дополнение к конструктору, окну Свойства и Панели элементов, здесь существует окно языка XAML. XAML расшифровывается как Extensible Application Markup Language, или расширяемый прикладной язык разметки. Это язык разметки, который используется для создания интерфейса пользователя. На следующем рисунке изображено расположение XAML-редактора по умолчанию. Дополнительные сведения см. в разделе Пошаговое руководство. Изменение XAML в конструкторе WPF.

Редактор XAML
Windows XAML

При создании традиционного приложения Windows Forms можно перетащить элемент управления из Панели элементов в Windows Forms, или при необходимости написать код для создания этого элемента. При перетаскивании элемента на форму код создается автоматически. Аналогично, при создании WPF-приложения элемент управления можно создать, написав разметку XAML или перетащив элемент управления на окно WPF.

Разметка XAML организована в элементы, отображаемые в иерархическом формате. Элементы заключены в угловые скобки, обычно присутствует открывающий и закрывающий элемент. Например, простой элемент Button будет выглядеть следующим образом: <Button></Button>. Обычно описание внешнего вида элемента выполняется путем определения его атрибутов, таких как расположение, высота и ширина. Атрибуты элемента напоминают свойства объекта, поскольку они являются описанием физического внешнего вида или состояния. Атрибуты отображаются между открывающими и закрывающими скобками текущего элемента. Они состоят из имени атрибута, знака присваивания (=) и значения атрибута, заключенного в кавычки. Например, высоту для кнопки можно задать, используя следующий код: <Button Height="23"></Button>.

При перетаскивании WPF-элемента управления из Панели элементов на конструктор, Visual Basic, экспресс-выпуск автоматически создает для него XAML-разметку. Например, следующая XAML-разметка формируется при двойном щелчке на элементе управления System.Windows.Controls.Button с целью его добавления на окно WPF.

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

Обратите внимание, что для элемента Button значение атрибута Height равно "23", а значение атрибута HorizontalAlignment установлено в "Left". Существуют также некоторые другие атрибуты, описывающие элемент. Чтобы изменить эти атрибуты, измените их значения непосредственно в разметке XAML. (По умолчанию эти атрибуты отображаются красным шрифтом.) Свойства элемента управления можно также изменить с помощью окна Свойства.

Практическое задание

Чтобы создать приложение на основе WPF

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

Создается новый проект Windows Presentation Foundation. Появится новое окно с именем Window1. Его XAML-разметка будет отображена в редакторе XAML интегрированной среды разработки (IDE) Visual Basic в следующем виде:
```
<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>
</Window>
```
Нажмите Window1, чтобы выделить его.
В редакторе XAML измените значение атрибута Title элемента Window из Window1 на WPF Application.

Разметка XAML теперь будет выглядеть следующим образом:
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Текст в строке заголовка Window1 изменится на Приложение WPF.

Поэкспериментируйте, изменив другие атрибуты окна, например Width и Height. Когда будете готовы, переходите к следующей процедуре.

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

В этой процедуре в приложение добавляются элементы управления. Это будет сделано нажатием левой кнопкой мыши на элементе управления в Панели элементов, которая обычно находится в левой части IDE-интерфейса Visual Basic, и перетаскиванием нужного элемента на окно WPF. Необходимо настроить некоторые свойства элемента управления, а затем настроить разметку XAML для изменения его текста и размера.

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

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

Свойство HorizontalAlignment

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

Свойство

Значение

VerticalAlignment

Top

Width

75

Height

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 для запуска приложения. Появится окно, содержащее добавленные текстовое поле и кнопку. Обратите внимание, что можно нажать на кнопку и написать текст в текстовом поле. Необходимо добавить обработчики событий для элементов управления и написать код, указывающий компьютеру, что делать при нажатии кнопки.

Свойство	Значение
VerticalAlignment	Top
Width	75
Height	26

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

В этом разделе было рассмотрено, как создать WPF-приложение и добавить к нему элементы управления. Было также показано, как задать свойства элементов управления в окне Свойства и как изменить атрибуты окна WPF и элементов управления в режиме XAML. В следующем разделе будет рассказано о некоторых других элементах управления, которые доступны в Панели элементов.

Следующее занятие: Использование основных элементов управления WPF.