1. diel - Úvod do Windows App SDK a WinUI 3

Vitajte pri prvej lekcii kurzu, v ktorom sa naučíme v jazyku C# .NET vytvárať moderné desktopové, alebo tiež formulárové či okenné, aplikácie pre systémy Windows 10 a Windows 11. Budeme pracovať nielen s tlačidlami, textovými poľami, zoznamami, ale aj s obrázkami, dialógmi a ďalšími ovládacími prvkami, ktoré máme v týchto aplikáciách k dispozícii. Naša aplikácia budeme tvoriť pomocou technológií Windows App SDK a WinUI 3.

Požiadavky na znalosti

Tento kurz predpokladá znalosti v rozsahu kurzov:

• Základná konštrukcia jazyka C# .NET
• Objektovo orientované programovanie v C# .NET
• Kolekcie a LINQ v C# .NET
• Súbory v C# .NET

Windows App SDK

Windows App Software Development Kit, alebo len Windows App SDK, je súbor knižníc a nástrojov určený na tvorbu moderných Windows aplikácií. Hlavným cieľom tejto technológie je poskytnúť jednotné aplikačné rozhranie, čiže API, pre prístup k funkcionalitám poskytovaných operačným systémom Windows.

V tomto kontexte budeme API (A pplication P rogramming Interface) chápať ako triedy a ich metódy, ktoré máme v .NET k dispozícii a pomocou ktorých môžeme nejakú funkcionalitu používať.

Medzi funkcionality poskytované operačným systémom patria napríklad:

• práca s procesmi, vláknami, pamäťou, súborovým systémom alebo sieťou,
• práca s oknami,
• vykresľovanie obsahu okna,
• príjem a spracovanie užívateľských vstupov (myš, klávesnica...),
• správa životného cyklu aplikácie,
• zobrazovanie notifikácií a mnohé ďalšie.

Tým, ako sa operačný systém Windows časom vyvíjal, vznikli pre rovnaké funkcionality rôzne ich implementácie a teda aj rôzne API. Tieto API navyše nie sú vždy prístupné alebo jednotné naprieč rôznymi verziami Windows.

Práve tieto problémy sa snažia Windows App SDK vyriešiť. Umožňuje jednotným spôsobom pristupovať ako k starším, tak aj k moderným funkcionalitám, a to nezávisle od konkrétnej verzie Windows používanej užívateľom. Windows App SDK totiž nie je súčasťou Windows, do našich aplikácií ho dodatočne inštalujeme ako knižnice. Windows App SDK podporuje všetky verzie Windows 11 a Windows 10 od verzie 1809.

Viac informácií o Windows App SDK a motiváciách jeho vzniku nájdeme v oficiálnej dokumentácii alebo repositári.

WinUI 3

Windows App SDK poskytuje framework zvaný WinUI 3 pre tvorbu bohatého používateľského rozhrania desktopových Windows aplikácií. Užívateľským rozhraním chápeme časť aplikácie, ktorú vidí používateľ as ktorou priamo interaguje. V prípade desktopových aplikácií sa tak jedná predovšetkým o samotné okno aplikácie a tlačidlá, textové polia, popisky a ďalšie prvky v ňom.

Windows App SDK je možné integrovať aj do aplikácií vytvorených napríklad pomocou frameworkov WPF (viac v kurze WPF - Okenné aplikácie v C# .NET) alebo Windows Forms (viac v kurze Windows Forms - Okenné aplikácie v C# .NET). Toto riešenie je však určené primárne pre už existujúce aplikácie, ktoré chceme obohatiť o modernú funkcionalitu. Nové aplikácie Microsoft odporúča vytvárať rovno pomocou WinUI 3.

Komponentová architektúra

WinUI 3 nám ponúka množstvo hotových komponentov, z ktorých užívateľské rozhranie jednoducho poskladáme. Ide o rôzne tlačidlá, polia, posuvníky, popisky a ďalšie komponenty, ktoré Microsoft označuje ako controls (po slovensky asi ovládacie prvky alebo niekedy "kontrolky"). Framework nám samozrejme nebráni v tvorbe vlastných ovládacích prvkov, to ale nie je príliš často nutné. Všetky ovládacie prvky sa v predvolenom nastavení držia moderného Fluent designu a zapadajú tak do celého vizuálu prostredia Windows. Počas kurzu si rad ovládacích prvkov popíšeme a naučíme sa s nimi pracovať.

Príklady WinUI 3 aplikácií

Ukážme si pár obrázkov aplikácií vytvorených pomocou frameworku WinUI 3, nech máme aspoň približnú predstavu, čoho je táto technológia schopná:

Microsoft Fotografie vo Windows .<>

Prieskumník súborov vo Windows 11 .<>

WinUI 3 Gallery – aplikácia predstavujúca jednotlivé komponenty WinUI 3

Príprava Visual Štúdia

Pre vývoj WinUI 3 aplikácií použijeme Visual Studio 2022 alebo novší. Je nutné v ňom mať nainštalovanú sadu funkcií Vývoj aplikácií pre systém Windows. To overíme nahliadnutím do Visual Studio Installer, cez ktorý sme si Visual Studio inštalovali. Spustíme teda Visual Studio Installer, nájdeme nami používanú inštaláciu Visual Studio a klikneme na Zmeniť:

Otvorí sa nám okno so všetkými dostupnými sadami funkcií a komponentmi. K rovnakému oknu sa prípadne môžeme dostať kliknutím na položku Tools v aplikačnom menu Visual Studio a voľbou položky Get Tools and Features…. Uistíme sa, že máme zaškrtnutú sadu Vývoj aplikácií pre systém Windows, prípadne ju zaškrtneme a potvrdíme jej inštaláciu:

Pokiaľ je to možné, Visual Studio si ešte aktualizujeme, aby sme mali aktuálnu verziu .NET a všetkých nástrojov.

Prvá desktopová aplikácia

Ako prvú WinUI 3 aplikáciu si vytvoríme klasickú "Hello world" aplikáciu, ktorej jediným účelom bude vypísanie textu. Otvoríme Visual Studio a založíme si nový projekt typu Blank app, Packaged (WinUI 3 in Desktop):

Ako názov zadáme napríklad HelloWinUI a potvrdíme:

Spustenie aplikácie

Vygeneroval sa nám WinUI 3 projekt s jednoduchou ukážkovou aplikáciou. Spustite si ju kliknutím na zelenú šípku v hornej lište Visual Studia:

Aplikácia obsahuje iba jedno tlačidlo, ktorého obsah sa po kliknutí zmení na Clicked:

Predvolené adresáre a súbory

V projekte sa nám vygenerovalo pár východiskových adresárov a súborov:

Pre nás sú najzaujímavejšie:

• Assets/ – adresár pre obrázky, ikony, fonty a ďalšie súbory, ktoré chceme v aplikácii používať,
• Package.appxmanifest – súbor obsahujúci rôzne metadáta aplikácie, ako je napríklad jej názov, popis, predvolený jazyk, rôzne typy ikon alebo určenie funkcionalít systému, ktoré aplikácia vyžaduje pre svoj chod,
• App.xaml a App.xaml.cs – súbory, ktorých obsah reprezentuje celú aplikáciu,
• MainWindow.xaml a MainWindow.xaml.cs – súbory, ktorých obsah reprezentuje hlavné okno aplikácie.

Hlavné okno MainWindow

Vo WinUI 3 sú všetky komponenty aplikácie typicky tvorené dvoma súbormi:

• XAML súbor popisujúci vzhľad a obsah komponentu pomocou značkovacieho jazyka XAML, súbor teda predstavuje prezentačnú časť daného komponentu,
• a C# súbor obsahujúci triedu s logikou komponentu – táto trieda a jej kód sa tiež označuje ako code behind.

Každý komponent je vždy tvorený C# triedou a prípadne nepovinne ešte aj jedným XAML súborom.

Code behind

Pozrime sa do súboru MainWindow.xaml.cs, teda na code behind hlavného okna aplikácie:

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óde je hlavné okno aplikácie reprezentované triedou MainWindow, ktorá dedí od triedy Window. S code behind budeme pracovať až v budúcich lekciách. Zatiaľ tu iba zmažeme metódu myButton_Click():

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

Táto metóda rieši zmenu obsahu tlačidla pri kliknutí na Clicked. Tlačidlo a teda ani túto metódu však nebudeme potrebovať.

XAML

Teraz si otvoríme súbor MainWindow.xaml so XAML kódom 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 tu elementy:

• <Window> – samotné okno,
• <StackPanel> – slúži na vkladanie obsahu vedľa seba,
• a <Button> – tlačidlo.

XAML a tieto elementy si bližšie popíšeme ďalej v kurze. Ako už bolo povedané, v našej jednoduchej "Hello world" aplikácii budeme chcieť vypísať iba krátky text Pozdrav z WinUI 3 aplikace. Využijeme na to element <TextBlock>, ktorým nahradíme tlačidlo <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>

Iné .NET frameworky, ako je napríklad WPF, umožňujú celú aplikáciu naklikať iba pomocou grafického návrhára vo Visual Studiu a vyhnúť sa tak písaniu XAML kódu. WinUI 3 žiadny takýto návrhár zatiaľ neposkytuje. To však vôbec nie je na škodu, pretože v praxi sa takýchto návrhárov zle ovládajú a často generujú príliš zložitý kód. Niektoré veci tiež nemožno urobiť inak, než kódom. To nie je úplne chyba Visual Studia, je to známa vlastnosť väčšiny grafických editorov (hovorí sa im WYSIWYG editory), čo generujú nejaké XML. Programu jednoducho nemožno jednoduchým klikaním oznámiť, ako presne chceme ovládacie prvky umiestniť.

Výsledok

Aplikáciu spustíme, bude vyzerať asi takto:

Máme hotovú svoju prvú WinUI 3 aplikáciu, gratulujem! Zdrojové kódy tejto aplikácie máte prípadne nižšie na stiahnutie.

V nasledujúcej lekcii, Jazyk XAML vo WinUI 3 a C# .NET , sa bližšie pozrieme na jazyk XAML, ktorý sa používa na návrh komponentov vo WinUI 3. Spomenieme elementy, menné priestory a entity.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.