Первое приложение WPF в Visual Studio Code

Содержание

Visual Studio Code — что это?
Установка и настройка Visual Studio Code
- Русификация интерфейса VS Code
- Отключение ограниченного режима
Создание нового проекта WPF в VS Code
Запуск и отладка приложения WPF в Visual Studio Code
Итого

В этой части мы посмотрим как создать приложение WPF с использованием Visual Studio Code. Этот инструмент также, как и Visual Studio широко используется для разработки и представляет из себя, по большому счёту, обычный текстовый редактор с подсветкой синтаксиса и широкими возможностями настройки. И здесь у нас уже не будет возможности использовать визуальный конструктор интерфейса

Visual Studio Code — что это?

Прежде всего стоит немного рассказать про то, что из себя представляет Visual Studio Code и чем этот инструмент отличается от Visual Studio.

Visual Studio Code (VS Code) — это полностью бесплатный редактор кода с открытым исходным кодом. То есть, основная задача этого инструмента — позволить вам удобно писать код своего приложения. Для того, чтобы настроить VS Code, используются различные расширения, которые устанавливаются в редактор. Например, мы можем установить расширения для подсветки синтаксиса C#, JavaScript, С++, отладки приложений и так далее. Соответственно, для сборки, запуска и отладки приложения, VS Code использует инструменты конкретного языка программирования, которые устанавливаются отдельно. Например, чтобы мы могли создавать и проводить отладку приложений C#/.NET мы должны отдельно устанавливать на свой компьютер .NET SDK (если у вас еще не установлена Visual Studio). Неоспоримым преимуществом VS Code является его легкость и бесплатность.

В свою очередь, Visual Studio — это уже полноценная интегрированная среда разработки (IDE), которая содержит множество инструментов разработчика и редактор кода в этой IDE занимает лишь небольшое место среди этих инструментов. Здесь мы уже получаем в свое распоряжение мощные инструменты для отладки приложения, анализа кода, тестирования и рефакторинга и так далее. Естественно, что Visual Studio бесплатен только в достаточно «облегченной» версии Community, а в других редакциях стоит довольно не дешево.

Установка и настройка Visual Studio Code

Чтобы скачать установочный файл VS Code, достаточно зайти на сайт https://code.visualstudio.com/ и нажать кнопку «Download for Windows»:

Сама установка элементарная, поэтому даже не будем на ней останавливаться, а сразу перейдем к настройке VS Code для работы с .NET/C#. При первом запуске вы увидите следующее окно VS Code:

Русификация интерфейса VS Code

Если вы хотите русифицировать интерфейс VS Code, то это можно сделать, используя официальное расширение от Microsoft. Для этого раскройте список расширений и в строке поиска напишите «Rus»В списке расширений необходимо установить самое первое расширение — Russian Language Pack for Visual Studio Code. Выберите его в списке и нажмите кнопку Install. После этого, в правом нижнем углу появится сообщение о том, что необходимо перезагрузить редактор:

После перезагрузки интерфейс приложения будет русифицирован.

Отключение ограниченного режима

При первом запуске VS Code находится в безопасном режиме, поэтому часть функций, необходимых нам для работы недоступна. Чтобы отключить безопасный режим, необходимо нажать вверху ссылку «Управление»:и в открывшемся окне нажать кнопку «Доверять»

Теперь все функции VS Code разблокированы и можно создать свой первый проект WPF в Visual Studio Code.

Внимание: если у вас на компьютере не установлена Visual Studio, то перед созданием нового проекта вам необходимо установить .NET SDK. Скачать .NET SDK можно по ссылке: https://dotnet.microsoft.com/en-us/download

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

Чтобы создать новый проект WPF, перейдите на вкладку «Проводник» и добавьте новую папку:

Например, я добавил новую папку C:/Wpf. Появится окно в котором необходимо подтвердить ваше доверие к файлам в новой папке:

После подтверждения новая папка появится в проводнике VS Code. Теперь выберите в главное меню пункт: «Терминал — Создать терминал»

Внизу вкладки откроется новое окно терминала Power Shell. В терминале необходимо набрать команду dotnet new wpf:

dotnet new — команда для создания нового проекта .NET, а wpf — тип проекта. В проводнике появятся все те же файлы проекта, что и при его создании в Visual Studio, а также рекомендация — установить необходимые расширения для работы с .NET/C#:

Установим рекомендуемое расширение и продолжим работу.

Запуск и отладка приложения WPF в Visual Studio Code

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

<Window x:Class="wpf.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:wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Width="200" Height="50" Content="Click Me"></Button>
    </Grid>
</Window>

Теперь, чтобы запустить приложение, необходимо выполнить в терминале команду dotnet run:

Теперь можете добавим в файл MainWindow.cs обработчик события Click кнопки:

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace wpf;

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public void Button_Click(object sender, EventArgs args)
    {
        MessageBox.Show("Hello WPF");
    }
}

Используем этот обработчик для нашей кнопки, именив её код XAML следующим образом:

<Button Width="200" Height="50" Content="Click Me" Click="Button_Click"></Button>

Теперь запустим наш проект в режиме отладки. Чтобы запустить проект в режиме отладки, поставим точку останова напротив строки:

MessageBox.Show("Hello WPF");

для этого подведите курсор мыши к левому краю окна редактора и кликните левой кнопкой — должно получиться вот так:Теперь выполнение программы остановится, как только мы дойдем до этой строки. Чтобы запустить проект в режиме отладки, перейдите на вкладку «Запуск и отладка» и нажмите кнопку:

Запустится наше приложение и, как только вы нажмете на кнопку — сработает точка останова и в VS Code вы увидите:

Чтобы продолжить выполнение программы — нажмите F5.

Итого

Visual Studio Code — это бесплатный редактор кода, который мы можем использовать в том числе и для разработки приложений на .NET/C#. Для VS Code существует множество расширений, позволяющих настраивать этот редактор под себя. При этом, используя VS Code для разработки приложений C# мы немного теряем в удобстве, по сравнению с Visual Studio. Например, мы должны создавать новые проекты, используя терминал, отсутствуют удобные инструменты отладки приложений и так далее. Часть из этих неудобств мы можем убрать с помощью, опять же, большого количества расширений. Использовать или нет VS Code в своей работе — личное дело каждого. В дальнейшем, при рассмотрении WPF, мы будем использовать Visual Studio 2022, однако, вы можете пользоваться и VS Code — принципиальной разницы в изучении в WPF в этом случае не будет.