Learn WinUI 3 E-Book

Alvin Ashcraft

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Veröffentlichungsjahr: 2023

Beschreibung

WinUI 3 takes a whole new approach to delivering Windows UI components and controls and has the ability to deliver the same features across multiple versions of Windows. Learn WinUI 3 is a comprehensive introduction to WinUI and Windows apps for anyone who is new to WinUI and XAML applications.
This updated second edition begins by helping you get to grips with the latest features in WinUI and shows you how XAML is used in UI development. The next set of chapters will help you set up a new Visual Studio environment, develop a new desktop project, incorporate the Model-View-ViewModel (MVVM) pattern in a WinUI project, and develop unit tests for ViewModel commands. Next, you’ll cover the basics of data access from WinUI projects with a step-by-step approach. As you advance, you’ll discover how to leverage the Fluent Design System to design beautiful WinUI applications. You’ll also explore the contents and capabilities of the Windows Community Toolkit and learn how to create cross-platform apps with markup and code from your project using Uno Platform. The concluding chapters will teach you how to build, debug, and deploy apps to the Microsoft Store.
By the end of this book, you’ll have learned how to build WinUI applications from scratch and how to modernize existing desktop apps using WinUI 3 and the Windows App SDK.

Leseprobe

Learn WinUI 3

Leverage WinUI and the Windows App SDK to create modern Windows applications with C# and XAML

Alvin Ashcraft

Learn WinUI 3

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Kunal Sawant

Publishing Product Manager: Teny Thomas

Book Project Manager: Prajakta Naik

Senior Editor: Ruvika Rao

Technical Editor: Maran Fernandes

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Tejal Daruwale Soni

Production Designer: Joshua Misquitta

DevRel Marketing Coordinator: Sonia Chauhan

First published: March 2021

Second edition: October 2023

Production reference: 1121023

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-80512-006-3

www.packtpub.com

To my wife, Stelene, for her love and her continued support in our life together. I’m looking forward to the journey ahead of us. To my three daughters for working hard and growing into amazing, talented young women. I can’t wait to see where life takes you all.

– Alvin Ashcraft

Contributors

About the author

Alvin Ashcraft is a senior content developer at Microsoft, working on the Windows developer documentation team on Microsoft Learn, with a focus on the Windows App SDK, .NET MAUI, Win32, and other desktop application technologies. Prior to this, Alvin spent over 25 years as a software developer and architect, most recently at Allscripts, a global healthcare software company, delivering electronic health record (EHR) software to healthcare systems across the world. He is the author of two previous books for Packt, the first edition of Learn WinUI 3 and Parallel Programming and Concurrency with C# 10 and .NET 6.

I want to thank my family – especially my wife, Stelene, and my daughters – for supporting me in my writing journey, which has become my new career.

About the reviewer

Peter Foot is a Windows and IoT consultant at In The Hand Ltd, where he handcrafts apps and APIs for mobile and IoT devices. Peter has over 20 years’ experience with .NET and Windows development, from the simple Pocket PC to the rich experiences of WinUI.

Peter has been awarded the Microsoft Most Valuable Professional (MVP) since 2003 for his involvement in the Microsoft .NET and Windows developer communities. Alongside involvement in other open source projects, Peter created and maintains the 32feet.NET library, which is a cross-platform .NET API for Bluetooth and other personal area networking technologies. Peter co-authored Microsoft Mobile Development Handbook and has written a host of technical articles and blog posts.

Table of Contents

Preface

Part 1: Introduction to WinUI and Windows Applications

1

Introduction to WinUI

Technical requirements

Before UWP – Windows 8 XAML applications

Windows application UI design

Windows Runtime (WinRT)

User backlash and the path forward to Windows 10

Windows 10 and UWP application development

Language choice with UWP development

Lifting app restrictions

UWP backward compatibility

What is XAML?

Creating an adaptive UI for any device

Powerful data binding

Styling your UI with XAML

Separating presentation from business logic

What is WinUI?

The first WinUI release

The road to WinUI 3

What’s new in WinUI 3?

Goodbye UWP?

New features for WinUI 3 and the Windows App SDK

The Windows App SDK and WinUI

WinUI 3 compared to other Windows development frameworks

WinUI versus UWP

WinUI versus WPF

WinUI versus Windows Forms (WinForms)

Summary

Questions

2

Configuring the Development Environment and Creating the Project

Technical requirements

Installing Visual Studio and Windows desktop development workloads

Introducing the application idea

Reviewing the application features

WinUI in Desktop projects

Creating your first WinUI project

Anatomy of a WinUI in Desktop project

Reviewing App.xaml

Reviewing App.xaml.cs

Reviewing MainWindow.xaml

Reviewing MainWindow.xaml.cs

Reviewing the project references

Reviewing the project properties

XAML basics

Building the model

Creating sample data

Building the initial UI

Completing the data-binding initialization

Creating the DataTemplate and binding the UI

Understanding WinUI and Windows App SDK

Understanding the .NET app model

Working with WinUI controls, properties, and events

Adding a ListView header

Creating the ComboBox filter

Adding a new item button

Summary

Questions

3

MVVM for Maintainability and Testability

Technical requirements

Understanding MVVM

MVVM – the big picture

MVVM libraries for WinUI

The MVVM Toolkit

The Prism Library

MVVMCross

Choosing a framework for WinUI applications

Understanding data binding in WinUI

What are markup extensions?

Binding markup extension

x:Bind markup extension

Updating View data with INotifyPropertyChanged

Updating collection data with INotifyCollectionChanged

Implementing MVVM in WinUI applications

Working with events and commands

Implementing ICommand

Using commands in the View Model

Updating the View

Leveraging the MVVM Toolkit

Summary

Questions

4

Advanced MVVM Concepts

Technical requirements

Understanding the basics of DI

Using DI with ViewModel classes

Leveraging x:Bind with events

Page navigation with MVVM and DI

Migrating MainWindow to MainPage

Adding ItemDetailsPage

Adding new interfaces and services

Creating a navigation service

Creating a data service

Increasing maintainability by consuming services

Handling parameters in ItemDetailsPage

Creating the ItemDetailsViewModel class

Summary

Questions

5

Exploring WinUI Controls

Technical requirements

Understanding what WinUI offers developers

Animated visual player (Lottie)

Navigation View

Parallax view

Rating control

Exploring the WinUI 3 Gallery app for Windows

Learning about the ScrollViewer control

Reviewing what’s new in WinUI 3 and the Windows App SDK

Backward compatibility

Fluent UI and modern look and feel

Visual Studio tooling

The WebView2 control

What’s new in the Windows App SDK

Adding some new controls to the project

Using the SplitButton control

Adding a TeachingTip control to the Save button

Summary

Questions

6

Leveraging Data and Services

Technical requirements

Managing application state with app lifecycle events

Exploring Windows application lifecycle events

Lifecycle events of WinUI applications

Additional lifecycle events with FrameworkElement objects

Creating a SQLite data store

What is SQLite?

Adding SQLite as a data service

Leveraging a Micro ORM to simplify data access

Adding Dapper to the project

Updating the data service’s initialization

Retrieving data via services

Summary

Questions

Part 2: Extending WinUI and Modernizing Applications

7

Fluent Design System for Windows Applications

Technical requirements

What is the Fluent Design System?

Exploring Fluent Design for Windows

Controls

Patterns

Layout

Input

Style

Incorporating Fluent Design in WinUI applications

Updating the title bar

Changing the style of MainPage

Changing the style of ItemDetailsPage

Using the Fluent XAML Theme Editor

Colors

Shapes

Acrylic material and the Fluent Design System

Use Mica in WinUI applications

Incorporate Mica into My Media Collection

Design resources and toolkits for Fluent Design

Summary

Questions

8

Adding Windows Notifications to WinUI Applications

Technical requirements

Overview of push notifications in the Windows App SDK

Raw push notifications

Cloud-based app notifications

Local app notifications

Using raw push notifications in WinUI applications

Adding Windows app notifications with the Windows App SDK

Summary

Questions

9

Enhancing Applications with Community Toolkits

Technical requirements

Introducing the WCT

Origins of the WCT

Reviewing recent toolkit releases

Exploring the WCT Gallery app

Installing and launching the app

Controls

Using controls from the toolkit

Creating the WinUI project

Referencing WCT packages

Adding data to the DataGrid control

Adding controls to the MainWindow control

Exploring the toolkit’s helpers, services, and extensions

Helpers

Extensions

.NET Community Toolkit features

Summary

Questions

10

Accelerating App Development with Template Studio

Technical requirements

Overview of Template Studio for WinUI

Starting a new WinUI project with Template Studio

Exploring the code generated by Template Studio

Exploring the Core project

Exploring the main project

Exploring the MSTest project

Template Studio extensions for other UI frameworks

Template Studio for WPF

Template Studio for Uno Platform

Summary

Questions

Part 3: Build and Deploy on Windows and Beyond

11

Debugging WinUI Applications with Visual Studio

Technical requirements

Debugging in Visual Studio

Debugging local applications

Debugging remote applications

Common XAML layout mistakes

Improving your XAML with static code analysis

Pinpointing data binding failures

Common mistakes in data binding

Using the XAML Binding Failures window

Debugging live data with Live Visual Tree and Live Property Explorer

Coding with XAML Hot Reload

Debugging with Live Visual Tree and Live Property Explorer

Summary

Questions

12

Hosting a Blazor Application in WinUI

Technical requirements

Getting started with ASP.NET Core and Blazor

A brief history of ASP.NET and ASP.NET Core

What is Blazor?

WebAssembly and client-side .NET development

Creating a Blazor Wasm application

Building a simple application for tracking tasks

Exploring Blazor Wasm deployment options

Deployment options for Blazor Wasm projects

Publishing Blazor to Azure Static Web Apps hosting

Pushing the project to GitHub

Creating an Azure Static Web Apps resource

Publishing an application with GitHub Actions

Hosting your Blazor application in the WinUI WebView2

Summary

Questions

13

Take Your App Cross-Platform with Uno Platform

Technical requirements

An overview of Uno Platform

Creating your first Uno Platform project

Migrating WinUI XAML markup and code to Uno Platform

Migrating the WinUI project code

Migrating the WinUI XAML views

Running on Android with WSA

Running in the browser with WebAssembly

Summary

Questions

14

Packaging and Deploying WinUI Applications

Technical requirements

Discovering application packaging and MSIX basics

MSIX

Reviewing MSIX tools and resources

Packaged applications and application identity

Getting started with application packaging in Visual Studio

Deploying applications with Windows Package Manager

Adding a package to the community repository

Using WinGet for package management

Distributing applications with the Microsoft Store

Preparing a free application for the Microsoft Store

Uploading a package to the Store

Sideloading WinUI applications with MSIX

Creating an MSIX package for sideloading

Sideloading an MSIX package

Summary

Questions

Index

Other Books You May Enjoy

Preface

WinUI 3 is the newest desktop UI framework for Windows application development. It is part of Microsoft’s Windows App SDK, providing developers with the tools to build beautiful apps with the Fluent Design System. This book will quickly get you up to speed with WinUI to build new Windows applications and to build apps across platforms with technologies such as Blazor and Uno Platform.

The book begins by exploring the history of Windows UI development frameworks to gain an understanding of how earlier frameworks influenced WinUI as it exists today. It covers the basics of XAML-based UI development and explores the controls available in WinUI before moving on to an examination of patterns and best practices for WinUI developers. To help reinforce these concepts, the early chapters in the book build practical skills by creating an application to organize a collection of books, music, and movies. Each chapter enhances the application, with new controls and concepts discussed.

Later chapters in the book explore how developers can leverage their WinUI knowledge to leverage open source toolkits, integrate web content in Windows apps, and migrate WinUI apps to Android, iOS, and the web. The book finishes by teaching some essential Visual Studio debugging techniques and discussing app deployment options to get your apps in the hands of consumers and enterprise users. At the end of every chapter, I've included a series of questions for you to attempt on your own, enabling you to gauge your level of understanding. Learn how WinUI can help you build and deploy modern, robust applications!

Who this book is for

This book is for anyone who wants to develop Windows applications with a modern user experience (UX). If you are familiar with Windows Forms, UWP, or WPF, and are looking to update your knowledge of Windows development or modernize existing apps, this book is for you. If you are just learning .NET development, you can take advantage of this book to learn the basics of XAML development in parallel with your C# and .NET journey.

What this book covers

Chapter 1, Introduction to WinUI, examines the history of UI frameworks in Windows and the origins of WinUI, and you will create your first WinUI 3 project in Visual Studio.

Chapter 2, Configuring the Development Environment and Creating the Project, explains how to install and configure Visual Studio for WinUI development, the basics of XAML and C#, and kicks off the hands-on with a project that will be enhanced throughout the book.

Chapter 3, MVVM for Maintainability and Testability, introduces the basics of Model-View-ViewModel (MVVM) pattern, one of the most important design patterns when building XAML-based applications.

Chapter 4, Advanced MVVM Concepts, builds on the basics you learned about the MVVM pattern in WinUI apps to handle more advanced techniques. You’ll learn how to keep components loosely coupled and testable when adding new dependencies to your projects.

Chapter 5, Exploring WinUI Controls, explores some of the many controls and APIs that WinUI offers for developers building Windows applications. This chapter explores the brand-new controls and updated controls that were previously available in WinUI 2 and UWP.

Chapter 6, Leveraging Data and Services, looks at managing data, a core part of software development. This chapter covers some key concepts of data management, including state management and the service locator pattern.

Chapter 7, Fluent Design System for Windows Applications, explains the tenets of Microsoft’s Fluent Design System and how to implement them in your WinUI applications.

Chapter 8, Adding Windows Notifications to WinUI Applications, covers how to leverage the Windows App SDK to support push notifications and app notifications in your WinUI applications.

Chapter 9, Enhancing Applications with the Windows Community Toolkits, introduces the Windows Community Toolkit and the .NET Community Toolkit – collections of open source libraries for Windows developers. You will learn how to leverage the controls and helpers from the toolkits in your WinUI projects.

Chapter 10, Accelerating App Development with Template Studio, shows how to leverage Template Studio to create a new WinUI project, which can be a daunting task, built on the best Windows development patterns and practices.

Chapter 11, Debugging WinUI Applications with Visual Studio, shows how to leverage the XAML debugging tools in Visual Studio to track down pesky bugs in your WinUI project – good debugging skills are essential for developers.

Chapter 12, Hosting a Blazor Application in WinUI, looks at the WebView2 control in WinUI and using it to host a Blazor application deployed to the cloud from inside your Windows application.

Chapter 13, Take Your App Cross-Platform with Uno Platform, explains how to migrate a WinUI project to Uno Platform, which allows developers to write XAML and C# code in a single code base and run it on any platform.

Chapter 14, Packaging and Deploying WinUI Applications, explores some of the multiple options WinUI developers have for packaging and deploying WinUI applications, looking at deploying through the Microsoft Store, WinGet, and side-loading apps.

To get the most out of this book

If you are familiar with Windows Forms, .NET MAUI, UWP, or WPF and are looking to enhance your knowledge of Windows development or modernize existing apps, you will find this book useful. Hands-on experience with C# and .NET is expected but no prior knowledge of WinUI is required.

Software/hardware covered in the book

Operating system requirements

WinUI 3

Windows 10 version 1809 or later or Windows 11

C#

Windows, macOS, or Linux

.NET 7

Windows, macOS, or Linux

Visual Studio 2022

Windows 10 or 11

Blazor

Windows, macOS, or Linux

Uno Platform

Windows, macOS, or Linux

The book covers how to get started with WinUI development, but you should have Visual Studio and .NET installed. Follow the instructions on Microsoft Learn: https://learn.microsoft.com/visualstudio/install/install-visual-studio.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

After you read this book, you can continue your Windows development journey by diving deeper into the documentation and samples on Microsoft Learn: https://learn.microsoft.com/windows/apps/.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Learn-WinUI-3-Second-Edition. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “In INavigationService, you can update the namespace to UnoMediaCollection.Interfaces and remove the using System; statement.”

A block of code is set as follows:

using UnoMediaCollection.Enums; using UnoMediaCollection.Interfaces; using UnoMediaCollection.Model;

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

using UnoMediaCollection.Enums; namespace UnoMediaCollection.Model

Any command-line input or output is written as follows:

$ mkdir css $ cd css

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Right-click the Enums folder and select Add | Existing Item.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share your thoughts

Once you’ve read Automate Testing for Power Apps, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781805120063

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1:Introduction to WinUI and Windows Applications

WinUI 3 is Microsoft’s latest UI framework for Windows developers. This section will start by exploring the recent history of XAML and Windows UI frameworks and introduce you to WinUI. Throughout the chapters of this section, you will learn about WinUI concepts by building a simple project from scratch and adding controls and features, by following design patterns and best practices. These patterns and practices include the Model-View-ViewModel (MVVM) design pattern, building loosely coupled, testable C# classes, and using dependency injection (DI) to inject service dependencies into the application components.

This part has the following chapters:

Chapter 1, Introduction to WinUIChapter 2, Configuring the Development Environment and Creating the ProjectChapter 3, MVVM for Maintainability and TestabilityChapter 4, Advanced MVVM ConceptsChapter 5, Exploring WinUI ControlsChapter 6, Leveraging Data and Services