Sdílet prostřednictvím

Kurz: Vytvoření první aplikace Windows App SDK v sadě Visual Studio pomocí XAML a jazyka C#

  • Článek

V tomto úvodu do integrovaného vývojového prostředí (IDE) sady Visual Studio vytvoříte aplikaci Hello World, která běží na jakémkoli zařízení s Windows 10 nebo novějším. K tomu použijete šablonu projektu sady Windows App SDK (WinUI 3), jazyk XAML (Extensible Application Markup Language) a programovací jazyk C#.

Poznámka:

WinUI 3 je nativní komponenta platformy uživatelského rozhraní, která se dodává se sadou Windows App SDK (zcela oddělená od sad WINDOWS SDK). Další informace naleznete v tématu WinUI 3.

Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.

Vytvoření projektu

Nejprve vytvořte projekt WinUI 3. Typ projektu obsahuje všechny soubory šablony, které potřebujete, ještě předtím, než něco přidáte.

Důležité

Visual Studio 2019 podporuje jenom Sadu Windows App SDK 1.1 a starší. Visual Studio 2022 se doporučuje pro vývoj aplikací se všemi verzemi sady Windows App SDK.

Šablony sady Windows App SDK 1.1.x jsou k dispozici instalací rozšíření sady Visual Studio (VSIX).

Poznámka:

Pokud už máte nainstalované rozšíření Sady Visual Studio sady Windows App SDK (VSIX), odinstalujte ho před instalací jiné verze. Pokyny najdete v tématu Správa rozšíření pro Visual Studio.

  • Ze sady Visual Studio můžete nainstalovat nejnovější stabilní verzi VSIX verze 1.1.x. Vyberte Rozšíření>Spravovat rozšíření, vyhledejte sadu Windows App SDK a stáhněte si rozšíření Windows App SDK. Zavřete a znovu otevřete Visual Studio a podle pokynů nainstalujte rozšíření. Nezapomeňte nainstalovat šablony pro Sadu Windows App SDK 1.1.
  • Případně můžete rozšíření stáhnout přímo ze sady Visual Studio Marketplace a nainstalovat ho:

Stažení šablon sady Windows App SDK C# SDK VS2019

Po instalaci rozšíření šablon můžete vytvořit svůj první projekt. Další informace o podpoře sady Visual Studio 2019 najdete v tématu Instalace nástrojů pro sadu Windows App SDK. Ve zbývající části tohoto kurzu se předpokládá, že používáte Visual Studio 2022.

  1. Otevřete Visual Studio a v úvodním okně zvolte Vytvořit nový projekt.

  2. Na obrazovce Vytvořit nový projekt zadejte do vyhledávacího pole WinUI, zvolte šablonu jazyka C# pro prázdnou aplikaci, zabalenou (WinUI 3 v desktopové verzi) a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Poznámka:

    Pokud nevidíte šablonu projektu Prázdná aplikace, zabalená (WinUI 3 v desktopové verzi), klikněte na odkaz Instalovat další nástroje a funkce .

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Spustí se instalační program pro Visual Studio. Zvolte úlohu Vývoj pro .NET Desktop a potom v podokně Podrobností o instalaci dialogového okna instalace vyberte šablony C# sady Windows App SDK (v dolní části seznamu). Teď vyberte Upravit.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Pojmenujte projekt HelloWorld a zvolte Vytvořit.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Poznámka:

    Pokud jste k vytvoření aplikace Windows App SDK použili Visual Studio poprvé, může se zobrazit dialogové okno Nastavení. Zvolte Vývojářský režim a pak zvolte Ano.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    Visual Studio za vás nainstaluje další balíček vývojářského režimu. Po dokončení instalace balíčku zavřete dialogové okno Nastavení.

Vytvoření aplikace

Je čas začít vyvíjet. Přidáte ovládací prvek tlačítka, přidáte do něj akci a pak spustíte aplikaci Hello World, abyste viděli, jak vypadá.

Přidání tlačítka na plátno návrhu

  1. V Průzkumník řešení poklikáním na MainWindow.xaml otevřete editor značek XAML.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

    Editor XAML je místo, kde můžete přidávat nebo měnit revize. Na rozdíl od projektů UPW nemá WinUI 3 návrhové zobrazení.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Zkontrolujte ovládací prvek Button vnořený v objektu StackPanel v kořenovém adresáři okna.

    Screenshot showing 'Button' highlighted in the XAML editor.

Změna popisku na tlačítku

  1. V editoru XAML změňte hodnotu obsahu tlačítka z "Click me" na "Hello World!".

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Všimněte si, že tlačítko má obslužnou rutinu události Click s názvem myButton_Click také zadána. K tomu se dostaneme v dalším kroku.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Úprava obslužné rutiny události

Obslužná rutina události zní složitě, ale je to jen další název kódu, který se volá, když dojde k události. V tomto případě přidá akci aktivovanou tlačítkem "Hello World!".

  1. V Průzkumník řešení poklikejte na MainWindow.xaml.cs, na stránce s kódem.

  2. Upravte kód obslužné rutiny události v okně editoru C#, které se otevře.

    Tady je místo, kde jsou věci zajímavé. Výchozí obslužná rutina události vypadá takto:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Pojďme ho změnit, aby vypadal takto:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Tady je kód, který chcete zkopírovat a vložit:

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

Co jsme udělali?

Kód používá ovládací prvek ContentDialog k zobrazení uvítací zprávy v modální místní ovládací prvek v aktuálním okně. (Další informace o použití Microsoft.UI.Xaml.Controls.ContentDialognaleznete v tématu ContentDialog – třída.)

Spuštění aplikace

Je čas sestavit, nasadit a spustit aplikaci "Hello World" sady Windows App SDK, abyste viděli, jak vypadá. Postupujte následovně.

  1. Pomocí tlačítka Přehrát (obsahuje text HelloWorld (balíček)) spusťte aplikaci na místním počítači.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Alternativně můžete zvolit Ladění>spustit ladění z řádku nabídek nebo stisknutím klávesy F5 spusťte aplikaci.)

  2. Zobrazte si aplikaci, která se zobrazí brzy po tom, co úvodní obrazovka zmizí. Aplikace by měla vypadat podobně jako na tomto obrázku:

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Vyberte tlačítko Hello World.

    Vaše zařízení s Windows 10 nebo novějším zobrazí zprávu "Vítejte v první aplikaci Windows App SDK" s názvem "Hello from HelloWorld". Kliknutím na ok zprávu zavřete.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Aplikaci zavřete tak, že na panelu nástrojů vyberete tlačítko Zastavit ladění . (Případně zvolte Ladění>zastavit ladění z řádku nabídek nebo stiskněte Shift+F5.)

Další kroky

Blahopřejeme k dokončení tohoto kurzu! Doufáme, že jste se naučili některé základní informace o sadě Windows App SDK, WinUI 3 a integrovaném vývojovém prostředí sady Visual Studio. Další informace najdete v následujícím kurzu:

Kurz: Vytvoření jednoduchého prohlížeče fotek pomocí WinUI 3

Viz také