УДК 004.4
ББК 32.972WinUI
Э98
Э98 Изучаем WinUI 3.0 / пер. с англ. А. А. Слинкина. – М.: ДМК Пресс, 2021. –
358 с.: ил.
Эшкрафт Э.
ISBN 978-5-97060-983-5
WinUI 3.0 знаменует новый подход к доставке компонентов и элементов управления
пользовательского интерфейса Windows UI, позволяющий использовать
одни и те же компоненты в Windows 10 и следующих версиях этой ОС.
Перед вами подробное введение в WinUI и разработку приложений Windows
для программистов, начинающих осваивать WinUI, Universal Windows Platform
(UWP) и приложения на основе XAML.
Прочитав книгу, вы будете понимать, как писать WinUI-приложения с нуля
и как модернизировать существующие приложения WPF и Win- Forms, добавляя
в них элементы управления WinUI.
Издание адресовано всем желающим разрабатывать приложения для Windows
с современным интерфейсом. Если вы уже знакомы с UWP и WPF и хотите обогатить
свои знания и модернизировать имеющиеся приложения, то эта книга
для вас.
УДК 004.4
ББК 32.972WinUI
First published in the English language under the title ‘Learn WinUI 3.0 – (9781800208667).
Russian language edition copyright © 2021 by DMK Press. All rights reserved.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой
бы то ни было форме и какими бы то ни было средствами без письменного разрешения
владельцев авторских прав.
ISBN 978-1-80020-866-7 (англ.)
ISBN 978-5-97060-983-5 (рус.)
© Packt Publishing, 2021
© Перевод, оформление, издание,
ДМК Пресс, 2021
Стр.5
Содержание
От издательства ....................................................................................................14
Об авторе .................................................................................................................15
О рецензенте .........................................................................................................16
Предисловие ..........................................................................................................17
Часть I. ВВЕДЕНИЕ В ПРИЛОЖЕНИЯ WinUI И WINDOWS ......22
Глава 1. Введение в WinUI ..............................................................................23
Технические требования ...........................................................................................24
До UWP – приложения Windows 8 XAML ................................................................24
Дизайн UI-приложения для Windows .................................................................25
Windows Runtime (WinRT) ....................................................................................26
Отпор пользователей и путь к Windows 10 ........................................................26
Windows 10 и разработка приложений UWP ..........................................................26
Выбор языка при разработке на платформе UWP ............................................27
Снятие ограничений .............................................................................................28
Обратная совместимость UWP .............................................................................29
Что такое XAML? .........................................................................................................30
Создание адаптивного UI для любого устройства ............................................32
Привязка к данным ...............................................................................................33
Стилизация UI с помощью XAML ........................................................................36
Отделение представления от бизнес-логики ....................................................37
Что такое WinUI? ........................................................................................................38
Первый выпуск WinUI ...........................................................................................39
По дороге к WinUI 3.0 ............................................................................................41
WinUI 2.1 .............................................................................................................41
WinUI 2.2 .............................................................................................................41
WinUI 2.3 .............................................................................................................42
WinUI 2.4 .............................................................................................................42
WinUI 2.5 .............................................................................................................42
Что нового в WinUI 3.0? .............................................................................................43
Прощай, UWP? ........................................................................................................43
Новые возможности в WinUI 3.0 ..........................................................................44
Project Reunion и WinUI ........................................................................................45
Сравнение WinUI с другими каркасами разработки для Windows .....................45
WinUI и UWP ...........................................................................................................45
WinUI и WPF............................................................................................................46
Преимущества WinUI ........................................................................................46
Стр.7
Содержание 7
Преимущества WPF ...........................................................................................46
WinUI и Windows Forms (WinForms) ....................................................................47
Преимущества WinUI ........................................................................................47
Преимущества WinForms .................................................................................48
Резюме .........................................................................................................................48
Вопросы .......................................................................................................................48
Глава 2. Конфигурирование среды разработки
и создание проекта ............................................................................................49
Технические требования ...........................................................................................50
Установка Visual Studio и рабочих нагрузок для разработки в Windows ...........50
Добавление шаблонов WinUI-приложений .......................................................51
Первое знакомство с идеей приложения ...............................................................52
Обзор функций приложения ................................................................................53
Типы проектов WinUI in UWP и WinUI in Desktop ............................................53
Создание первого проекта WinUI ............................................................................54
Анатомия проекта типа WinUI in UWP ...................................................................56
Обзор файла App.xaml ...........................................................................................56
Обзор файла App.xaml.cs ......................................................................................57
Обзор файла MainPage.xaml .................................................................................57
Обзор файла MainPage.xaml.cs ............................................................................58
Обзор ссылок из проекта ......................................................................................58
Обзор свойств проекта ..........................................................................................59
Основы XAML..............................................................................................................59
Построение модели ...............................................................................................60
Создание демонстрационных данных ...............................................................62
Построение начальной версии UI .......................................................................64
Завершение инициализации привязки к данным ...........................................65
Создание DataTemplate и привязка к UI .............................................................66
Еще о WinUI и UWP ....................................................................................................68
Модель приложений UWP .....................................................................................70
Работа с элементами управления WinUI, свойствами и событиями .................71
Добавление заголовка ListView ...........................................................................71
Создание фильтра в виде комбинированного списка .....................................73
Добавление кнопки создания нового предмета ...............................................77
Резюме .........................................................................................................................79
Вопросы .......................................................................................................................80
Глава 3. MVVM как средство, обеспечивающее удобство
сопровождения и тестирования ..................................................................81
Технические требования ...........................................................................................82
Что такое MVVM .........................................................................................................82
MVVM – общая картина ........................................................................................82
Библиотеки MVVM для WinUI ..................................................................................83
Библиотека MVVM из Windows Community Toolkit ..........................................84
Библиотека Prism ...................................................................................................84
Стр.8
8 Содержание
MVVMCross .............................................................................................................84
Выбор каркаса для WinUI-приложений ..............................................................85
Устройство привязки к данным в WinUI ................................................................85
Что такое расширения разметки? .......................................................................85
Расширение разметки Binding .............................................................................86
Расширение разметки x:Bind ...............................................................................87
Обновление данных представления с помощью INotifyPropertyChanged ....88
Обновление данных коллекции с помощью INotifyCollectionChanged .........88
Реализация MVVM в WinUI-приложениях .............................................................89
Работа с событиями и командами ...........................................................................92
Реализация интерфейса ICommand ....................................................................93
Использование команд в модели представления .............................................93
Обновление представления .................................................................................95
Выбор каркаса автономного тестирования ...........................................................97
Резюме .........................................................................................................................97
Вопросы .......................................................................................................................98
Глава 4. Дополнительные концепции MVVM ........................................99
Технические требования ...........................................................................................99
Основы внедрения зависимостей .........................................................................100
Использование DI совместно с классами ViewModel..........................................101
Использование x:Bind в сочетании с событиями ................................................103
Страничная навигация с помощью MVVM и DI ..................................................104
Добавление страницы ItemDetailsPage ............................................................104
Добавление новых интерфейсов и служб.........................................................107
Создание службы навигации .............................................................................107
Создание службы данных ...................................................................................109
Потребление служб упрощает сопровождение ...............................................112
Обработка параметров в ItemDetailsPage ........................................................114
Создание класса ItemDetailsViewModel ............................................................115
Резюме .......................................................................................................................118
Вопросы .....................................................................................................................118
Глава 5. Элементы управления WinUI .....................................................119
Технические требования .........................................................................................119
Что WinUI предлагает разработчикам ..................................................................120
Анимированный визуальный проигрыватель (Lottie) ...................................121
Элемент NavigationView ......................................................................................121
Элемент ParallaxView ..........................................................................................123
Элемент RatingControl .........................................................................................124
Элемент TwoPaneView .........................................................................................125
Приложение XAML Controls Gallery для Windows ...............................................126
Изучаем элемент управления ScrollViewer ......................................................127
Что нового в WinUI 3.0.............................................................................................129
Обратная совместимость ....................................................................................129
Инструментальные средства Visual Studio ......................................................129
Стр.9
Содержание 9
Контроль входных данных .................................................................................129
Новый элемент WebView ....................................................................................130
XamlDirect API для разработчиков ПО промежуточного уровня ......................132
Добавление новых элементов управления в проект ..........................................134
Использование элемента управления SplitButton ..........................................134
Добавление элемента TeachingTip к кнопке сохранения ..............................136
Резюме .......................................................................................................................138
Вопросы .....................................................................................................................138
Для дальнейшего чтения ........................................................................................139
Глава 6. Использование данных и служб ..............................................140
Технические требования .........................................................................................140
Управление состоянием приложения с помощью событий жизненного
цикла ..........................................................................................................................141
События жизненного цикла приложений в Windows ....................................141
События жизненного цикла WinUI-приложений ...........................................142
OnLaunched .......................................................................................................143
OnActivated .......................................................................................................143
Выполнение приложений в приоритетном и фоновом режимах ............144
Событие Suspending ........................................................................................144
Событие Resuming ...........................................................................................145
Создание хранилища данных SQLite ....................................................................145
Что такое SQLite? .................................................................................................146
Добавление SQLite в DataService .......................................................................146
Использование Micro ORM для упрощения доступа к данным ....................149
Добавление Dapper в проект ..............................................................................149
Модификация инициализации службы данных .............................................152
Работа с данными посредством служб..................................................................154
Контроль правильности данных в MVVM ............................................................159
Резюме .......................................................................................................................161
Вопросы .....................................................................................................................162
Часть II. РАСШИРЕНИЕ WinUI И МОДЕРНИЗАЦИЯ
ПРИЛОЖЕНИЙ .................................................................................................163
Глава 7. Система проектирования текучих интерфейсов
для приложений Windows ............................................................................164
Технические требования .........................................................................................165
Что такое Fluent Design System?.............................................................................165
Изучение текучего дизайна для Windows ........................................................166
Элементы управления .........................................................................................166
Паттерны ...............................................................................................................166
Макет .....................................................................................................................168
Ввод ........................................................................................................................169
Стиль ......................................................................................................................169
Стр.10
10 Содержание
Включение текучего дизайна в WinUI-приложения ...........................................171
Изменение полосы заголовка ............................................................................171
Изменение стиля страницы MainPage ..............................................................172
Изменение стиля страницы ItemDetailsPage ...................................................176
Использование редактора Fluent XAML Theme Editor ........................................178
Цвета ......................................................................................................................180
Формы ...................................................................................................................181
Использование галереи ресурсов UWP .................................................................182
Ресурсы и комплекты инструментов для текучего дизайна .............................184
Резюме .......................................................................................................................185
Вопросы .....................................................................................................................185
Глава 8. Построение WinUI-приложений в .NET 5 ............................186
Технические требования .........................................................................................187
Создание проекта WinUI в .NET 5 ..........................................................................187
Что такое WinUI in Desktop? ...............................................................................187
Создание нового проекта типа WinUI in Desktop ...........................................189
Структура проекта классического приложения ..................................................191
Добавление элемента управления WebView2 ..................................................192
Проект упаковки ......................................................................................................194
Визуальные активы в конструкторе манифеста .............................................195
Ссылка на библиотеки .NET 5 из проекта .............................................................197
Разделение библиотеки .NET 5 с WPF-приложением .........................................200
Создание библиотеки элементов управления WinUI .........................................203
Резюме .......................................................................................................................207
Вопросы .....................................................................................................................208
Глава 9. Улучшение приложений с помощью Windows
Community Toolkit .............................................................................................209
Технические требования .........................................................................................209
Введение в WCT ........................................................................................................210
Истоки WCT ..........................................................................................................210
Обзор последних выпусков комплекта инструментов ..................................211
Изучение демонстрационного приложения Windows Community Toolkit ......212
Установка и запуск демонстрационного приложения ...................................212
Элементы управления .........................................................................................214
Элементы управления WPF и WinForms ..........................................................217
Использование элементов управления из комплекта инструментов .............219
Создание проекта типа WinUI in Desktop ........................................................219
Ссылка на пакеты WCT........................................................................................222
Добавление данных в DataGrid ..........................................................................223
Добавление элементов управления в MainWindow ........................................224
Вспомогательные классы, службы и расширения, входящие в комплект
инструментов ...........................................................................................................226
Вспомогательные классы ....................................................................................227
Службы ..................................................................................................................228
Стр.11
Содержание 11
MVVM .....................................................................................................................230
Расширения ..........................................................................................................230
Резюме .......................................................................................................................231
Вопросы .....................................................................................................................232
Глава 10. Модернизация существующих приложений
Win32 с помощью островков XAML ........................................................233
Технические требования .........................................................................................234
Что такое островки XAML? .....................................................................................234
Модернизация приложения WinForms с помощью островков XAML ..............236
Создание проекта разделяемой библиотеки классов ....................................236
Создание объемлющего проекта WinForms ....................................................240
Модернизация WPF-приложения с помощью островков XAML .......................243
Использование элемента управления UWP MapControl
в WPF-приложении ..................................................................................................245
Использование браузерного элемента управления WebViewCompatible
в WPF-приложении ..................................................................................................249
Использование браузерного элемента управления WebView2
в приложении WinForms .........................................................................................251
Резюме .......................................................................................................................253
Вопросы .....................................................................................................................253
Часть III. СБОРКА И РАЗВЕРТЫВАНИЕ В WINDOWS,
И НЕ ТОЛЬКО ....................................................................................................254
Глава 11. Отладка WinUI-приложений в Visual Studio ...................255
Технические требования .........................................................................................256
Отладка в Visual Studio ............................................................................................256
Отладка локальных приложений ......................................................................256
Конструктор XAML ..........................................................................................257
Отладка локально установленного приложения ........................................259
Отладка удаленных приложений ......................................................................261
Типичные ошибки макета XAML .......................................................................264
Ошибки в макете Grid .....................................................................................264
Ошибки применения стиля ...........................................................................264
Улучшение XAML-разметки с помощью статического анализа кода ..........265
Как находить ошибки привязки к данным ..........................................................267
Типичные ошибки привязки к данным ...........................................................267
Выбор наилучшего режима привязки ..........................................................268
Генерирование уведомлений PropertyChanged ..........................................268
Работа с ObservableCollection ..................................................................268
Использование окна ошибок привязки XAML ................................................269
ValidateOnBuild проверяет, что для каждого зарегистрированного
сервиса зарегистрированы все его зависимости .........................................271
Стр.12
12 Содержание
Кодирование с применением горячей перезагрузки XAML ..............................272
Отладка с применением динамического дерева визуальных
объектов и динамического обозревателя свойств ..........................................273
Глава 12. Размещение приложения ASP.NET Core Blazor
в WinUI ....................................................................................................................279
Технические требования .........................................................................................279
Приступаем к работе с ASP.NET Core и Blazor......................................................280
Немного об истории ASP.NET и ASP.NET Core .................................................280
Что такое Blazor? ..................................................................................................281
WebAssembly и клиентская разработка на платформе .NET .........................282
Создание приложения Blazor Wasm ......................................................................283
Создание простого приложения для учета задач ...........................................286
Варианты развертывания приложений Blazor Wasm .........................................289
Варианты развертывания проектов Blazor Wasm ...........................................290
Amazon Web Services (AWS) ............................................................................290
GitHub Pages .....................................................................................................290
Azure App Service .............................................................................................291
Azure Static Web Apps ......................................................................................291
Резюме .......................................................................................................................278
Вопросы .....................................................................................................................278
Публикация приложения Blazor на Azure Static Web Apps .................................291
Отправка проекта на GitHub ..............................................................................292
Создание ресурса в службе Azure Static Web Apps ..........................................294
Публикация приложения с помощью действий GitHub ................................296
Размещение приложения Blazor в элементе управления WinUI
WebView2 ...................................................................................................................299
Резюме .......................................................................................................................300
Вопросы .....................................................................................................................300
Глава 13. Сборка, выпуск и мониторинг приложений
с помощью Visual Studio App Center .......................................................301
Технические требования .........................................................................................302
Приступаем к работе с Visual Studio App Center ..................................................302
Создание учетной записи в App Center ............................................................303
Создание первого приложения в App Center ...................................................306
Настройка сборки в App Center ..............................................................................309
Интеграция App Center с репозиторием GitHub .............................................310
Развертывание приложения с помощью App Center ..........................................313
Создание ранних релизов приложения для бета-тестеров ...........................314
Мониторинг и сбор аналитических данных о работе приложения .................317
Оснащение кода инструментальными средствами ........................................317
Сбор и анализ отчетов о сбоях в App Center ........................................................320
Резюме .......................................................................................................................322
Вопросы .....................................................................................................................322
Стр.13
Содержание 13
Глава 14. Упаковка и развертывание WinUI-приложений ............323
Технические требования .........................................................................................323
Основы упаковки приложений и технологии MSIX ............................................324
Что такое MSIX? ...................................................................................................324
Обзор инструментов и ресурсов MSIX ..............................................................326
Приступаем к упаковке приложения в Visual Studio ..........................................327
Распространение приложений с помощью диспетчера пакетов Windows .....331
Добавление пакета в общественный репозиторий ........................................332
Использование WinGet для управления пакетами .........................................334
Распространение приложений через Microsoft Store .........................................336
Подготовка бесплатного приложения к отправке в Microsoft Store ............336
Загрузка пакета в Store .......................................................................................340
Загрузка WinUI-приложений из сторонних источников с помощью MSIX ....343
Создание MSIX-пакета для загрузки из стороннего источника ...................343
Загрузка MSIX-пакета из стороннего источника ............................................344
Резюме .......................................................................................................................347
Вопросы .....................................................................................................................347
Ответы на вопросы ...........................................................................................348
Предметный указатель ...................................................................................352
Стр.14