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

Статья
01/03/2023
Чтение занимает 12 мин

Область применения:Visual StudioVisual Studio для Mac Visual Studio Code

При изучении этого руководства вы ознакомитесь со многими инструментами, диалоговыми окнами и конструкторами, которые можно использовать для разработки приложений в Visual Studio. Вам предстоит создать простое приложение "Hello, World", разработать пользовательский интерфейс, добавить код и выполнить отладку, одновременно приобретая навыки работы в интегрированной среде разработки (IDE).

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

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Убедитесь, что установлена рабочая нагрузка Разработка классических приложений .NET. Это можно проверить в Visual Studio Installer.
Для работы с этим руководством можно использовать либо .NET Framework, либо .NET Core. .NET Core — это более новая, современная платформа. Для использования .NET Core требуется Visual Studio 2019 версии 16.3 или более поздней.

Что такое WPF?

WPF или Windows Presentation Foundation — это платформа пользовательского интерфейса ( пользовательского интерфейса), которая создает классические клиентские приложения. Платформа разработки WPF поддерживает широкий набор компонентов для разработки приложений, включая модель приложения, ресурсы, элементы управления, графику, макет, привязки данных, документы и безопасность.

WPF является частью платформы .NET, и если ранее вы создавали приложения в .NET с помощью ASP.NET или Windows Forms, то общий процесс программирования вам уже знаком. WPF использует XAML расширяемого языка разметки приложений для предоставления декларативной модели для программирования приложений. Дополнительные сведения см. в статье Обзор WPF .NET.

Настройка интегрированной среды разработки (IDE)

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

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

При создании приложения в Visual Studio необходимо сначала создать проект и решение. Этот пример демонстрирует создание проекта Windows Presentation Foundation (WPF).

Запустите Visual Studio.
На начальном экране выберите Создать проект.
На экране Создание проекта выполните поиск по запросу "WPF", выберите в результатах Приложение WPF и нажмите кнопку Далее.
На следующем экране присвойте проекту имя HelloWPFApp и щелкните Далее.
В окне Дополнительные сведения для целевой платформы должна быть указана версия .NET Core 3.1. Если это не так, выберите .NET Core 3.1. Затем нажмите Создать.

Visual Studio создает решение и проект HelloWPFApp, а в обозревателе решений выводятся различные файлы. Конструктор WPF отображает представление кода и представление XAML MainWindow.xaml в представлении с разделением. Сдвигая разделитель, можно делать любое из представлений больше или меньше. Можно выбрать для просмотра только визуальное представление или только представление XAML.

Проект и решение WPF в интегрированной среде разработки

Примечание

Дополнительные сведения о XAML (eXtensible Application Markup Language) см. в обзоре XAML для WPF.

После создания проекта его можно настраивать. Для этого выберите Окно свойств в меню Представление или нажмите клавишу F4. Затем можно отображать и изменять параметры элементов проекта, элементов управления и других элементов в приложении.

окно свойств

Запустите Visual Studio.
На начальном экране выберите Создать проект.
На экране Создание проекта выполните поиск по запросу "WPF", выберите в результатах Приложение WPF и нажмите кнопку Далее.
На следующем экране присвойте проекту имя HelloWPFApp и щелкните Далее.
В окне Дополнительные сведения в качестве требуемой версии .NET Framework автоматически должна быть выбрана .NET 6.0 (долгосрочная поддержка) . Если этого не произошло, выберите .NET 6.0 (долгосрочная поддержка) вручную. Затем нажмите Создать.

Снимок экрана: проект HelloWPFApp и решение в интегрированной среде разработки Visual Studio с открытым Обозревателем решений, а также представлениями XAML и конструктора файла MainWindow.xaml, открытого в конструкторе WPF.

Примечание

Дополнительные сведения о XAML (eXtensible Application Markup Language) см. в обзоре XAML для WPF.

Снимок экрана: окно

Конструирование пользовательского интерфейса (ИП)

Если конструктор не открыт, выберите MainWindow.xaml и нажмите клавишу SHIFT+F7 , чтобы открыть конструктор.

В приложение будут добавлены элементы управления трех типов: элемент управления TextBlock, два элемента управления RadioButton и элемент управления Button.

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

Нажмите клавиши CTRL+Q для активации поля поиска и введите Панель элементов. Выберите в списке результатов Представление > Панель элементов.
В окне Панель элементов разверните узел Типовые элементы управления WPF, чтобы увидеть элемент управления TextBlock.
Добавьте элемент управления TextBlock в область конструктора, выбрав элемент управления TextBlock и перетащив его в окно. Отцентрируйте этот элемент в верхней части окна. В Visual Studio 2019 и более поздних версиях для выравнивания элемента управления по центру можно использовать красные направляющие.

Окно должно выглядеть так, как показано на следующем рисунке:

Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
```
<Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
```

Нажмите клавиши CTRL+Q для активации поля поиска и введите Панель элементов. Выберите в списке результатов Представление > Панель элементов.
В окне Панель элементов разверните узел Типовые элементы управления WPF, чтобы увидеть элемент управления TextBlock.
Добавьте элемент управления TextBlock в область конструктора, выбрав элемент управления TextBlock и перетащив его в окно. Отцентрируйте этот элемент в верхней части окна. Ориентируйтесь на рекомендации, чтобы отцентрировать элемент управления.

Окно должно выглядеть так, как показано на следующем рисунке.

Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
```
<Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
```

Настройка текста в текстовом блоке

В представлении XAML найдите разметку для TextBlock и измените атрибут Text с TextBox на Select a message option and then choose the Display button..

Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
```
<Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
</Grid>
```
При необходимости снова разместите элемент TextBlock по центру и сохраните изменения сочетанием клавиш CTRL+S или с помощью пункта меню Файл.

Следующий шаг — добавить в форму два элемента управления RadioButton.

Добавление переключателей

На панели элементов найдите элемент управления RadioButton.
Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент RadioButton и перетащив его в область конструктора. Переместите кнопки (выбрав их и используя клавиши со стрелками), чтобы кнопки отображались рядом под элементом управления TextBlock. Используйте красные направляющие для выравнивания элемента управления.

Окно должно выглядеть следующим образом:
В окне Свойства для левого элемента управления RadioButton измените свойство Имя (свойство в верхней части окна Свойства ), задав ему значение HelloButton.
В окне Свойства правого элемента управления RadioButton измените свойство Имя, задав ему значение GoodbyeButton, и затем сохраните изменения.

Теперь вы добавите отображаемый текст для каждого элемента управления RadioButton. Следующая процедура обновляет свойство Content элемента управления RadioButton.

На панели элементов найдите элемент управления RadioButton.
Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент RadioButton и перетащив его в область конструктора. Переместите кнопки (выбрав их и используя клавиши со стрелками), чтобы кнопки отображались рядом под элементом управления TextBlock. Для выравнивания элементов управления можно использовать инструкции.

Окно должно выглядеть следующим образом:
В окне Свойства для левого элемента управления RadioButton измените свойство Имя (свойство в верхней части окна Свойства ), задав ему значение HelloButton.
В окне Свойства правого элемента управления RadioButton измените свойство Имя, задав ему значение GoodbyeButton, и затем сохраните изменения.

Добавление отображаемого текста для каждого переключателя

Измените атрибут Content для кнопок HelloButton и GoodbyeButton на "Hello" и "Goodbye" в XAML. Разметка XAML теперь должна выглядеть следующим образом:

<Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

Задание переключателя, выбранного по умолчанию

На этом этапе мы настроим элемент HelloButton как выбранный по умолчанию, чтобы всегда был выбран один из переключателей.

В представлении XAML найдите разметку для элемента HelloButton.

Добавьте атрибут IsChecked и задайте для него значение True. В частности, добавьте IsChecked="True".

Разметка XAML теперь должна выглядеть следующим образом:

<Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

Последний элемент пользовательского интерфейса, который вам предстоит добавить, — это Button.

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

На панели элементов найдите элемент управления Button и добавьте его в область конструктора под элементами управления RadioButton, перетащив его на форму в представлении конструирования. Если вы используете Visual Studio 2019 или более позднюю версию, выровнять элемент управления по центру можно с помощью красной линии.

В представлении XAML измените значение свойства Содержимое элемента управления Button с Content="Button" на Content="Display" и сохраните изменения.

Окно должно выглядеть так, как показано на следующем рисунке.

Форма MainWindow с метками элементов управления

Разметка XAML теперь должна выглядеть следующим образом:

<Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

На панели элементов найдите элемент управления Button и добавьте его в область конструктора под элементами управления RadioButton, перетащив его на форму в представлении конструирования. Ориентируйтесь на инструкции, чтобы отцентрировать элемент управления.

Окно должно выглядеть так, как показано на следующем снимке экрана.

Снимок экрана: окно

Разметка XAML теперь должна выглядеть следующим образом:

<Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

Добавление кода к кнопке Display

После запуска приложения окно сообщения появится только тогда, когда пользователь выберет переключатель, а затем нажмет кнопку Display. Одно окно сообщения появится для Hello, и другое — для Goodbye. Для создания этих действий добавьте код в событие Button_Click в файле MainWindow.xaml.cs.

На поверхности разработки дважды щелкните кнопку Display .

Файл MainWindow.xaml.cs будет открыт с курсором на событии Button_Click.
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```

Введите следующий код:

if (HelloButton.IsChecked == true)
{
     MessageBox.Show("Hello.");
}
else if (GoodbyeButton.IsChecked == true)
{
    MessageBox.Show("Goodbye.");
}

Сохраните приложение.

На поверхности разработки дважды щелкните кнопку Display .

Файл MainWindow.xaml.cs будет открыт с курсором на событии Button_Click.
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```

Введите следующий код:

if (HelloButton.IsChecked == true)
{
     MessageBox.Show("Hello.");
}
else if (GoodbyeButton.IsChecked == true)
{
    MessageBox.Show("Goodbye.");
}

Сохраните приложение.

Отладка и тестирование приложения

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

Изменение имени MainWindow.xaml

Давайте присвоим файлу MainWindow более конкретное имя. В обозревателе решений щелкните правой кнопкой мыши файл MainWindow.xaml и выберите команду Переименовать. Измените имя файла на Greetings.xaml.

Поиск и исправление ошибок

В этом шаге вам предстоит найти ошибку, которую мы намеренно допустили ранее, изменив имя файла MainWindow.xaml.

Начало отладки и поиск ошибки

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

Появится окно Режим приостановки выполнения, а в окне Вывод будет указано, что произошло исключение IOException: "Не удается найти ресурс mainwindow.xaml".
Остановите отладчик, выбрав в меню Отладка>Остановить отладку.

Мы переименовали файл MainWindow.xaml в Greetings.xaml, но код приложения по-прежнему ссылается на MainWindow.xaml в качестве универсального кода ресурса (URI), поэтому проект не может быть запущен.

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

Появится окно Режим приостановки выполнения, а в окне Вывод будет указано, что произошло исключение IOException: "Не удается найти ресурс mainwindow.xaml".
Остановите отладчик, выбрав в меню Отладка>Остановить отладку.

Мы переименовали MainWindow.xaml в Greetings.xaml в начале этого руководства, но код приложения по-прежнему ссылается на MainWindow.xaml как универсальный код ресурса (URI), поэтому проект не может быть запущен.

Задание Greetings.xaml в качестве начального универсального кода ресурса (URI)

В обозревателе решений откройте файл App.xaml.
Измените StartupUri="MainWindow.xaml" на StartupUri="Greetings.xaml" и сохраните изменения.

Как дополнительный шаг это позволит избежать путаницы при изменении заголовка окна приложения в соответствии с новым именем.

В Обозревателе решений откройте файл Greetings.xaml, который вы только что переименовали.
Измените значение свойства Window.Title с Title="MainWindow" на Title="Greetings" и сохраните изменения.

Запустите отладчик снова (клавишей F5). Должно появиться окно приветствия приложения.

Снимок экрана: запуск приложения

Снимок экрана: окно приветствия с видимыми элементами управления TextBlock, RadioButton и Button. Выбран переключатель Hello

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

Отладка с точками останова

Добавив точки останова, можно тестировать код во время отладки. Точки останова можно добавлять, выбирая в меню Отладка>Точка останова, щелкая в левом поле редактора рядом со строкой кода, в которой требуется приостановить выполнение, или нажимая клавишу F9.

Добавление точек останова

Откройте файл Greetings.xaml.cs и выделите строку MessageBox.Show("Hello.").
Добавьте точку останова, выбрав меню Отладка, затем — Точка останова.

Рядом со строкой кода в крайнем левом поле окна редактора появится красный кружок.
Выделите следующую строку: MessageBox.Show("Goodbye.").
Нажмите клавишу F9, чтобы добавить точку останова, а затем нажмите клавишу F5, чтобы начать отладку.
В окне Greetings выберите переключатель Hello и нажмите кнопку Display .

Строка MessageBox.Show("Hello.") выделяется желтым цветом. В нижней части интегрированной среды разработки слева закреплены окна "Видимые", "Локальные" и "Контрольные значения", а справа — окна "Стек вызовов", "Точки останова", "Параметры исключений", "Команда", "Интерпретация" и "Вывод".
В строке меню выберите Отладка>Шаг с выходом.

Приложение возобновит выполнение, и появится окно сообщения со словом "Hello".
Нажмите кнопку ОК в окне сообщения, чтобы закрыть его.
В окне Greetings выберите переключатель Goodbye и нажмите кнопку Display .

Строка MessageBox.Show("Goodbye.") выделяется желтым цветом.
Нажмите клавишу F5, чтобы продолжить отладку. Когда появится окно сообщения, нажмите в нем кнопку ОК , чтобы закрыть его.
Закройте окно приложения, чтобы остановить отладку.
В строке меню выберите Отладка>Выключить все точки останова.

Откройте файл Greetings.xaml.cs и выделите строку MessageBox.Show("Hello.").
Добавьте точку останова, выбрав меню Отладка, затем — Точка останова.

Рядом со строкой кода в крайнем левом поле окна редактора появится красный кружок.
Выделите следующую строку: MessageBox.Show("Goodbye.").
Нажмите клавишу F9, чтобы добавить точку останова, а затем нажмите клавишу F5, чтобы начать отладку.
В окне Greetings выберите переключатель Hello и нажмите кнопку Display .

Строка MessageBox.Show("Hello.") выделяется желтым цветом. В нижней части интегрированной среды разработки слева закреплены окна "Видимые", "Локальные" и "Контрольные значения", а справа — окна "Стек вызовов", "Точки останова", "Параметры исключений", "Команда", "Интерпретация" и "Вывод".
В строке меню выберите Отладка>Шаг с выходом.

Приложение возобновит выполнение, и появится окно сообщения со словом "Hello".
Нажмите кнопку ОК в окне сообщения, чтобы закрыть его.
В окне Greetings выберите переключатель Goodbye и нажмите кнопку Display .

Строка MessageBox.Show("Goodbye.") выделяется желтым цветом.
Нажмите клавишу F5, чтобы продолжить отладку. Когда появится окно сообщения, нажмите в нем кнопку ОК , чтобы закрыть его.
Закройте окно приложения, чтобы остановить отладку.
В строке меню выберите Отладка>Выключить все точки останова.

Просмотр представления элементов пользовательского интерфейса

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

Снимок экрана: окно динамического визуального дерева

Снимок экрана: окно динамического визуального дерева с деревом визуальных элементов в HelloWPFApp.exe во время его выполнения.

Сборка окончательной версии приложения

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

Выберите в главном меню Сборка>Очистить решение для удаления промежуточных файлов и выходных файлов, которые были созданы в ходе предыдущих сборок. Этот шаг не является обязательным, но позволяет очистить результаты отладочной сборки.
Измените конфигурацию сборки для HelloWPFApp с Отладка на Выпуск с помощью раскрывающегося списка на панели инструментов (сейчас это "Отладка").
Выполните сборку решения, выбрав Сборка>Собрать решение.

Поздравляем с завершением этого учебника! Построенный файл .exe находится в каталоге решения и проекта ( ...\HelloWPFApp\HelloWPFApp\bin\Release).

Следующие шаги

Поздравляем с завершением этого учебника! Для получения дополнительных сведений перейдите к следующим руководствам.

Другие руководства по WPF

См. также раздел

Советы по повышению производительности

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

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

Что такое WPF?

Настройка интегрированной среды разработки (IDE)

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

Конструирование пользовательского интерфейса (ИП)

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

Настройка текста в текстовом блоке

Добавление переключателей

Добавление отображаемого текста для каждого переключателя

Задание переключателя, выбранного по умолчанию

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

Добавление кода к кнопке Display

Отладка и тестирование приложения

Изменение имени MainWindow.xaml

Поиск и исправление ошибок

Начало отладки и поиск ошибки

Задание Greetings.xaml в качестве начального универсального кода ресурса (URI)

Отладка с точками останова

Добавление точек останова

Просмотр представления элементов пользовательского интерфейса

Сборка окончательной версии приложения

Следующие шаги

См. также раздел

Дополнительные ресурсы

Дополнительные ресурсы