Учебник. Создание простого приложения на C#
При изучении этого руководства вы ознакомитесь со многими инструментами, диалоговыми окнами и конструкторами, которые можно использовать для разработки приложений в Visual Studio. Вам предстоит создать простое приложение «Hello, World», разработать пользовательский интерфейс, добавить код и выполнить отладку, одновременно приобретая навыки работы в интегрированной среде разработки (IDE).
Предварительные требования
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка интегрированной среды разработки (IDE)
При первом открытии Visual Studio вам будет предложено выполнить вход. Для целей этого руководства это необязательно. Затем может появиться диалоговое окно, в котором предлагается выбрать параметры разработки и цветовую тему. Оставьте значения по умолчанию и нажмите Запуск Visual Studio.
При запуске Visual Studio сначала открывается начальное окно. Выберите Продолжить без кода, чтобы открыть среду разработки. Вы увидите окна инструментов, меню и панели инструментов, а также основную область окна. Окна инструментов закреплены в левой и правой частях окна приложения. Поле поиска, строка меню и стандартная панель инструментов закреплены в верхней части. При загрузке решения или проекта редакторы и конструкторы отображаются в центральной области окна приложения. При разработке приложения чаще всего используется именно эта область.
Создание проекта
При создании приложения в Visual Studio необходимо сначала создать проект и решение. Этот пример демонстрирует создание проекта Windows Presentation Foundation (WPF).
Создайте новый проект. В строке меню выберите Файл > Новый > Проект.
В диалоговом окне Новый проект выберите категорию Установленные > Visual C# > Рабочий стол Windows, а затем выберите шаблон Приложения WPF (.NET Framework). Присвойте проекту имя HelloWPFApp и щелкните ОК.
Запустите Visual Studio.
На начальном экране выберите Создать проект.
На экране Создание проекта выполните поиск по запросу «WPF», выберите в результатах Приложение WPF и нажмите кнопку Далее.
На следующем экране присвойте проекту имя HelloWPFApp и щелкните Далее.
В окне Дополнительные сведения для целевой платформы должна быть указана версия .NET Core 3.1. Если это не так, выберите .NET Core 3.1. Затем нажмите Создать.
Visual Studio создает решение и проект HelloWPFApp, а в обозревателе решений выводятся различные файлы. Конструктор WPF отображает представление кода и представление XAML MainWindow.xaml в представлении с разделением. Сдвигая разделитель, можно делать любое из представлений больше или меньше. Можно выбрать для просмотра только визуальное представление или только представление XAML.
Дополнительные сведения о XAML (eXtensible Application Markup Language) см. в обзоре XAML для WPF.
После создания проекта его можно настраивать. Для этого выберите Окно свойств в меню Представление или нажмите клавишу F4. Затем можно отображать и изменять параметры элементов проекта, элементов управления и других элементов в приложении.
Запустите Visual Studio.
На начальном экране выберите Создать проект.
На экране Создание проекта выполните поиск по запросу «WPF», выберите в результатах Приложение WPF и нажмите кнопку Далее.
На следующем экране присвойте проекту имя HelloWPFApp и щелкните Далее.
В окне Дополнительные сведения для целевой платформы должна быть указана версия .NET 6.0. Если это не так, выберите .NET 6.0. Затем нажмите Создать.
Visual Studio создает решение и проект HelloWPFApp, а в обозревателе решений выводятся различные файлы. Конструктор WPF отображает представление кода и представление XAML MainWindow.xaml в представлении с разделением. Сдвигая разделитель, можно делать любое из представлений больше или меньше. Можно выбрать для просмотра только визуальное представление или только представление XAML.
Дополнительные сведения о XAML (eXtensible Application Markup Language) см. в обзоре XAML для WPF.
После создания проекта его можно настраивать. Для этого выберите Окно свойств в меню Представление или нажмите клавишу F4. Затем можно отображать и изменять параметры элементов проекта, элементов управления и других элементов в приложении.
Изменение имени MainWindow.xaml
Давайте присвоим файлу MainWindow более конкретное имя. В обозревателе решений щелкните правой кнопкой мыши файл MainWindow.xaml и выберите команду Переименовать. Измените имя файла на Greetings.xaml.
Конструирование пользовательского интерфейса (ИП)
Если конструктор не открыт, выберите файл Greetings.xaml и нажмите клавиши SHIFT+F7, чтобы открыть его.
В приложение будут добавлены элементы управления трех типов: элемент управления TextBlock, два элемента управления RadioButton и элемент управления Button.
Добавление элемента управления TextBlock
Нажмите клавиши CTRL+Q для активации поля поиска и введите Панель элементов. Выберите в списке результатов Представление > Панель элементов.
В окне Панель элементов разверните узел Типовые элементы управления WPF, чтобы увидеть элемент управления TextBlock.
Добавьте элемент управления TextBlock в область конструктора, выбрав элемент управления TextBlock и перетащив его в окно. Отцентрируйте этот элемент в верхней части окна. В Visual Studio 2019 и более поздних версиях для выравнивания элемента управления по центру можно использовать красные направляющие.
Окно должно выглядеть так, как показано на следующем рисунке:
Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
Нажмите клавиши CTRL+Q для активации поля поиска и введите Панель элементов. Выберите в списке результатов Представление > Панель элементов.
В окне Панель элементов разверните узел Типовые элементы управления WPF, чтобы увидеть элемент управления TextBlock.
Добавьте элемент управления TextBlock в область конструктора, выбрав элемент управления TextBlock и перетащив его в окно. Отцентрируйте этот элемент в верхней части окна. Ориентируйтесь на рекомендации, чтобы отцентрировать элемент управления.
Окно должно выглядеть так, как показано на следующем рисунке.
Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
Настройка текста в текстовом блоке
Разметка XAML должна выглядеть приблизительно так, как в следующем примере:
При необходимости снова разместите элемент TextBlock по центру и сохраните изменения сочетанием клавиш CTRL+S или с помощью пункта меню Файл.
Следующий шаг — добавить в форму два элемента управления RadioButton.
Добавление переключателей
На панели элементов найдите элемент управления RadioButton.
Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент RadioButton и перетащив его в область конструктора. Переместите кнопки (выбрав их и используя клавиши со стрелками), чтобы кнопки отображались рядом под элементом управления TextBlock. Используйте красные направляющие для выравнивания элемента управления.
Окно должно выглядеть следующим образом:
Теперь вы добавите отображаемый текст для каждого элемента управления RadioButton. Следующая процедура обновляет свойство Content элемента управления RadioButton.
На панели элементов найдите элемент управления RadioButton.
Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент RadioButton и перетащив его в область конструктора. Переместите кнопки (выбрав их и используя клавиши со стрелками), чтобы кнопки отображались рядом под элементом управления TextBlock. Для выравнивания элементов управления можно использовать инструкции.
Окно должно выглядеть следующим образом:
Теперь вы добавите отображаемый текст для каждого элемента управления RadioButton. Следующая процедура обновляет свойство Content элемента управления RadioButton.
Добавление отображаемого текста для каждого переключателя
Измените атрибут Content для кнопок HelloButton и GoodbyeButton на «Hello» и «Goodbye» в XAML. Разметка XAML теперь должна выглядеть следующим образом:
Задание переключателя, выбранного по умолчанию
На этом этапе мы настроим элемент HelloButton как выбранный по умолчанию, чтобы всегда был выбран один из переключателей.
В представлении XAML найдите разметку для элемента HelloButton.
Разметка XAML теперь должна выглядеть следующим образом:
Последний элемент пользовательского интерфейса, который вам предстоит добавить, — это Button.
Добавление элемента управления Button
На панели элементов найдите элемент управления Button и добавьте его в область конструктора под элементами управления RadioButton, перетащив его на форму в представлении конструирования. Если вы используете Visual Studio 2019 или более позднюю версию, выровнять элемент управления по центру можно с помощью красной линии.
В представлении XAML измените значение свойства Содержимое элемента управления Button с Content=»Button» на Content=»Display» и сохраните изменения.
Окно должно выглядеть так, как показано на следующем рисунке.
Разметка XAML теперь должна выглядеть следующим образом:
На панели элементов найдите элемент управления Button и добавьте его в область конструктора под элементами управления RadioButton, перетащив его на форму в представлении конструирования. Ориентируйтесь на инструкции, чтобы отцентрировать элемент управления.
В представлении XAML измените значение свойства Содержимое элемента управления Button с Content=»Button» на Content=»Display» и сохраните изменения.
Окно должно выглядеть так, как показано на следующем снимке экрана.
Разметка XAML теперь должна выглядеть следующим образом:
Добавление кода к кнопке Display
После запуска приложения окно сообщения появится только тогда, когда пользователь выберет переключатель, а затем нажмет кнопку Display. Одно окно сообщения появится для Hello, и другое — для Goodbye. Чтобы задать такое поведение, добавьте код в событие Button_Click в файле Greetings.xaml.cs.
Введите следующий код:
После запуска приложения окно сообщения появится только тогда, когда пользователь выберет переключатель, а затем нажмет кнопку Display. Одно окно сообщения появится для Hello, и другое — для Goodbye. Чтобы задать такое поведение, добавьте код в событие Button_Click в файле Greetings.xaml.cs.
Введите следующий код:
Отладка и тестирование приложения
После этого вам предстоит отладить приложение для выявления ошибок и тестирования того, что оба окна сообщений отображаются правильно. Приведенные ниже инструкции описывают, как выполнить сборку и запустить отладчик (дополнительные сведения см. в разделах Построение приложения WPF и Отладка WPF).
Поиск и исправление ошибок
В этом шаге вам предстоит найти ошибку, которую мы намеренно допустили ранее, изменив имя файла 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). Должно появиться окно приветствия приложения.
Теперь закройте окно приложения, чтобы остановить отладку.
Отладка с точками останова
Добавив точки останова, можно тестировать код во время отладки. Точки останова можно добавлять, выбирая в меню Отладка > Точка останова, щелкая в левом поле редактора рядом со строкой кода, в которой требуется приостановить выполнение, или нажимая клавишу F9.
Добавление точек останова
Добавьте точку останова, выбрав меню Отладка, затем — Точка останова.
Рядом со строкой кода в крайнем левом поле окна редактора появится красный кружок.
Нажмите клавишу F9, чтобы добавить точку останова, а затем нажмите клавишу F5, чтобы начать отладку.
Строка MessageBox.Show(«Hello.») выделяется желтым цветом. В нижней части интегрированной среды разработки слева закреплены окна «Видимые», «Локальные» и «Контрольные значения», а справа — окна «Стек вызовов», «Точки останова», «Параметры исключений», «Команда», «Интерпретация» и «Вывод».
В строке меню выберите Отладка > Шаг с выходом.
Приложение возобновит выполнение, и появится окно сообщения со словом «Hello».
Нажмите кнопку ОК в окне сообщения, чтобы закрыть его.
Строка MessageBox.Show(«Goodbye.») выделяется желтым цветом.
Закройте окно приложения, чтобы остановить отладку.
В строке меню выберите Отладка > Выключить все точки останова.
Добавьте точку останова, выбрав меню Отладка, затем — Точка останова.
Рядом со строкой кода в крайнем левом поле окна редактора появится красный кружок.
Нажмите клавишу F9, чтобы добавить точку останова, а затем нажмите клавишу F5, чтобы начать отладку.
Строка MessageBox.Show(«Hello.») выделяется желтым цветом. В нижней части интегрированной среды разработки слева закреплены окна «Видимые», «Локальные» и «Контрольные значения», а справа — окна «Стек вызовов», «Точки останова», «Параметры исключений», «Команда», «Интерпретация» и «Вывод».
В строке меню выберите Отладка > Шаг с выходом.
Приложение возобновит выполнение, и появится окно сообщения со словом «Hello».
Нажмите кнопку ОК в окне сообщения, чтобы закрыть его.
Строка MessageBox.Show(«Goodbye.») выделяется желтым цветом.
Закройте окно приложения, чтобы остановить отладку.
В строке меню выберите Отладка > Выключить все точки останова.
Просмотр представления элементов пользовательского интерфейса
В работающем приложении в верхней части окна должно отображаться мини-приложение. Мини-приложение — это вспомогательное средство времени выполнения, обеспечивающее быстрый доступ к некоторым полезным возможностям отладки. Нажмите первую кнопку, Перейти к динамическому визуальному дереву. Должно отобразиться окно с деревом, содержащим все визуальные элементы страницы. Разверните узлы, чтобы найти добавленные кнопки.
Сборка окончательной версии приложения
Теперь, когда вы проверили, что все работает, можно подготовить окончательную сборку приложения.
Выберите в главном меню Сборка > Очистить решение для удаления промежуточных файлов и выходных файлов, которые были созданы в ходе предыдущих сборок. Этот шаг не является обязательным, но позволяет очистить результаты отладочной сборки.
Измените конфигурацию сборки для HelloWPFApp с Отладка на Выпуск с помощью раскрывающегося списка на панели инструментов (сейчас это «Отладка»).
Выполните сборку решения, выбрав Сборка > Собрать решение.
Поздравляем с завершением этого учебника! Построенный файл .exe находится в каталоге решения и проекта ( . \HelloWPFApp\HelloWPFApp\bin\Release).
Следующие шаги
Поздравляем с завершением этого учебника! Для получения дополнительных сведений перейдите к следующим руководствам.
In this short tutorial, you’ll learn how to create a new Windows Presentation Foundation (WPF) app with Visual Studio. Once the initial app has been generated, you’ll learn how to add controls and how to handle events. By the end of this tutorial, you’ll have a simple app that adds names to a list box.
In this tutorial, you learn how to:
Here’s a preview of the app you’ll build while following this tutorial:
Prerequisites
Create a WPF app
The first step to creating a new app is opening Visual Studio and generating the app from a template.
Open Visual Studio.
Select Create a new project.
In the code language dropdown, choose C# or Visual Basic.
In the templates list, select WPF Application and then select Next.
Don’t select the WPF Application (.NET Framework) template.
In the Configure your new project window, do the following:
In the Additional information window, select .NET 5.0 (Current) for Target Framework. Select the Create button.
Once the app is generated, Visual Studio should open the XAML designer pane for the default window, MainWindow. If the designer isn’t visible, double-click on the MainWindow.xaml file in the Solution Explorer pane to open the designer.
Important parts of Visual Studio
Support for WPF in Visual Studio has five important components that you’ll interact with as you create an app:
All of your project files, code, windows, resources, will appear in this pane.
This pane shows property settings you can configure based on the item selected. For example, if you select an item from Solution Explorer, you’ll see property settings related to the file. If you select an object in the Designer, you’ll see settings for that item.
The toolbox contains all of the controls you can add to a form. To add a control to the current form, double-click a control or drag-and-drop the control.
This is the designer for a XAML document. It’s interactive and you can drag-and-drop objects from the Toolbox. By selecting and moving items in the designer, you can visually compose the user interface (UI) for your app.
When both the designer and editor are visible, changes to one is reflected in the other. When you select items in the designer, the Properties pane displays the properties and attributes about that object.
This is the XAML code editor for a XAML document. The XAML code editor is a way to craft your UI by hand without a designer. The designer may infer the values of properties on a control when the control is added in the designer. The XAML code editor gives you a lot more control.
When both the designer and editor are visible, changes to one is reflected in the other. As you navigate the text caret in the code editor, the Properties pane displays the properties and attributes about that object.
Examine the XAML
After your project is created, the XAML code editor is visible with a minimal amount of XAML code to display the window. If the editor isn’t open, double-click the MainWindow.xaml item in the Solution Explorer. You should see XAML similar to the following:
The document root represents the type of object being described by the XAML file. There are eight attributes declared, and they generally belong to three categories:
An XML namespace provides structure to the XML, determining what is or isn’t allowed to be declared in the file.
The main xmlns attribute imports the XML namespace for the entire file, and in this case, maps to the types declared by WPF. The other XML namespaces declare a prefix and import other types and objects for the XAML file. For example, the xmlns:local namespace declares the local prefix and maps to the objects declared by your project, the ones declared in the Names code namespace.
This attribute maps the to the type defined by your code: the MainWindow.xaml.cs or MainWindow.xaml.vb file, which is the Names.MainWindow class.
Any normal attribute declared on the XAML object sets a property of that object. In this case the Title attribute sets the Window.Title property.
Change the window
First, let’s run the project and see the default output. You’ll see that a window that pops up, without any controls, and a title of MainWindow:
For our example app, this window is too large, and the title bar isn’t descriptive. Change the title and size of the window by changing the appropriate attributes in the XAML to the following values:
Prepare the layout
WPF provides a powerful layout system with many different layout controls. Layout controls help place and size child controls, and can even do so automatically. The default layout control provided to you in this XAML is the control.
The control defines rows and columns in which your controls will be. A grid always has a single row and column declared, meaning, the grid by default is a single cell. That doesn’t really give you much flexibility in placing controls.
Next, define two rows and two columns, dividing the grid into four cells:
Select the grid in either the XAML code editor or XAML designer, you’ll see that the XAML designer shows each row and column:
Add the first control
Now that the grid has been created, we can start adding controls to it. First, start with the label control. Create a new element inside the element, after the row and column definitions, and give it a string value of Names :
Notice that the designer now shows the label occupying a small amount of the available height. There’s now more room for the next row to occupy. Most controls define some sort of height and width value that they should occupy that looks best for them. In the case of the label control, it has a height value that ensures that you can read it.
Control placement
Let’s talk about control placement. The label created in the section above was automatically placed in row 0 and column 0 of the grid. The numbering for rows and columns starts at 0 and increments by 1 for each new row or column. The control doesn’t know anything about the grid, and the control doesn’t define any properties to control its placement within the grid. The control could have even been placed within some other layout control which has its own set of rules defining how to place controls.
How do you tell a control to use a different row or column when the control has no knowledge of the grid? Attached properties! The grid takes advantage of the powerful property system provided by WPF. The grid defines new properties that the child controls can declare and use. The properties don’t actually exist on the control itself, they’re attached by the grid when the control is added to the grid.
Notice how your label now moved to the second column. You can use the Grid.Row and Grid.Column attached properties to place the next controls we’ll create. For now though, restore the label to row 0.
Create the name list box
Add the remaining controls
The last two controls we’ll add are a text box and a button, which the user will use to enter a name to add to the list box. However, instead of trying to create more rows and columns for the grid, we’ll put these controls into the layout control.
The stack panel differs from the grid in how the controls are placed. While you tell the grid where you want the controls to be with the Grid.Row and Grid.Column attached properties, the stack panel works automatically by placing the first control, then placing the next control after it, continuing until all controls have been placed. It «stacks» each control below the other.
The layout for the window is complete. However, our app doesn’t have any logic in it to actually be functional. Next, we need to hook up the control events to code and get the app to actually do something.
Add code for the Click event
The we created has a Click event that is raised when the user presses the button. You can subscribe to this event and add code to add a name to the list box. Just like you set a property on a control by adding a XAML attribute, you can use a XAML attribute to subscribe to an event. Set the Click attribute to ButtonAddName_Click
Now you need to generate the handler code. Right-click on ButtonAddName_Click and select Go To Definition. This will generate a method in the code behind for you that matches the handler name you’ve entered.
Next, add the following code to do these three steps:
Run the app
Now that the event has been coded, you can run the app by pressing the F5 key or by selecting Debug > Start Debugging from the menu. The window is displayed and you can enter a name in the textbox and then add it by clicking the button.