Не Windows единой: как писать кроссплатформенные приложения с GUI на C#

На C# можно создавать красивые приложения, но до недавних пор — не для всех платформ. Рассказываем, как писать одно приложение для всех ОС сразу.

Microsoft выпустила уже третью версию кроссплатформенного .NET Core с открытым исходным кодом, но мы до сих пор не получили инструмента для создания графических интерфейсов.

Пока есть Xamarin, который можно использовать только для Windows 10 и мобильных устройств. Но что делать тем, кто хочет создавать графические интерфейсы для Linux или Mac OS?

Тут помогут фреймворки от сторонних разработчиков.

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Какой фреймворк выбрать

Мне удалось найти 2 более-менее популярных фреймворка (оба основаны на Skia ):

1. SpaceVIL. Он привлёк меня тем, что в нём элементы GUI отрисовываются, а не берутся из API операционной системы. Поэтому приложение будет выглядеть одинаково на всех устройствах. В нём даже можно создавать собственные элементы любого вида. Однако он пока достаточно сырой — об этом говорит уже то, что в официальной документации есть ошибки в инструкции для новичков.
2. AvaloniaUI. Это более популярный и проработанный фреймворк, который позволяет создавать интерфейсы как для мобильных устройств, так и для Linux и OS X. Также в нём используется диалект XAML, что будет плюсом для тех, кто пробовал создавать приложения для Windows. В нём даже есть поддержка MVVM.

Я попробовал оба, и второй показался мне более удобным: в нём есть язык разметки, поддержка MVVM, быстрая установка, лёгкий переход с WPF. Поэтому я выбрал его.

Как начать использовать AvaloniaUI

Я буду создавать приложение в Linux Ubuntu, но эта инструкция подойдёт всем, кто использует .NET Core. Создавать приложения можно и в Visual Studio, скачав для него расширение, но так как его нет на Linux, я буду пользоваться терминалом.

Для начала клонируйте себе на компьютер этот репозиторий:

В нём находятся шаблоны для создания приложения с AvaloniaUI. Если вы не умеете пользоваться git, то просто скачайте содержимое и распакуйте куда-нибудь на компьютере. Затем откройте консоль и введите следующую команду:

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

Вы увидите список всех установленных шаблонов. Среди них должны быть Avalonia Window, Avalonia .NET Core MVVM App, Avalonia UserControl и Avalonia .NET Core App. Если они на месте, можно продолжать.

Откройте в консоли папку, в которой хотите создать проект, и введите:

Будет создано приложение с использованием MVVM. Практически вся документация по AvaloniaUI написана с использованием этого паттерна, поэтому проще будет разрабатывать на нём.

Теперь можно приступать к работе над приложением.

Создаём калькулятор на AvaloniaUI

У вас будут созданы следующие папки

• Assets — сюда можно загружать различные компоненты программы вроде иконок, изображений, звуков и прочего.
• Models — эта папка предназначена для классов, которые будут выступать в роли модели.
• ViewModels — здесь находятся классы-посредники между видом и моделью.
• Views — все окна будут находиться здесь.

Сначала посмотрим в файл Program.cs в корневом каталоге:

Нас интересует метод AppMain(). В нём создаётся окно (MainWindow) с указанием DataContext (используется для привязки данных), а потом это окно запускается.

В этом методе можно определить свою логику инициализации приложения. Например, объявить экземпляр модели и передать его в конструктор MainWindowViewModel(). Однако перед этим нужно определить конструктор, который будет принимать такой аргумент.

У нас очень простое приложение, поэтому мы реализуем всю логику прямо в MainWindowViewModel.cs. Там будут необходимые свойства и методы.

Для начала нужно подключить пространство имён ReactiveUI, которое в AvaloniaUI используется для реализации паттерна MVVM:

Создание классических приложений для компьютеров с Windows Build desktop apps for Windows PCs

Эта статья содержит сведения, необходимые, чтобы приступить к созданию классических приложений для Windows или обновления существующих классических приложений для использования новейших возможностей Windows 10 This article provides the info you need to get started building desktop apps for Windows or updating existing desktop apps to adopt the latest experiences in Windows 10.

Платформы для классических приложений Platforms for desktop apps

Существуют четыре основные платформы для создания классических приложений для компьютеров с Windows. There are four main platforms for building desktop apps for Windows PCs. Каждая платформа предоставляет модель приложения, определяющую жизненный цикл приложения, полную инфраструктуру пользовательского интерфейса и набор элементов управления пользовательского интерфейса, которые позволяют создавать классические приложения, такие как Word, Excel и Photoshop, и получать доступ к исчерпывающему набору управляемых или собственных API-интерфейсов для использования функций Windows. Each platform provides an app model that defines the lifecycle of the app, a complete UI framework and set of UI controls that let you create desktop apps like Word, Excel, and Photoshop, and access to a comprehensive set of managed or native APIs for using Windows features.

Подробное сравнение этих платформ и дополнительные материалы по каждой платформе доступны в разделе Выбор платформы для приложения. For an in-depth comparison of these platforms along with additional resources for each platform, see Choose your app platform.

Передовая платформа для приложений и игр для, предназначенных для Windows 10. The leading-edge platform for Windows 10 apps and games. Вы можете создавать приложения UWP, которые используют только элементы управления и интерфейсы API универсальной платформы Windows (UWP), или использовать эти элементы управления и API в классических приложениях, созданных с помощью одной из других платформ. You can build UWP apps that exclusively use UWP controls and APIs, or you can use UWP controls and APIs in desktop apps that are built using one of the other platforms.

Предпочтительная платформа для собственных приложений для Windows, которым требуется прямой доступ к Windows и оборудованию. The platform of choice for native Windows apps that require direct access to Windows and hardware.

Общепризнанная платформа на основе .NET для преимущественно графических приложений для Windows, использующих модель пользовательского интерфейса XAML. The established .NET-based platform for graphically-rich managed Windows apps with a XAML UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Платформа на основе .NET, предназначенная для управляемых бизнес-приложений, использующих упрощенную модель пользовательского интерфейса. A .NET-based platform that is designed for managed line-of-business apps with a lightweight UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Стратегия развития Future roadmap

В будущем мы планируем улучшать платформы разработки приложений для Windows с помощью библиотеки пользовательского интерфейса Windows (WinUI) и Project Reunion. Looking forward, we are evolving the Windows app development platforms with the Windows UI Library (WinUI) and Project Reunion.

WinUI — это собственная среда взаимодействия с пользователем для приложений Windows 10. WinUI is a native user experience (UX) framework for Windows 10 apps. Библиотека WinUI разрабатывалась как набор средств. Она предоставляла новые и обновленные версии элементов управления WinRT для приложений UWP, предназначенных для более ранних версий Windows 10. WinUI started as a toolkit that provides new and updated versions of WinRT controls for UWP apps that target down-level versions of Windows 10. Область действия WinUI расширилась, и WinUI 3 представляет собой современную нативную платформу пользовательского интерфейса для приложений Windows 10 в UWP, .NET и Win32. As of WinUI 3, WinUI is growing in scope to become the premier native user interface (UI) framework for Windows 10 apps across UWP, .NET, and Win32 app platforms.

Project Reunion — это кодовое название для широкого спектра новых компонентов и инструментов для разработчиков. Это новый этап развития платформы для разработки приложений Windows. Project Reunion is the code name for a broad set of new developer components and tools that represents the next evolution in the Windows app development platform. Project Reunion включает единый набор API и инструментов, которые могут согласованно использоваться любыми приложениями в различных целевых версиях ОС Windows 10. Project Reunion provides a unified set of APIs and tools that can be used in a consistent way by any app on a broad set of target Windows 10 OS versions. Project Reunion дополняет имеющиеся платформы и среды приложений Windows, такие как UWP, нативная среда Win32 и .NET, общим набором API и инструментов, которые упрощают работу разработчиков. Project Reunion complements existing Windows app platforms and frameworks such as UWP and native Win32, and .NET with a common set of APIs and tools that developers can rely on across these platforms.

Дополнительные сведения см. в статье Project Reunion. For more information, see Project Reunion.

Обновление существующих классических приложений для Windows 10 Update existing desktop apps for Windows 10

Если у вас есть классические приложения WPF, Windows Forms или собственные классические приложения Win32, в Windows 10 и универсальной платформе Windows (UWP) предлагается много возможностей для реализации современных функций в имеющихся приложениях. If you have an existing WPF, Windows Forms, or native Win32 desktop app, Windows 10 and the Universal Windows Platform (UWP) offer many features you can use to deliver a modern experience in your app. Большинство этих функций доступны в виде модульных компонентов, которые можно внедрить в приложение в своем собственном темпе, не переписывая код приложения для другой платформы. Most of these features are available as modular components that you can adopt in your app at your own pace without having to rewrite your app for a different platform.

Ниже приведено лишь несколько функций, позволяющих улучшить существующие классические приложения. Here are just a few of the features available to enhance your existing desktop apps:

• Используйте MSIX для упаковки и развертывания классических приложений. Use MSIX to package and deploy your desktop apps. MSIX — это современный формат пакета приложения для Windows, позволяющий упаковывать любые приложения для Windows. MSIX is a modern Windows app package format that provides a universal packaging experience for all Windows apps. Этот безопасный и надежный формат упаковки сочетает в себе преимущества технологий установки с использованием MSI-файлов, APPX-файлов, App-V и ClickOnce. MSIX brings together the best aspects of MSI, .appx, App-V and ClickOnce installation technologies and is built to be safe, secure, and reliable.
• Интегрируйте возможности Windows 10 в свое классическое приложение с помощью расширений пакетов. Integrate your desktop app with Windows 10 experiences by using package extensions. Например, закрепите свое приложение в меню «Пуск», предоставьте к нему общий доступ или отправляйте всплывающие уведомления из приложения. For example, point Start tiles to your app, make your app a share target, or send toast notifications from your app.
• Используйте острова XAML для размещения элементов управления XAML UWP в своем классическом приложении. Use XAML Islands to host UWP XAML controls in your desktop app. Многие последние функции пользовательского интерфейса Windows 10 доступны только для элементов управления XAML UWP. Many of the latest Windows 10 UI features are only available to UWP XAML controls.

Дополнительные сведения доступны в приведенных ниже статьях. For more information, see these articles.

Платформа Platform	Описание Description	Документация и ресурсы Docs and resources
Универсальная платформа Windows (UWP) Universal Windows Platform (UWP)

Статья Article	Описание Description
Модернизация классических приложений Modernize desktop apps	Описываются последние возможности разработки для Windows 10 и UWP, которые можно использовать в любом классическом приложении, включая приложения WPF, Windows Forms и приложения Win32 на C++. Describes the latest Windows 10 and UWP development features you can use in any desktop app, including WPF, Windows Forms, and C++ Win32 apps.
Руководство. Модернизация приложения WPF Tutorial: Modernize a WPF app	Следуйте пошаговым инструкциям, чтобы модернизировать существующий пример бизнес-приложения WPF, добавив элементы управления рукописным вводом и календарем UWP в приложение и упаковав его в пакет MSIX. Follow step-by-step instructions to modernize an existing WPF line-of-business sample app by adding UWP Ink and calendar controls to the app and packaging it in an MSIX package.

Создание классических приложений Create new desktop apps

Ниже приведены некоторые ресурсы, которые помогут вам приступить к созданию классического приложения для Windows. If you are creating a new desktop app for Windows, here are some resources to help get you started.

Создание приложения Windows Forms на C# в Visual Studio Create a Windows Forms app in Visual Studio with C#

В рамках этого краткого знакомства с возможностями интегрированной среды разработки Visual Studio (IDE) вы создадите простое приложение на C# с пользовательским интерфейсом на основе Windows. In this short introduction to the Visual Studio integrated development environment (IDE), you’ll create a simple C# application that has a Windows-based user interface (UI).

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

На некоторых снимках экрана в этом учебнике используется темная тема. Some of the screenshots in this tutorial use the dark theme. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio. If you aren’t using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

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

Сначала вы создадите проект приложения на C#. First, you’ll create a C# application project. Для этого типа проекта уже имеются все нужные файлы шаблонов, что избавляет вас от лишней работы. The project type comes with all the template files you’ll need, before you’ve even added anything.

Откройте Visual Studio 2017. Open Visual Studio 2017.

В верхней строке меню последовательно выберите Файл > Создать > Проект. From the top menu bar, choose File > New > Project.

В левой области диалогового окна Новый проект разверните узел Visual C# и выберите Рабочий стол Windows. In the New Project dialog box in the left pane, expand Visual C#, and then choose Windows Desktop. На средней панели выберите Приложение Windows Forms (.NET Framework) . In the middle pane, choose Windows Forms App (.NET Framework). Назовите файл HelloWorld . Then name the file HelloWorld .

Если шаблон проекта Приложение Windows Forms (.NET Framework) отсутствует, закройте диалоговое окно Новый проект и в верхней строке меню выберите Сервис > Получить средства и компоненты. If you don’t see the Windows Forms App (.NET Framework) project template, cancel out of the New Project dialog box and from the top menu bar, choose Tools > Get Tools and Features. Запускается Visual Studio Installer. The Visual Studio Installer launches. Выберите рабочую нагрузку .Разработка классических приложений .NET и затем элемент Изменить. Choose the .NET desktop development workload, then choose Modify.

Запустите Visual Studio 2019. Open Visual Studio 2019.

На начальном экране выберите Создать проект. On the start window, choose Create a new project.

В окне Создать проект выберите шаблон Приложение Windows Forms (.NET Framework) для C#. On the Create a new project window, choose the Windows Forms App (.NET Framework) template for C#.

(При желании вы можете уточнить условия поиска, чтобы быстро перейти к нужному шаблону. (If you prefer, you can refine your search to quickly get to the template you want. Например, введите Приложение Windows Forms в поле поиска. For example, enter or type Windows Forms App in the search box. Затем выберите C# в списке языков и Windows в списке платформ.) Next, choose C# from the Language list, and then choose Windows from the Platform list.)

Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. If you do not see the Windows Forms App (.NET Framework) template, you can install it from the Create a new project window. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов. In the Not finding what you’re looking for? message, choose the Install more tools and features link.

После этого в Visual Studio Installer выберите рабочую нагрузку Разработка классических приложений .NET. Next, in the Visual Studio Installer, choose the Choose the .NET desktop development workload.

Затем нажмите кнопку Изменить в Visual Studio Installer. After that, choose the Modify button in the Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. You might be prompted to save your work; if so, do so. Выберите Продолжить, чтобы установить рабочую нагрузку. Next, choose Continue to install the workload. После этого вернитесь к шагу 2 в процедуре Создание проекта. Then, return to step 2 in this «Create a project» procedure.

В поле Имя проекта окна Настроить новый проект введите HelloWorld. In the Configure your new project window, type or enter HelloWorld in the Project name box. Затем нажмите Создать. Then, choose Create.

Новый проект открывается в Visual Studio. Visual Studio opens your new project.

Создание приложения Create the application

Когда вы выберете шаблон проекта C# и зададите имя файла, Visual Studio открывает форму. After you select your C# project template and name your file, Visual Studio opens a form for you. Форма является пользовательским интерфейсом Windows. A form is a Windows user interface. Мы создадим приложение Hello World, добавив элементы управления на форму, а затем запустим его. We’ll create a «Hello World» application by adding controls to the form, and then we’ll run the app.

Добавление кнопки на форму Add a button to the form

Щелкните Панель элементов, чтобы открыть всплывающее окно «Панель элементов». Choose Toolbox to open the Toolbox fly-out window.

(Если параметр для всплывающего окна Панель элементов отсутствует, его можно открыть в строке меню. (If you don’t see the Toolbox fly-out option, you can open it from the menu bar. Для этого выберите Вид > Панель элементов. To do so, View > Toolbox. Либо нажмите клавиши CTRL+ALT+X.) Or, press Ctrl+Alt+X.)

Щелкните значок Закрепить, чтобы закрепить окно Панель элементов. Choose the Pin icon to dock the Toolbox window.

Выберите элемент управления Кнопка и перетащите его на форму. Choose the Button control and then drag it onto the form.

В окне Свойства найдите элемент Текст, измените имя с Button1 на Click this , а затем нажмите клавишу ВВОД. In the Properties window, locate Text, change the name from Button1 to Click this , and then press Enter.

(Если окно Свойства не отображается, его можно открыть в строке меню.) (If you don’t see the Properties window, you can open it from the menu bar. Для этого выберите Вид > Окно свойств. To do so, choose View > Properties Window. Или нажмите клавишу F4.) Or, press F4.)

В разделе Проектирование окна Свойства измените имя с Button1 на btnClickThis , а затем нажмите клавишу ВВОД. In the Design section of the Properties window, change the name from Button1 to btnClickThis , and then press Enter.

Если список был упорядочен по алфавиту в окне Свойства, Button1 появится в разделе (DataBindings) . If you’ve alphabetized the list in the Properties window, Button1 appears in the (DataBindings) section, instead.

Добавление метки на форму Add a label to the form

Теперь, когда мы добавили элемент управления »Кнопка» для создания действия, давайте добавим элемент управления «Метка», куда можно отправлять текст. Now that we’ve added a button control to create an action, let’s add a label control to send text to.

Выберите элемент управления Метка в окне Панель элементов, а затем перетащите его на форму и расположите под кнопкой Нажмите это. Select the Label control from the Toolbox window, and then drag it onto the form and drop it beneath the Click this button.

В разделе Проект или (DataBindings) окна Свойства измените имя Label1 на lblHelloWorld и нажмите клавишу ВВОД. In either the Design section or the (DataBindings) section of the Properties window, change the name of Label1 to lblHelloWorld , and then press Enter.

Добавление кода на форму Add code to the form

В окне Form1.cs [Проект] дважды щелкните кнопку Нажмите это, чтобы открыть окно Form1.cs. In the Form1.cs [Design] window, double-click the Click this button to open the Form1.cs window.

(Кроме того, можно развернуть узел Form1.cs в обозревателе решений, а затем выбрать Form1.) (Alternatively, you can expand Form1.cs in Solution Explorer, and then choose Form1.)

В окне Form1.cs после строки private void введите lblHelloWorld.Text = «Hello World!»; , как показано на следующем снимке экрана: In the Form1.cs window, after the private void line, type or enter lblHelloWorld.Text = «Hello World!»; as shown in the following screenshot:

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

Нажмите кнопку Запустить, чтобы запустить приложение. Choose the Start button to run the application.

Будет выполнено несколько операций. Several things will happen. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. In the Visual Studio IDE, the Diagnostics Tools window will open, and an Output window will open, too. Кроме того, вне этой среды откроется диалоговое окно Form1. But outside of the IDE, a Form1 dialog box appears. Оно будет содержать вашу кнопку Нажмите это и текст Label1. It will include your Click this button and text that says Label1.

Нажмите кнопку Нажмите это в диалоговом окне Form1. Choose the Click this button in the Form1 dialog box. Обратите внимание, что текст Label1 меняется на Hello World! . Notice that the Label1 text changes to Hello World!.

Закройте диалоговое окно Form1, чтобы завершить работу приложения. Close the Form1 dialog box to stop running the app.

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

Для получения дополнительных сведений перейдите к следующему руководству: To learn more, continue with the following tutorial: