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

В этом руководстве описано, как использовать Visual Studio для создания приложения Windows Presentation Foundation (WPF). С помощью Visual Studio вы добавляете элементы управления в окна и обрабатываете события. К концу этого руководства у вас есть простое приложение, которое добавляет имена в поле списка.

Изучив это руководство, вы:

Создайте новое приложение WPF.
Добавление элементов управления в окно.
Обработка событий элемента управления для предоставления функциональных возможностей приложения.
Запустите приложение.

Ниже приведена предварительная версия приложения, созданного в этом руководстве:

Готовый пример приложения WPF

Предпосылки

Visual Studio 2026
- Выберите рабочую нагрузку Разработка классических приложений .NET.
- Выберите отдельный компонент .NET 10

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

Первым шагом в создании нового приложения является запуск Visual Studio и создание приложения на основе шаблона.

Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска шаблонов введите wpf и дождитесь отображения результатов поиска.
В раскрывающемся списке язык кода выберите C# или Visual Basic.
В списке шаблонов выберите приложение WPF и нажмите кнопку "Далее".

Это важно

Не выбирайте шаблон WPF Application (.NET Framework).

На следующем рисунке показаны шаблоны проектов как для C#, так и для Visual Basic .NET. При применении фильтра языка кода соответствующий шаблон отображается.
В окне "Настройка нового проекта" задайте для имени проекта имя "Имена" и нажмите кнопку "Далее".

Вы также можете сохранить проект в другую папку, изменив путь расположения.
Наконец, в окне дополнительных сведений выберите .NET 10.0 (долгосрочная поддержка) для параметра Платформы , а затем нажмите кнопку "Создать".

После создания приложения Visual Studio откроется окно конструктора XAML для окна по умолчанию MainWindow. Если конструктор не отображается, дважды щелкните файл MainWindow.xaml в окне Обозреватель решений, чтобы открыть конструктор.

Важные элементы среды Visual Studio

Поддержка WPF в Visual Studio содержит пять важных компонентов, с которыми вы взаимодействуете при создании приложения:

Важные компоненты Visual Studio 2026, которые следует знать при создании проекта WPF для .NET.

Обозреватель решений

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

В этом окне показаны параметры свойств, которые можно настроить в зависимости от контекста выбранного элемента. Например, если выбрать элемент из обозревателя решений, отображаются параметры, связанные с файлом. Если выбран объект конструктора, отображаются свойства элемента управления или окна.
Ящик для инструментов

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

Это конструктор для документа XAML. Он является интерактивным, и на него можно перетаскивать объекты из панели элементов. Выбрав и переместив элементы в конструкторе, вы можете визуально создавать пользовательский интерфейс для приложения.

Если конструктор и редактор отображаются, изменения в одном из них сразу отражаются в другом.

При выборе элементов в конструкторе окно "Свойства " отображает свойства и атрибуты этого объекта.
Редактор кода XAML

Это редактор кода XAML для документа XAML. Редактор кода XAML — это способ создания пользовательского интерфейса вручную без конструктора. Конструктор может автоматически задавать свойства элемента управления при добавлении элемента управления в конструктор. В редакторе кода XAML вам предоставляется гораздо больше контроля.

Если конструктор и редактор отображаются, изменения в одном из них сразу отражаются в другом. При навигации по тексту в редакторе кода окно свойств отображает свойства и атрибуты этого объекта.

Изучение кода XAML

После создания проекта откроется редактор кода XAML. В нем отображается минимальный объем кода XAML для отображения окна. Если редактор не открыт, дважды щелкните элемент MainWindow.xaml в окне Обозреватель решений. Должен отобразиться код XAML, аналогичный следующему примеру:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Это важно

Если вы кодируете на Visual Basic, XAML немного отличается, в частности атрибут x:Class="..". XAML в Visual Basic использует имя класса объекта и исключает пространство имен для класса.

Чтобы лучше понять XAML, давайте разберем его. XAML — это просто XML, который обрабатывает WPF для создания пользовательского интерфейса. Для понимания XAML следует, как минимум, знать основы XML.

Корневой каталог <Window> документа представляет тип объекта, описанного в XAML-файле. Файл объявляет восемь атрибутов, и они обычно относятся к трем категориям:

Пространства имен XML

Пространство имен XML предоставляет структуру XML. Он определяет, какое XML-содержимое можно объявить в файле.

Основной xmlns атрибут импортирует пространство имен XML для всего файла. В этом случае он связан с типами, объявленными в WPF. Другие пространства имен XML объявляют префикс и импортируют другие типы и объекты для XAML-файла. Например, пространство имен xmlns:local объявляет префикс local и выполняет сопоставление объектов, объявленных в проекте, с теми, которые объявлены в пространстве имен кода Names.
Атрибут x:Class

Этот атрибут сопоставляет <Window> тип, определенный кодом: файл MainWindow.xaml.cs или MainWindow.xaml.vb, который является классом Names.MainWindow в C# и MainWindow Visual Basic.
Атрибут Title

Любой обычный атрибут, объявленный в объекте XAML, задает свойство этого объекта. В этом случае атрибут Title задает свойство Window.Title.

Изменение окна

Для нашего примера приложения это окно слишком велико, а его заголовок не является описательным. Давайте исправим это.

Сначала запустите приложение, нажав клавишу F5 или выбрав "Начать отладку>" в меню.

Отображается окно по умолчанию, созданное шаблоном без элементов управления, и заголовок MainWindow:
Измените заголовок окна, задав для Title этого значение Names.

Измените размер окна, задав Height для 180 параметра и Width значение 260.

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Подготовка макета

В WPF имеется система макетов с широкими возможностями с множеством различных элементов управления макетом. Элементы управления макета помогают размещать дочерние элементы управления и изменять их размеры, а также могут даже это делать автоматически. Элемент управления по умолчанию, предоставленный в этом XAML, - это контрол <Grid>.

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

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

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

Добавьте новый атрибут в <Grid> элемент: Margin="10"

Этот параметр приводит сетку из краев окна и делает его немного более хорошим.

Определите две строки и два столбца, разделив сетку на четыре ячейки:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

Выберите сетку в редакторе кода XAML или конструкторе XAML. Конструктор XAML отображает каждую строку и столбец:

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

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

Создайте новый <Label> элемент внутри <Grid> элемента после определений строк и столбцов. Задайте содержимое элемента строковым значением Names:
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
<Label>Names</Label> определяет содержимое Names. Некоторым элементам управления известно, как управлять содержимым, а другим — нет. Содержимое элемента управления сопоставляется со свойством Content. Если вы задаете содержимое с помощью синтаксиса атрибута XAML, используйте следующий формат: <Label Content="Names" /> Оба способа служат для выполнения одного и того же действия — отображение текста Names в качестве содержимого метки.

Метка занимает половину окна, так как она была автоматически размещена в первой строке и столбце сетки. Для первой строки не требуется столько места, так как вы будете использовать эту строку только для метки.
Измените атрибут Height первого параметра <RowDefinition> с * на Auto.

Значение Auto автоматически изменяет размер строки сетки под размер ее содержимого (в данном случае это элемент управления Label).
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
Теперь дизайнер отображает метку, занимающую небольшую часть доступной высоты. Для следующего ряда больше места для размещения.

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

Давайте поговорим о размещении элементов управления. Метка, созданная в предыдущем разделе, автоматически помещается в строку 0 и столбец 0 сетки. Нумерирование строк и столбцов начинается с 0 и увеличивается на 1. Элементу управления ничего не известно о сетке, и элемент управления не определяет свойства для управления своим размещением в сетке.

Как указать элементу управления, что ему следует использовать другую строку или столбец, если элемент управления не имеет сведений о сетке? В этом случае на помощь придут вложенные свойства! Сетка использует преимущества системы свойств, предоставляемой WPF.

Элемент управления сеткой определяет новые свойства, которые дочерние элементы управления могут присоединять к себе. Свойства не существуют в самом элементе управления, но они становятся доступными для элемента управления после добавления в сетку.

Сетка определяет два свойства для определения размещения строк и столбцов дочернего элемента управления: Grid.Row и Grid.Column. Если эти свойства не включены в элемент управления, значения по умолчанию — 0. Таким образом, элемент управления помещается в строку 0 и столбец 0 сетки. Попробуйте изменить расположение элемента управления <Label>, присвоив атрибуту Grid.Column значение 1:

<Label Grid.Column="1">Names</Label>

Обратите внимание, что метка перемещена во второй столбец. Вы можете использовать присоединенные свойства Grid.Row и Grid.Column для размещения следующих элементов управления, которые вы создадите. Но теперь восстановите метку до столбца 0.

Создание поля со списком имен

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

Объявите <ListBox /> элемент управления под элементом <Label> управления.
Задайте для свойства Grid.Row значение 1.
Задайте для свойства x:Name значение lstNames.

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

Вот как должен выглядеть XAML:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

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

Добавьте текстовое поле и кнопку. Пользователь использует эти элементы управления для ввода имени для добавления в поле списка. Вместо создания дополнительных строк и столбцов в сетке, чтобы упорядочить эти элементы управления, поместите эти элементы управления в элемент управления макетом <StackPanel> .

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

Объявите <StackPanel> элемент управления под элементом <ListBox> управления.
Задайте для свойства Grid.Row значение 1.
Задайте для свойства Grid.Column значение 1.
Задайте для Margin значение 5,0,0,0.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
Вы ранее использовали атрибут Margin в сетке, но вы указали только одно значение, 10. Это поле имеет значение 5,0,0,0, которое очень отличается от 10. Свойство поля является типом Thickness и может интерпретировать оба значения. Толщина определяет пространство вокруг каждой стороны прямоугольника, слева, сверху, справа, снизу, соответственно. Если значение поля является одним значением, оно используется для всех четырех сторон.
В элементе <StackPanel> управления создайте <TextBox /> элемент управления.
1. Задайте для свойства x:Name значение txtName.
Наконец, после <TextBox>того, как элемент управления еще находится внутри <StackPanel>элемента управления, создайте <Button> элемент управления.
1. Задайте для свойства x:Name значение btnAdd.
2. Задайте для Margin значение 0,5,0,0.
3. Задайте для Add Nameсодержимого значение .

Вот как должен выглядеть XAML:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Макет окна готов. Однако приложение не имеет никакой логики, чтобы на самом деле быть функциональным. Затем вам необходимо привязать управляющие события к коду и заставить приложение действительно что-либо выполнять.

Добавление кода для события Click

Созданный вами <Button> имеет событие Click, которое приложение вызывает, когда пользователь нажимает кнопку. Подпишитесь на это событие и добавьте код, чтобы добавить имя в поле списка. Используйте атрибуты XAML для подписки на события, как и для задания свойств.

<Button> Найдите элемент управления.

Задайте для атрибута ClickButtonAddName_Clickзначение .

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Создайте код обработчика событий. Щелкните правой кнопкой мыши ButtonAddName_Click и выберите Перейдите к определению.

Это действие создает метод в файле кода, который соответствует указанному вами имени обработчика.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

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

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

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Запуск приложения

После обработки события запустите приложение. Откроется окно, и вы можете ввести имя в текстовом поле. Добавьте имя, нажав кнопку.

Запуск приложения WPF для .NET в Visual Studio 2026.

Подробнее о Windows Presentation Foundation
Обзор XAML

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-12-18