Desktop UI

Що таке десктопна розробка?

Мотивація та контекст десктопних застосунків. Чому десктоп не помер, незважаючи на веб. Огляд технологій .NET desktop та стратегія курсу.

Що таке десктопна розробка?

Словник теми:GUI (Graphical User Interface) — графічний інтерфейс користувача. Desktop application — програма, що встановлюється та запускається локально на операційній системі. Framework — набір бібліотек і інструментів для розробки. Rendering — процес відображення графіки на екрані.

Від рядка тексту до живого вікна

Ви вже вмієте писати програми. Ви знаєте, що таке змінні, методи, класи, колекції. Ваші програми вміють обчислювати, зберігати дані, відповідати на запити. Але вони «говорять» з користувачем одним способом — через рядки тексту в консолі.

Уявіть інший рівень. Замість Console.WriteLine("Введіть ім'я:") — красиве текстове поле з підписом. Замість Console.ReadLine() — кнопка «Зберегти», яку можна натиснути мишею. Замість виведення чисел у стовпчик — діаграма, що оновлюється в реальному часі.

Це — десктопна розробка. І у .NET вона має потужну, зрілу екосистему.

Але перш ніж писати перший рядок XAML — варто зрозуміти контекст. Звідки все починалось. Чому є стільки різних технологій. І чому, попри домінування веб, десктопні застосунки не просто живі — вони незамінні для цілого класу задач.


Коротка історія GUI: від Xerox до Windows 11

Ця секція — не просто «цікаві факти». Розуміння еволюції допоможе вам зрозуміти, чому сучасні фреймворки влаштовані саме так, а не інакше. Кожне покоління технологій вирішувало проблеми попереднього.

Епоха 1: CLI — тільки текст (1960–1980-ті)

Перші комп'ютери спілкувалися з людиною виключно через текст. Команди вводилися рядком, результат виводився рядком. Це була CLI-епоха (Command Line Interface).

Програміст та звичайний користувач жили в різних всесвітах. Щоб скористатися комп'ютером, потрібно було знати команди напам'ять. Помилка в одній літері — і нічого не працює. Комп'ютери були інструментом для спеціалістів, не для всіх.

Головний урок цієї епохи: текстовий інтерфейс ефективний, але не доступний. Щоб зробити комп'ютери масовими — потрібна була нова парадигма взаємодії.

Епоха 2: Перші GUI — Xerox та Apple (1970–1984)

У 1973 році дослідницька лабораторія Xerox PARC представила Xerox Alto — перший комп'ютер з графічним інтерфейсом. Вікна, іконки, курсор миші — все це з'явилося тут. Концепція WIMP (Windows, Icons, Menus, Pointer) стала основою GUI на десятиліття вперед.

У 1984 році Apple випустила Macintosh — перший масовий комп'ютер з GUI. Реклама «1984» зробила його подією культури. Але найважливішим була ідея: комп'ютер може бути зрозумілим без інструкцій. Ви бачите папку — ви розумієте, що туди можна покласти файли. Ви бачите кошик — ви розумієте, що туди йдуть видалені речі. Метафори реального світу перенесені в цифровий.

Епоха 3: Windows — GUI для всіх (1985–2000-ні)

Microsoft випустила Windows 1.0 у 1985 році. На відміну від Mac, Windows працював поверх DOS і спочатку виглядав доволі скромно. Але версія Windows 3.1 (1992) та Windows 95 стали переломними — вони принесли GUI мільйонам звичайних користувачів.

Разом з Windows прийшли перші масові GUI-фреймворки: Visual Basic (1991) дозволяв перетягувати кнопки на форму мишею і вже через хвилину мати працюючий застосунок. Це була революція продуктивності для розробників.

Але VB мав обмеження: він генерував «важкий» нативний код, що погано масштабувався. Коли з'явився .NET (2002) — Microsoft запропонувала новий підхід.

Епоха 4: .NET та WinForms/WPF (2002–сьогодні)

З приходом .NET Framework у 2002 році Microsoft представила Windows Forms (WinForms) — першу GUI-технологію для платформи .NET. Принцип той самий, що у VB: перетягуй, налаштовуй, запускай. Але тепер — з потужністю C# і CLR.

WinForms використовував GDI+ для малювання — той самий механізм, що й Windows сам малював свої вікна. Це давало хорошу інтеграцію з ОС, але мало обмеження: растровий рендеринг, погане масштабування на HiDPI-екранах, відсутність підтримки сучасних UI-ефектів.

У 2006 році Microsoft представила Windows Presentation Foundation (WPF) — принципово нову архітектуру. WPF перейшов на DirectX-рендеринг, що дало векторну графіку, апаратне прискорення, повноцінну підтримку анімацій та візуальних ефектів. Замість перетягування кнопок — декларативна розмітка XAML. Замість event-spaghetti — патерн MVVM.

WPF змінив уявлення про те, яким може бути desktop UI у Windows.


Десктоп у 2020-х: він ще живий і процвітає

Після домінування веб-технологій у 2010-х роках може здатися, що десктопні застосунки — це «легасі». Але реальність розповідає іншу історію.

Ось кілька цифр і фактів, які розставляють все на місце:

  • Visual Studio, Rider, VS Code (Electron) — IDE, якими ви користуєтесь щодня, є десктопними застосунками.
  • Figma Desktop, Adobe Photoshop, Blender, DaVinci Resolve — графічний і відео-інструментарій залишається десктопним.
  • AutoCAD, SolidWorks, MATLAB — промислове та наукове ПЗ.
  • Telegram Desktop, Discord (Electron) — месенджери обирають desktop для кращого UX.
  • , SAP GUI, сотні корпоративних ERP/CRM систем — бізнес-застосунки, що обслуговують мільйони користувачів.

Ринок десктопного ПЗ не скорочується — він трансформується. Веб взяв на себе «легкі» задачі (читання новин, соцмережі, перегляд відео). Десктоп залишив за собою важкі задачі: складний UX, робота з файлами та пристроями, offline-режим, висока продуктивність.


Десктоп vs Консоль vs Веб: що і коли обирати

Три парадигми розробки — три різних підходи до взаємодії з користувачем. Жодна не є «кращою»: кожна є правильним вибором для своєї задачі.

КритерійКонсольний застосунокВеб-застосунокДесктопний застосунок
Взаємодія з користувачемТекст: введення/виведення рядківБраузер: HTML/CSS, event handlersНативне вікно: кнопки, форми, меню
Графіка та анімації❌ Обмежена (ANSI-кольори)✅ CSS анімації, Canvas, WebGL✅ DirectX/Skia, повноцінна 2D/3D
Доступ до ОС✅ Файлова система, процеси, мережа⚠️ Обмежений (browser sandbox)✅ Повний: реєстр, COM, API Windows
UX та зручність🔴 Складний для кінцевих користувачів🟡 Гарний, але залежить від браузера🟢 Нативний, інтегрований з ОС
Offline-робота✅ Завжди offline⚠️ Потребує додаткових зусиль (PWA)✅ Повна підтримка offline
Встановлення✅ Один виконуваний файл✅ Не потрібне⚠️ Інсталятор, оновлення
Crossplatform✅ .NET скрізь✅ Браузер скрізь⚠️ WPF — лише Windows; Avalonia — скрізь
Продуктивність✅ Мінімальні витрати ресурсів🟡 Залежить від JS-движка✅ Прямий доступ до GPU/CPU
Типові задачіСкрипти, CLI-утиліти, автоматизаціяВеб-сайти, SaaS, APIIDE, фото-редактори, ERP, CAD

Коли вибирати десктоп

Десктоп — правильний вибір, коли:

1. Складний, «насичений» UX — коли інтерфейс не просто відображає дані, а є основним робочим інструментом. IDE, графічні редактори, DAW (Digital Audio Workstation) — тут потрібна максимальна контрольованість кожного пікселя, підтримка drag-and-drop, shortcuts, context menus, docking panels.

2. Інтенсивна робота з файлами та пристроями — коли застосунок читає/записує великі файли (відео, 3D-моделі, бази даних), підключається до обладнання (принтери, сканери, USB-пристрої, GPS) або потребує прямого доступу до файлової системи.

3. Offline-критична функціональність — коли застосунок має працювати без інтернету. Облік у магазині, польовий збір даних, медичне обладнання — тут веб просто не підходить.

4. Висока продуктивність — коли потрібно обробляти великі дані локально: відео-рендеринг, наукові симуляції, чисельні розрахунки. Десктоп не додає overhead браузерного движка.

5. Корпоративні внутрішні системи — ERP, CRM, системи обліку. Встановлюються один раз у корпоративній мережі, інтегруються з Active Directory, мають доступ до внутрішніх ресурсів.

✅ Ідеально для Desktop

  • IDE та редактори коду
  • Графічні редактори (Photoshop-подібні)
  • CAD/CAM системи
  • Відео та аудіо редактори
  • ERP/CRM системи
  • Медичне та промислове ПЗ
  • Системні утиліти та адміністрування

🌐 Ідеально для Web

  • Публічні сайти та додатки
  • SaaS-платформи
  • Соцмережі та медіа
  • Форми та анкети
  • Дашборди та звітність
  • Колаборативні інструменти
  • Маркетингові лендінги

Технології десктопу у .NET: повний огляд

.NET надає кілька технологій для побудови десктопних застосунків. Кожна має свою нішу, вік і рівень зрілості. Давайте розберемось у кожній — щоб ви розуміли, чому цей курс побудований навколо WPF + Avalonia.

Windows Forms (WinForms)

Рік: 2002  |  Статус: Підтримується (legacy), .NET 8+

WinForms — найстаріша GUI-технологія в .NET. Побудований на GDI+ і Win32 API. Принцип роботи: перетягуєш контроли з toolbox на форму, подвійним кліком відкриваєш обробник події, пишеш код.

Сильні сторони:

  • Виключна простота для початківців
  • Швидке прототипування простих форм
  • Гігантська кількість legacy-проєктів, які потребують підтримки
  • Прекрасна інтеграція з Windows API

Слабкі сторони:

  • Растровий рендеринг — аліасинг на HiDPI-екранах
  • Відсутність MVVM — весь код в event handlers (spaghetti code)
  • Немає підтримки сучасних UI-ефектів (анімації, тіні, напівпрозорість)
  • Складне створення custom controls

Коли використовувати у 2024 році: Підтримка існуючих WinForms-проєктів. Дуже прості інструменти для внутрішнього використання, де UX — не пріоритет.

Windows Presentation Foundation (WPF)

Рік: 2006  |  Статус: Активно підтримується, .NET 8+

WPF — це те, що ми будемо вивчати в цьому курсі. Кардинальна переробка того, як будуються Windows-застосунки.

Ключові відмінності від WinForms:

  • XAML — декларативна розмітка для опису UI (як HTML для веб)
  • DirectX-рендеринг — векторна графіка, апаратне прискорення, ідеальна чіткість на будь-якому DPI
  • Data Binding — декларативне зв'язування UI з даними
  • MVVM — патерн архітектури, що розділяє логіку і представлення
  • Styles та Templates — повне перевизначення зовнішнього вигляду будь-якого контролу

Обмеження: Windows-only. WPF не запускається на macOS чи Linux.

Universal Windows Platform (UWP)

Рік: 2015  |  Статус: Не рекомендований (фактично заморожений)

UWP створювався для єдиної платформи Windows 10/11 + Xbox + HoloLens. Гарна ідея, але обмежений sandbox, труднощі з розповсюдженням за межами Store.

Microsoft фактично припинила розвиток UWP на користь WinUI 3. Не рекомендуємо вивчати UWP для нових проєктів у 2024 році.

WinUI 3

Рік: 2021  |  Статус: Активно розвивається, але ще не зрілий

WinUI 3 — наступник UWP, але без sandbox-обмежень. Використовує Fluent Design System (той самий, що у Windows 11). XAML-подібний синтаксис.

Проблема: Молода платформа з нестабільним API, обмеженою документацією та меншою спільнотою порівняно з WPF. Windows-only.

Перспектива: Можливо, це майбутнє Windows-розробки. Але зараз — для нових проєктів WPF або Avalonia є більш надійним вибором.

.NET MAUI

Рік: 2022  |  Статус: Активно розвивається

MAUI (Multi-platform App UI) — наступник Xamarin.Forms. Один код → Windows, macOS, iOS, Android.

Відмінність від Avalonia: MAUI орієнтований на мобільну розробку, що перенесена на desktop. Компоненти адаптовані під mobile UX. Для традиційного desktop (менюбар, складні форми, docking) MAUI менш зручний.

Коли вибирати: Коли вам потрібен mobile-first підхід з Desktop-підтримкою (наприклад, корпоративний застосунок для iPhone + Windows).

Avalonia UI

Рік: 2013 (публічно), активний розвиток з 2018  |  Статус: Стабільний, production-ready

Avalonia — це відповідь спільноти на питання: «Чому WPF не кросплатформний?». Взяли найкраще з WPF — XAML, Binding, MVVM, Styles — і переписали рендеринг на Skia (та самою бібліотекою, що використовує Flutter та Chrome).

Результат: той самий WPF-dosвід, але на Windows, macOS, Linux, Android, iOS, і навіть WebAssembly (що ми використовуємо в цьому курсі для live XAML previewer!).

Це і є наш companion: після кожної WPF-теми ми будемо бачити, як те саме реалізується в Avalonia — з мінімальними відмінностями.


Порівняльна таблиця .NET Desktop технологій

Для зручного вибору — зведена таблиця всіх технологій за ключовими критеріями:

ТехнологіяРікПлатформиРендерингСинтаксис UIMVVMЗрілістьРекомендація
WinForms2002WindowsGDI+ (растр)Code/Designer🟢 ЗрілаLegacy підтримка
WPF2006WindowsDirectX (вектор)XAML🟢 Зріла⭐ Основа курсу
UWP2015Win10/11DirectXXAML🟡 Заморожена❌ Не рекомендується
WinUI 32021WindowsDirectXXAML🟡 МолодаМайбутнє, але ризиковано
MAUI2022Win/Mac/iOS/AndroidNativeXAML🟡 МолодаMobile-first проєкти
Avalonia2018+Win/Mac/Linux/WASMSkiaXAML (.axaml)🟢 Зріла⭐ Companion курсу
Чому не WinUI 3? Хоча WinUI 3 — офіційний напрямок Microsoft для Windows, це молода платформа з нестабільним API, меншою кількістю документації та прикладів. WPF має 18+ років розвитку, тисячі статей, зрілий tooling. Великі компанії (GitHub Desktop, Visual Studio, SQL Server Management Studio) досі активно використовують WPF.

Чому WPF як основа цього курсу

Перед тим як перейти до коду — давайте відверто поговоримо про вибір технології для курсу. Це важливо, бо ви маєте розуміти чому ви вчите саме це.

Аргумент 1: Зрілість та документація

WPF існує з 2006 року. Вісімнадцять років активного використання — це:

  • Тисячі статей, туторіалів, Stack Overflow відповідей
  • Зрілі бібліотеки та інструменти (MahApps.Metro, MaterialDesignInXaml, Prism, CommunityToolkit)
  • Стабільний API, що не змінюється кожного релізу
  • Відмінний tooling: Visual Studio WPF Designer, Snoop, dotPeek

Коли ви зустрінете незрозумілу помилку — для WPF майже гарантовано є Stack Overflow відповідь. Для WinUI 3 чи MAUI така впевненість набагато нижча.

Аргумент 2: XAML як стандарт декларативного UI

XAML, що ви вивчите в WPF — це той самий XAML, що використовується в:

  • Avalonia — практично ідентичний синтаксис
  • WinUI 3 — той самий XAML, інший runtime
  • MAUI — схожий XAML (є відмінності, але незначні)
  • UWP — попередник WinUI 3, той самий XAML

Вивчивши XAML в WPF, ви розумієте 80–90% XAML в будь-якій іншій технології з цього списку. Це інвестиція, що окупається.

Аргумент 3: MVVM як індустріальний патерн

MVVM (Model-View-ViewModel), що ми вивчимо в контексті WPF — це стандарт для всього .NET UI:

  • WPF — перша технологія, де MVVM набув популярності
  • Avalonia, MAUI, WinUI 3 — всі використовують той самий MVVM
  • Навіть у Blazor (веб) є схожі концепції

WPF — найкраще місце для вивчення MVVM, бо технологія достатньо зріла, щоб бачити патерн у «чистому» вигляді, без зайвих абстракцій.

Аргумент 4: Стратегія «Вивчи WPF → зрозумій Avalonia за тиждень»

Avalonia — кросплатформний спадкоємець WPF. Порівняйте:

WPF                                    Avalonia
──────────────────────────────────     ──────────────────────────────────
MainWindow.xaml                        MainWindow.axaml
xmlns="http://...wpf..."               xmlns="https://github.com/avaloniaui"
DependencyProperty.Register(...)       AvaloniaProperty.Register<...>(...)
Binding (Reflection)                   Binding (Compiled, type-safe)
Style + Trigger                        Style + Pseudo-classes (:hover)
ControlTemplate                        ControlTheme
App.xaml → StartupUri                  App.axaml → Program.cs entry point

Різниця є, але вона поверхнева. Концепції — ідентичні. Якщо ви вмієте WPF — Avalonia вивчається за 1–2 тижні, а не за місяці.

Реальний кейс: Команда AvaloniaUI офіційно позиціонує свою платформу як «WPF для всіх платформ». В їхній документації є цілий розділ «Migrating from WPF», де перераховано всі відмінності. Це найкращий доказ того, що знаючи WPF — ви вже знаєте 80% Avalonia.

Що ми будуємо в цьому курсі

Теорія без практики — мертва. Щоб у вас була мотивація проходити всі 46 статей цього курсу, давайте одразу покажемо, до чого ми прийдемо.

Фінальний проєкт: Task Manager Desktop App

Протягом курсу ми поступово будуємо повноцінний менеджер задач — десктопний застосунок з реалістичним UX:

📋 Управління задачами

  • Список задач з фільтрацією та сортуванням
  • Категорії та теги
  • Пріоритети та дедлайни
  • Статуси (To Do, In Progress, Done)

🎨 Сучасний UI

  • Fluent Design (Windows 11-стиль)
  • Темна та світла тема
  • Анімовані переходи
  • Custom контроли (RatingControl, DateBadge)

🏗️ Правильна архітектура

  • MVVM з CommunityToolkit
  • SQLite + EF Core для зберігання
  • Dependency Injection
  • xUnit тести для ViewModel

🌍 Кросплатформ

  • Порт на Avalonia
  • Запуск на Windows/macOS/Linux
  • Headless тести для UI

Кожен блок курсу додає щось нове до цього застосунку. Ви не просто вивчаєте теорію в ізоляції — ви будуєте реальний продукт.


Практичні завдання

Рівень 1 — обов'язковий мінімум. Рівень 2 — для впевненого розуміння. Рівень 3 — для тих, хто хоче більше. Не пропускайте рівень 1 і 2 — вони формують фундамент для наступних статей.

Рівень 1: Дослідження

Відкрийте будь-які 3 десктопних застосунки, якими ви регулярно користуєтесь (наприклад, Telegram Desktop, Visual Studio або VS Code, будь-яка гра чи утиліта). Для кожного спробуйте визначити:

  1. На якій технології зроблено? Для Windows-застосунків: відкрийте Task Manager → правий клік на процесі → «Open file location». Знайдіть папку з exe і перевірте, чи є там .dll файли типу PresentationFramework.dll (WPF) або Avalonia.dll (Avalonia).
  2. Які UI-патерни використовуються? Є меню (MenuBar)? Sidebar? Tabs? Drag-and-drop? Темна тема?
  3. Чи є веб-версія цього застосунку? Якщо є — порівняйте UX: що є в десктопній версії, чого немає у веб?

Рівень 2: Знайти WPF у реальному світі

WPF використовується в дуже відомих продуктах. Знайдіть підтвердження (через Googling, GitHub, офіційну документацію) що принаймні 3 з наведених продуктів побудовані на WPF або містять WPF-компоненти:

  • Visual Studio (не VS Code!)
  • SQL Server Management Studio (SSMS)
  • GitHub Desktop
  • Snagit (від TechSmith)
  • Expression Blend
  • Paint.NET (з версії 4.x)

Рівень 3: Порівняти UX

Оберіть будь-який продукт, що має і десктопну і веб-версію (наприклад: Figma, Telegram, Slack, Notion, Spotify). Проведіть порівняльний аналіз:

  • Складіть таблицю: 10 функцій, що є лише в десктопній версії
  • Складіть таблицю: 5 функцій, де веб-версія краща
  • Зробіть висновок: чому цей продукт підтримує обидві версії, а не лише одну?

Напишіть короткий (300–500 слів) текстовий аналіз вашого порівняння. Це формує розуміння, для яких задач desktop є правильним вибором.


Підсумок

Ця стаття відповіла на фундаментальне питання: навіщо взагалі вивчати десктопну розробку у 2020-х?

Ключові висновки:

  • Desktop не замінено вебом — він займає свою чітку нішу для складного UX, offline-роботи, продуктивних інструментів
  • .NET Desktop має кілька технологій (WinForms, WPF, UWP, WinUI 3, MAUI, Avalonia), кожна зі своїм призначенням
  • WPF — зрілий, перевірений часом вибір для Windows-desktop з XAML, Binding та MVVM
  • Avalonia — кросплатформний спадкоємець WPF, що дає той ж досвід на Windows/macOS/Linux
  • Вивчивши WPF → Avalonia вчиться значно швидше через ідентичні концепції

У наступній статті ми зайдемо «під капот» WPF — дізнаємось, як влаштована його архітектура, чому рендеринг через DirectX дає таку якість графіки та що таке Dispatcher.