Первое приложение WPF

Содержание

Создание нового проекта WPF
Структура проекта WPF
Запуск приложения
Первое приложение WPF
Итого

В предыдущей части были рассмотрены основные преимущества и недостатки платформы WPF. Сегодня мы продолжим знакомство с этой платформой и создадим свое первое приложение WPF, а, заодно, познакомимся с новым для нас языком XAML. Для работы мы будем использовать Visual Studio 2022.

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

Для создания нового проекта WPF после запуска Visual Studio на стартовом экране выбираем пункт «Создание проекта»

На втором шаге выбираем тип проекта «Приложение WPF (Майкрософт)»

На третьем шаге необходимо задать название проекта и его расположение:

На четвертом шаге Visual Studio предложит выбрать платформу для разработки нашего приложения. Воспользуемся последней на данные момент — .NET 6.

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

Структура проекта WPF

Рассмотрим из каких частей состоит наш проект. Для этого посмотрим на окно «Обозреватель решений» (Solution Explorer):

Для проекта WPF в Visual Studio была создана следующая структура проекта:

Зависимости (Dependencies) — узел содержит сборки dll, добавленные в проект по умолчанию. Эти сборки содержат классы библиотеки .NET, которые мы будем использовать в C#. Сюда же мы можем добавлять другие зависимости (ссылки на другие проекты, на модели COM и т.д.), которые могут нам потребоваться при работе над проектом.
App.xaml — в этом файле объявляются все ресурсы приложения, а также другие конфигурационные настройки в виде кода XAML. Так, например, в файле App.xaml задается файл окна программы, которое будет открываться при запуске приложения (см. атрибут StartupUri узла Application). В нашем приложении при запуске будет открываться окно из MainWindow.xaml.
- App.xaml.cs — это файл кода на C#, связанный с файл App.xaml, который также позволяет задать ряд общих ресурсов и общую логику для приложения, но уже в виде кода C#. Здесь определен частичный (разделяемый) класс App.
AssemblyInfo.cs — файл, который может содержать информацию о создаваемой в процессе компиляции сборке (имя, описание, версия и т. д.).
MainWindow.xaml — файл, содержащий описание визуального интерфейса окна приложения в виде кода XAML.
- MainWindow.xaml.cs — это файл, содержащий логику приложения на C# и связанный с окном MainWindow.xaml.

По умолчанию эти файлы MainWindow.xaml и MainWindow.xaml.cs открыты в текстовом редакторе Visual Studio. При этом, файл MainWindow.xaml имеет два представления: визуальное — отображает весь графический интерфейс окна приложения, и под ним декларативное объявление интерфейса в XAML. Если мы попробуем изменить разметку XAML, например, определим там кнопку, текст и так далее, то эти изменения немедленно отразятся в визуальном представлении.

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

Чтобы запустить приложение в Visual Studio, необходимо нажать клавишу F5 или кнопку с зеленой стрелочкой на панели управления сверху. После запуска приложения оно будет скомпилировано в exe-файл. Найти собранный exe-файл можно в папке

[Путь_к_проекту]\bin\Debug\[версия_NET]-windows\

где Путь_к_проекту — это путь, который вы указали при создании нового проекта; версия_NET — версия платформы, которую вы выбирали на четвертом шаге при создании нового проекта.

Так, например, exe-файл приложения, рассматриваемого в этой статье, будет находиться в папке c:\Projects\HelloWpf\bin\Debug\net6.0-windows\.

После сборки проекта откроется пустое окно приложения:

Так как мы запускаем наш проект с отладкой (через клавишу F5), то в верхней части окна появляется специальная панель, с помощью которой можно проводить отладку кода XAML, узнавать об ошибках привязки элементов и так далее. Эта панель не будет видна, если вы просто запустите exe-файл из папки или нажмете для запуска приложения Ctrl+F5 (запуск без отладки) в Visual Studio.

Первое приложение WPF

Как уже стало традицией, напишем наше приложение в стиле Hello world. Пусть у нас в приложении будет одна кнопка, клик по которой выведет на экран сообщение «Hello WPF». Для этого нам необходимо выполнить следующие действия:

Добавить на главное окно приложения кнопку и задать ей необходимые свойства;
Написать обработчик события Click для кнопки.

«Рисуем» кнопку, используя код XAML

Перейдем к файлу MainWindow.xaml, который, как мы уже знаем, содержит разметку визуального интерфейса в виде кода XAML. По умолчанию он имеет следующее содержимое:

<Window x:Class="HelloWpf.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:HelloWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

Здесь мы видим элемент верхнего уровня — Window (окно) у которого определен ряд атрибутов (о них мы поговорим позднее) и контейнер верхнего уровня — Grid. В контейнере могут располагаться другие элементы интерфейса (кнопки, метки и т.д.). Добавим в контейнер Grid кнопку, изменив содержимое файла следующим образом:

<Window x:Class="HelloWpf.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:HelloWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Нажми меня" Width="200" Height="60"/>
    </Grid>
</Window>

Здесь мы определили элемент Button (кнопка) со следующими атрибутами (свойствами):

Content — текст, который будет отображаться на кнопке
Width — ширина кнопки
Height — высота кнопки

«Рисуем» кнопку, используя готовые элементы

В проекте WPF мы также, как и в Windows Forms, можем воспользоваться готовыми элементами управления, которые располагаются на специальной панели элементов:

На этой панели расположено достаточно много готовых элементов управления, которыми мы можем воспользоваться. Раскройте панель, выберите элемент Button и просто мышкой перетащите кнопку на форму. Должно получиться следующим образом:

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

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

<Window x:Class="FirstWpfApp.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:FirstWpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="160,139,0,0" VerticalAlignment="Top" Width="200" Height="30"/>

    </Grid>
</Window>

Здесь наша кнопка содержит ряд свойств, которые были установлены в визуальном конструкторе, в том числе такое важной свойство, как x:Name по значению которого мы можем обращаться к объекту кнопки из кода C#.

Теперь напишем обработчик события для кнопки.

Обработчик события Click

Перейдем в файл MainWindow.xaml.cs. Здесь у нас определен класс главного окна приложения:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

MainWindow наследуется от класса Window и берет от него всю базовую функциональность окон. В конструкторе класса вызывается метод InitializeComponent(), позволяющий применить интерфейс, который мы определили в файле MainWindow.xaml. Изменим класс MainWindow , создав в нем следующий метод:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello WPF");
}

Этот метод ни что иное как обработчик события Click кнопки. Чтобы этот обработчик сработал при нажатии на кнопку, нам необходимо каким-либо образом связать этот обработчик с событием Click. Сделать это можно непосредственно в коде XAML следующим образом:

<Button Content="Нажми меня" Width="200" Height="60" Click="Button_Click"/>

Также, мы можем добавить обработчик Click для кнопки, дважды кликнув по кнопке в визуальном редакторе — будет создан новый обработчик, а код XAML кнопки изменится следующим образом:

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="160,139,0,0" VerticalAlignment="Top" Width="200" Height="30" Click="button_Click"/>

Теперь можно запустить приложение и посмотреть на результат:

Итого

Сегодня мы создали свой первый проект WPF в Visual Studio, рассмотрели состав этого проекта, а также очень кратко познакомились с работой над визуальным интерфейсом с использованием языка XAML и визуального конструктора. Разметка интерфейса в XAML напоминает обычную HTML разметку — есть элементы верхнего уровня, атрибуты (свойства) элементов и т.д. Что касается визуального редактора форм в WPF, то он, конечно, имеет свои преимущества, как минимум, в скорости создания визуального интерфейса, однако, как вы убедитесь далее, использовать его всегда и везде не так уж и необходимо. В дальнейшем мы продолжим разбираться с XAML для построения интерфейсов приложений.