Vytvoření aplikace Hello World pomocí C# a WinUI 3 / Windows App SDK

V tomto postupu použijeme Sadu Visual Studio 2022 a WinUI 3 / Windows App SDK k vytvoření desktopové aplikace pro Windows, která při spuštění zobrazí "Hello world!":

Tento postup se zaměřuje na začátečníky a nepředpokládá vaše znalosti vývoje desktopových aplikací pro Windows.

Požadavky

Tento kurz používá Visual Studio a vychází z templat prázdné aplikace WinUI 3. Nastavení: Postupujte podle pokynů v tématu Začněte s WinUI. Nainstalujete Visual Studio, nakonfigurujete ho pro vývoj aplikací pomocí WinUI, vytvoříte projekt Hello World a ujistíte se, že máte nejnovější verzi WinUI.

Až to uděláte, vraťte se sem, abyste se dozvěděli více o projektu Hello World a aktualizovali ho.

Kontrola prázdného projektu aplikace

Šablony projektů WinUI v sadě Visual Studio obsahují vše, co potřebujete k sestavení a spuštění aplikace. Šablona Prázdná aplikace vytvoří okno s interaktivním tlačítkem, které vypadá takto, když ji spustíte v režimu ladění.

Kliknutím na tlačítko Click Me zobrazíte ukázku zpracování události .

V tomto případě je událost button ovládacího prvku Click vázána na obslužnou rutinu myButton_Click událostí umístěnou v MainWindow.xaml.cs:

I když MainWindow.xaml.cs obsahuje obchodní logiku našeho hlavního okna, obavy ve formě souboru s kódem, prezentaci živě v MainWindow.xaml:

Toto oddělení obchodní logiky a prezentačních aspektů vám umožňuje propojit data a události s uživatelským rozhraním vaší aplikace pomocí konzistentního modelu vývoje aplikací.

Struktura souborů projektu

Před provedením změn kódu si projdeme strukturu souborů projektu. Nachází se v průzkumníku řešení .

Spropitné

Pokud chcete vyhledat funkce, jako je Průzkumník řešení, klikněte na navigačním panelu hledání a použijte možnost Hledání funkcí.

Struktura souborů projektu aktuálně vypadá takto:

Přehled struktury souborů

Tato tabulka popisuje soubory, začíná se vrchní částí a pokračuje se dolů.

Název souboru a Referenční číslo obrázku	Popis
Solution 'Hello World' 1.	Toto jesoubor řešení , logický kontejner pro projekty . Projekty jsou často aplikace, ale můžou také podporovat knihovny tříd.
Hello World 2.	Toto je soubor projektu, logický kontejner pro soubory vaší aplikace.
Dependencies 3.	Vaše aplikace závisí na architekturách (například .NET a Windows SDK) a balíčcích (například Windows App SDK). Když do své aplikace představíte sofistikovanější funkce a knihovny třetích stran, zobrazí se zde další závislosti.
Properties 4.	Podle konvence mají projekty WinUI 3 v této složce uložené publikační profily a spouštěcí konfigurační soubory.
PublishProfiles 5.	Profily publikování určují konfiguraci publikování vaší aplikace na různých platformách.
launchSettings.json 6.	Tento soubor umožňuje konfigurovat profily spuštění , které je možné použít při spuštění aplikace prostřednictvím dotnet run.
Assets 7.	Tato složka obsahuje logo, obrázky a další multimediální prostředky vaší aplikace.
app.manifest 8.	Tento soubor manifestu aplikace obsahuje konfiguraci související se způsobem, jakým Windows zobrazuje vaši aplikaci při instalaci na uživatelských zařízeních.
App.xaml 9.	Tento značkový soubor určuje sdílené a globálně přístupné prostředky, na které vaše aplikace závisí.
App.xaml.cs 10.	Tento soubor s kódem představuje vstupní bod obchodní logiky vaší aplikace. Zodpovídá za vytvoření a aktivaci instance vašeho MainWindow.
MainWindow.xaml 11.	Tento soubor se značkami obsahuje aspekty prezentace hlavního okna vaší aplikace.
MainWindow.xaml.cs 12.	Tento soubor s kódem obsahuje aspekty obchodní logiky spojené s hlavním oknem vaší aplikace.
Package.appxmanifest 13.	Tento soubor manifestu balíčku umožňuje nakonfigurovat informace o vydavateli, loga, architektury procesoru a další podrobnosti, které určují, jak se aplikace zobrazuje ve Windows Storu.

Zobraz "Ahoj světe!"

Pokud chcete místo tlačítka Kliknout na mě zobrazit "Hello world!", přejděte na MainWindow.xaml. Měl by se zobrazit kód XAML ovládacího prvku StackPanel:

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

Spropitné

Při vytváření aplikací pro Windows často odkazujete na referenční dokumentaci k rozhraní API . Referenční dokumentace k StackPanelu vám řekne více o ovládacím prvku StackPanel a o tom, jak ho přizpůsobit.

Pojďme aktualizovat ovládací prvek StackPanel tak, aby zobrazoval Hello world! červeným textem:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Pokud se pokusíte spustit aplikaci nyní, Visual Studio vyvolá chybu v řádcích The name 'myButton' does not exist in the current context. Je to proto, že jsme prezentační vrstvu aktualizovali pomocí nového ovládacího prvku, ale v souboru kódu jsme neaktualizovali obchodní logiku starého ovládacího prvku.

Přejděte na MainWindow.xaml.cs a odstraňte obslužnou rutinu události myButton_Click. Můžeme to udělat, protože jsme nahradili interaktivní tlačítko Click me statickým Hello world! textem. Obchodní logika našeho hlavního okna by teď měla vypadat takto:

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

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Aplikaci resetujte tak, že v nabídce vyberete Sestavit > Znovu sestavit řešení nebo stisknete kombinaci kláves Ctrl+Shift+B. Potom aplikaci spusťte znovu kliknutím na tlačítko Start na panelu nástrojů sady Visual Studio nebo stisknutím klávesy F5.

Aplikace se aktualizuje a měla by se zobrazit červená Hello world!:

Aktualizace záhlaví aplikace

Do souboru code-behind MainWindow.xaml.cs přidejte this.Title = "Hello world!";.

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Pokud aplikaci restartujete, měli byste vidět Hello world! jak v textu, tak v záhlaví:

Blahopřejeme! Vytvořili jste svou první aplikaci Windows App SDK / WinUI 3.

Rekapitulace

Tady je to, čeho jste dosáhli v tomto postupu:

1. Začali jste s šablonou projektu sady Visual Studio.
2. Došlo k obslužné rutině události, která vázala události ovládacího prvku k aktualizaci uživatelského rozhraní.
3. Seznámili jste se s konvencí oddělení obchodní logiky pomocí úzce propojených souborů značek XAML a souborů kódu jazyka C#.
4. Zkontrolovali jste strukturu souborů výchozího projektu WinUI 3 .
5. Upravili jste prezentační vrstvu (XAML značkování) i obchodní logiku (kód na pozadí), aby podporovaly nový ovládací prvek TextBlock v rámci StackPanel.
6. Prostudovali jste referenční dokumentaci , abyste lépe pochopili vlastnosti StackPanel ovládacího prvku.
7. Aktualizovali jste záhlaví okna hlavního okna.

Soubory s úplným kódem

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    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 x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

FAQ

Q: Co znamená "zabaleno"?

Aplikace pro Windows je možné doručovat koncovým uživatelům pomocí různých formátů balení aplikací. Při práci se sadou WinUI a Windows App SDK zabalené aplikace používají MSIX k zabalení vaší aplikace způsobem, který nabízí pohodlnou instalaci a aktualizace koncovým uživatelům. Další informace najdete v architektuře nasazení a přehledu aplikací závislých na frameworku .

Q: Můžu k vytváření aplikací WinUI použít VS Code?

I když je to technicky možné, důrazně doporučujeme používat Visual Studio 2022 k vytváření desktopových aplikací pomocí WinUI a Sady Windows App SDK. Další informace najdete v nejčastějších dotazech pro vývojáře windows.

Q: Můžu pomocí jazyka C++ vytvářet aplikace WinUI?

Ano! Další informace naleznete v tématu Úvod do C++/WinRT.

Související

• ukázkové aplikace pro vývoj pro Windows
• Nejčastější dotazy pro vývojáře pro Windows
• glosář pro vývojáře pro Windows
• osvědčených postupů pro vývoj pro Windows