Lekce 1 - Úvod do Windows App SDK a WinUI 3

Vítejte u první lekce kurzu, ve kterém se naučíme v jazyce C# .NET vytvářet moderní desktopové nebo též formulářové či okenní aplikace pro systémy Windows 10 a Windows 11. Budeme pracovat nejen s tlačítky, textovými poli a seznamy, ale i s obrázky, dialogy a dalšími ovládacími prvky, které máme v těchto aplikacích k dispozici. Naše aplikace budeme tvořit pomocí technologií Windows App SDK a WinUI 3.

Požadavky na znalosti

Tento kurz předpokládá znalosti v rozsahu kurzů:

• Základní konstrukce jazyka C# .NET,
• Objektově orientované programování v C# .NET,
• Kolekce a LINQ v C# .NET,
• Soubory v C# .NET.

Windows App SDK

Windows App Software Development Kit nebo jen Windows App SDK je soubor knihoven a nástrojů určený ke tvorbě moderních Windows aplikací. Hlavním cílem této technologie je poskytnout jednotné aplikační rozhraní neboli API pro přístup k funkcionalitám poskytovaným operačním systémem Windows.

V tomto kontextu budeme API (Application Programming Interface) chápat jako třídy a jejich metody, které máme v .NET k dispozici a pomocí kterých můžeme nějakou funkcionalitu používat.

Mezi funkcionality poskytované operačním systémem patří například:

• práce s procesy, vlákny, pamětí, souborovým systémem nebo sítí,
• práce s okny,
• vykreslování obsahu okna,
• příjem a zpracování uživatelských vstupů (myš, klávesnice…),
• správa životního cyklu aplikace,
• zobrazování notifikací a mnohé další.

Tím, jak se operační systém Windows časem vyvíjel, vznikly pro stejné funkcionality jejich různé implementace, a tedy i různá API. Tato API navíc nejsou vždy přístupná nebo jednotná napříč různými verzemi Windows.

Právě tyto problémy se snaží Windows App SDK vyřešit. Umožňuje jednotným způsobem přistupovat jak ke starším, tak i k moderním funkcionalitám, a to nezávisle na konkrétní verzi Windows používané uživatelem. Windows App SDK totiž není součástí Windows, do našich aplikací jej dodatečně instalujeme jako knihovny. Windows App SDK podporuje všechny verze Windows 11 a Windows 10 od verze 1809.

Více informací o technologii Windows App SDK a motivacích jejího vzniku nalezneme v oficiální dokumentaci nebo repositáři.

WinUI 3

Windows App SDK poskytuje framework zvaný WinUI 3 pro tvorbu bohatého uživatelského rozhraní desktopových Windows aplikací. Uživatelským rozhraním chápeme část aplikace, kterou vidí uživatel a se kterou přímo interaguje. V případě desktopových aplikací se tak jedná především o samotné okno aplikace a tlačítka, textová pole, popisky a další prvky v něm.

Windows App SDK lze integrovat i do aplikací vytvořených například pomocí frameworků WPF (více v kurzu WPF - Okenní aplikace v C# .NET) nebo Windows Forms (více v kurzu Windows Forms - Okenní aplikace v C# .NET). Toto řešení je však určené primárně pro již existující aplikace, které chceme obohatit o moderní funkcionality. Nové aplikace Microsoft doporučuje vytvářet rovnou pomocí WinUI 3.

Komponentová architektura

WinUI 3 nám nabízí spoustu hotových komponent, ze kterých uživatelské rozhraní jednoduše poskládáme. Jedná se o různá tlačítka, pole, posuvníky, popisky a další komponenty, které Microsoft označuje jako controls (česky ovládací prvky nebo někdy též „kontrolky“). Framework nám samozřejmě nebrání ve tvorbě vlastních ovládacích prvků, což však není příliš často nutné. Všechny ovládací prvky se ve výchozím nastavení drží moderního Fluent designu a zapadají tak do celého vizuálu prostředí Windows. Během kurzu si řadu ovládacích prvků popíšeme a naučíme se s nimi pracovat.

Příklady WinUI 3 aplikací

Ukažme si pár obrázků aplikací vytvořených pomocí frameworku WinUI 3, ať máme alespoň přibližnou představu, čeho je tato technologie schopná:

Microsoft Fotografie ve Windows

Průzkumník souborů ve Windows 11

WinUI 3 Gallery – aplikace představující jednotlivé komponenty WinUI 3

Příprava Visual Studia

Pro vývoj WinUI 3 aplikací použijeme Visual Studio 2022 nebo novější. Je nutné v něm mít nainstalovanou sadu funkcí Vývoj aplikací pro systém Windows. To ověříme nahlédnutím do Visual Studio Installer, prostřednictvím nějž jsme si Visual Studio nainstalovali. Spustíme tedy Visual Studio Installer, najdeme námi používanou instalaci Visual Studia a klikneme na Změnit:

Otevře se nám okno se všemi dostupnými sadami funkcí a komponentami. Ke stejnému oknu se případně můžeme dostat kliknutím na položku Tools v aplikačním menu Visual Studia a volbou položky Get Tools and Features…. Ujistíme se, že máme zaškrtnutou sadu Vývoj aplikací pro systém Windows, případně ji zaškrtneme a potvrdíme její instalaci:

Je-li to možné, Visual Studio si ještě aktualizujeme, abychom měli aktuální verzi .NET a všech nástrojů.

První desktopová aplikace

Jako první WinUI 3 aplikaci si vytvoříme klasickou "Hello world" aplikaci, jejímž jediným účelem bude vypsání textu. Otevřeme Visual Studio a založíme si nový projekt typu Blank App, Packaged (WinUI 3 in Desktop):

Jako název zadáme třeba HelloWinUI a potvrdíme:

Spuštění aplikace

Vygeneroval se nám WinUI 3 projekt s jednoduchou ukázkovou aplikací. Spusťme si ji kliknutím na zelenou šipku v horní liště Visual Studia:

Aplikace obsahuje pouze jedno tlačítko, jehož obsah se po kliknutí změní na Clicked:

Výchozí adresáře a soubory

V projektu se nám vygenerovalo pár výchozích adresářů a souborů:

Pro nás jsou nejzajímavější:

• Assets/ – Adresář pro obrázky, ikony, fonty a další soubory, které chceme v aplikaci používat.
• Package.appxmanifest – Soubor obsahující různá metadata aplikace, jako je například její název, popis, výchozí jazyk, různé typy ikon nebo určení funkcionalit systému, které aplikace vyžaduje pro svůj chod.
• App.xaml a App.xaml.cs – Soubory, jejichž obsah reprezentuje celou aplikaci.
• MainWindow.xaml a MainWindow.xaml.cs – Soubory, jejichž obsah reprezentuje hlavní okno aplikace.

Hlavní okno MainWindow

Ve WinUI 3 jsou všechny komponenty aplikace typicky tvořeny dvěma soubory:

• XAML souborem popisujícím vzhled a obsah komponenty pomocí značkovacího jazyka XAML. Tento soubor tedy představuje prezentační část dané komponenty.
• C# souborem obsahujícím třídu s logikou komponenty – tato třída a její kód se též označují jako code behind.

Každá komponenta je vždy tvořena C# třídou a případně nepovinně ještě jedním XAML souborem.

Code behind

Podívejme se do souboru MainWindow.xaml.cs, tedy na code behind hlavního okna aplikace:

namespace HelloWinUI
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Clicked";
        }
    }
}

Vidíme, že v C# kódu je hlavní okno aplikace reprezentováno třídou MainWindow, která dědí od třídy Window. S code behind budeme pracovat až v budoucích lekcích. Zatím zde pouze smažeme metodu myButton_Click():

namespace HelloWinUI
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }
    }
}

Tato metoda řeší změnu obsahu tlačítka při kliknutí na Clicked. Tlačítko ani tuto metodu tedy nebudeme potřebovat.

XAML

Nyní si otevřeme soubor MainWindow.xaml se XAML kódem okna:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="HelloWinUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

Vidíme zde elementy:

• <Window> – samotné okno,
• <StackPanel> – slouží pro vkládání obsahu vedle sebe,
• <Button> – tlačítko.

XAML a tyto elementy si blíže popíšeme dále v kurzu. Jak již bylo řečeno, v naší jednoduché "Hello world" aplikaci budeme chtít vypsat pouze krátký text Pozdrav z WinUI 3 aplikace. Využijeme k tomu element <TextBlock>, jímž nahradíme tlačítko <Button>:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="HelloWinUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock>Pozdrav z WinUI 3 aplikace</TextBlock>
    </StackPanel>
</Window>

Jiné .NET frameworky, jako je například WPF, umožňují celou aplikaci naklikat pouze pomocí grafického návrháře ve Visual Studiu a vyhnout se tak psaní XAML kódu. WinUI 3 žádný takový návrhář zatím neposkytuje. To však vůbec není na škodu, protože v praxi se takové návrháře špatně ovládají a často generují příliš složitý kód. Některé věci také nelze udělat jinak než kódem. To není úplně chyba Visual Studia, je to známá vlastnost většiny grafických editorů (říká se jim WYSIWYG editory), které generují nějaké XML. Programu jednoduše nelze pouhým klikáním sdělit, jak přesně chceme ovládací prvky umístit.

Výsledek

Aplikaci spusťme, bude vypadat asi takto:

Nyní máme hotovou svou první WinUI 3 aplikaci, gratulujeme! Zdrojové kódy této aplikace máte případně níže ke stažení.

V příští lekci, Jazyk XAML ve WinUI 3 a C# .NET, se blíže podíváme na jazyk XAML, který se používá k návrhu komponent ve WinUI 3. Zmíníme elementy, jmenné prostory a entity.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.