Sdílet prostřednictvím


Kurz: Vytvoření první aplikace pro univerzální platformu Windows v sadě Visual Studio pomocí XAML a jazyka C#

V tomto kurzu jako úvod 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 univerzální platformy Windows (UPW), jazyk XAML (Extensible Application Markup Language) a programovací jazyk C#.

Poznámka

Pokud jste s aktuálními funkcemi v univerzální platformě Windows (UPW) spokojení, nemusíte migrovat typ projektu do sady Windows App SDK. WinUI 2.x a Sada Windows SDK podporují typy projektů UPW. Pokud chcete začít s WinUI 3 a Windows App SDK, můžete postupovat podle kroků v kurzu Windows App SDK.

V tomto kurzu:

  • Vytvoření projektu
  • Vytvoření aplikace
  • Spuštění aplikace

Požadavky

K dokončení tohoto kurzu potřebujete Visual Studio. Navštivte stránku stažení sady Visual Studio a získejte bezplatnou verzi.

Poznámka

Tento kurz vyžaduje šablonu projektu Blank App (Universal Windows). Během instalace vyberte vývojovou úlohu pro Univerzální platformu Windows:

Snímek obrazovky instalačního programu sady Visual Studio s pracovní zátěží pro vývoj univerzální platformy Windows

Pokud už máte sadu Visual Studio nainstalovanou a potřebujete přidat další funkce, v nabídce vyberte Nástroje>Získat nástroje a funkce, nebo v okně Vytvořit nový projekt vyberte odkaz Nainstalovat další nástroje a funkce.

snímek obrazovky s oknem Vytvořit nový projekt s odkazem Nainstalovat další nástroje a funkce

Vytvoření projektu

Nejprve vytvořte projekt univerzální platformy Windows. Typ projektu obsahuje všechny soubory šablony, které potřebujete, ještě než něco přidáte!

  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 Univerzální Windows, zvolte šablonu jazyka C# pro Prázdná aplikace (Univerzální Windows), a poté zvolte Další.

    Snímek obrazovky s dialogovým oknem

  3. Pojmenujte projekt jako HelloWorlda zvolte Vytvořit.

    Snímek obrazovky dialogového okna

  4. V dialogovém okně New Universal Windows Platform Project přijměte výchozí nastavení Cílové verze a Minimální verze.

    snímek obrazovky s dialogovým oknem Nový projekt univerzální platformy Windows zobrazující výchozí cílovou verzi a nastavení minimální verze

    Poznámka

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

    Snímek obrazovky s dialogovým oknem Nastavení UPW s možností pro povolení vývojářského režimu

    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í.

  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 Univerzální Windows, vyberte šablonu pro C# Prázdná aplikace (Univerzální Windows)a poté vyberte Další.

    snímek obrazovky dialogového okna 'Vytvořit nový projekt' s vloženým 'Univerzální Windows' do vyhledávacího pole, a zvýrazněnou šablonou projektu 'Prázdná aplikace (Univerzální Windows)'.

  3. Pojmenujte projekt HelloWorlda zvolte Vytvořit.

    snímek obrazovky s dialogovým oknem 'Konfigurovat váš nový projekt' se zadaným textem HelloWorld do pole název projektu

  4. V dialogovém okně New Universal Windows Platform Project přijměte výchozí nastavení Cílové verze a Minimální verze.

    snímek obrazovky s dialogovým oknem Nový projekt univerzální platformy Windows zobrazující výchozí cílovou verzi a nastavení minimální verze

    Poznámka

    Pokud jste k vytvoření aplikace pro UPW použili Visual Studio poprvé, zobrazí se dialogové okno Povolit vývojářský režim pro Windows. Pro otevření Nastavenívyberte nastavení pro vývojáře. Zapněte vývojářský režima pak zvolte Ano.

    Snímek obrazovky s dialogovým oknem Nastavení UPW s možností pro povolení vývojářského režimu

    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 s vývojem. Přidejte ovládací prvek tlačítka, přidejte do něj akci a pak spusťte aplikaci Hello World, abyste viděli, jak vypadá.

Přidejte tlačítko na návrhové plátno

  1. V průzkumníku řešení poklikáním na MainPage.xaml otevřete rozdělené zobrazení.

    snímek obrazovky s oknem Průzkumníka řešení zobrazující vlastnosti, odkazy, prostředky a soubory v projektu HelloWorld s vybraným souborem MainPage.xaml

    Existují dvě podokna: Návrhář XAML, který obsahuje návrhové plátno, a Editor XAML, kde můžete přidat nebo změnit kód.

    snímek obrazovky s otevřeným souborem MainPage.xaml v integrovaném vývojovém prostředí sady Visual Studio a podokno Návrhář XAML zobrazuje prázdnou plochu návrhu a v podokně Editor XAML se zobrazuje část kódu XAML.

  2. Zvolte Panel nástrojů pro otevření postranního okna panelu nástrojů.

    Snímek obrazovky znázorňující záložku pro vyskakovací okno

    Pokud možnost panelu nástrojů nevidíte, můžete ji otevřít na řádku nabídek. Pokud to chcete udělat, vyberte Zobrazení>panel nástrojů. Nebo stiskněte Ctrl+Alt+X.

  3. Výběrem ikony Připnout ukotvíte okno Panel nástrojů.

    Snímek obrazovky s ikonou Připnout zvýrazněnou v horním panelu okna sady nástrojů

  4. Vyberte ovládací prvek Tlačítko a přetáhněte ho na návrhové plátno.

    Snímek obrazovky se zvýrazněným 'Button' v okně 'Toolbox' a ovládacím prvkem 'Button' na návrhovém plátně

    Pokud se podíváte na kód v editoru XAML, uvidíte, že se tam zobrazí také tlačítko :

    Snímek obrazovky zobrazující kód nově přidaného tlačítka zvýrazněného v editoru XAML

  1. V průzkumníku řešení poklikáním na MainPage.xaml otevřete rozdělené zobrazení.

    snímek obrazovky s oknem Průzkumníka řešení zobrazující vlastnosti, odkazy, prostředky a soubory v projektu HelloWorld Je vybrán soubor MainPage.xaml.

    Existují dvě podokna: Návrhář XAML, který obsahuje návrhové plátno, a Editor XAML, kde můžete přidat nebo změnit kód.

    snímek obrazovky s otevřeným souborem MainPage.xaml v integrovaném vývojovém prostředí sady Visual Studio Podokno Návrhář XAML zobrazuje prázdnou plochu návrhu a v podokně Editor XAML se zobrazuje část kódu XAML.

  2. Vyberte Panel nástrojů, aby se otevřelo vyskakovací okno panelu nástrojů.

    Snímek obrazovky znázorňující kartu pro kontextové okno Panel nástrojů zvýrazněné na levé straně podokna Návrháře XAML

    Pokud možnost panelu nástrojů nevidíte, můžete ji otevřít na řádku nabídek. Vyberte Zobrazení>panelu nástrojů. Nebo stiskněte Ctrl+Alt+X.

  3. Vyberte ikonu Připnout, abyste ukotvili okno panelu nástrojů.

    Snímek obrazovky se zvýrazněnou ikonou připnutí v horní liště panelu nástrojů

  4. Vyberte ovládací prvek Tlačítko a přetáhněte ho na návrhové plátno.

    Snímek obrazovky se zvýrazněným tlačítkem v okně Panel nástrojů a ovládacím prvku Tlačítko na návrhovém plátně.

    Pokud se podíváte na kód v editoru XAML, uvidíte, že tlačítko se tam zobrazí také:

    Snímek obrazovky zobrazující kód nově přidaného tlačítka zvýrazněného v editoru XAML

Přidání popisku na tlačítko

  1. V editoru XAMLzměňte hodnotu Button Content z tlačítka na Hello World!

    Snímek obrazovky s kódem XAML pro tlačítko v editoru XAML se změněnou vlastností Content na Hello World

  2. Všimněte si, že tlačítko v návrháři XAML se také změní.

    Snímek obrazovky zobrazující ovládací prvek Tlačítko na plátně Návrháře XAML s nápisem tlačítka změněným na Hello World!

  1. V editoru XAMLzměňte hodnotu Button Content z tlačítka na Hello World!

    snímek obrazovky s kódem XAML pro tlačítko v editoru XAML s hodnotou vlastnosti Content změněnou na Hello World!.

  2. Všimněte si, že tlačítko v návrháři XAML také změny.

    Snímek obrazovky zobrazující ovládací prvek Tlačítko na plátně Návrháře XAML s popiskem tlačítka změněným na Hello World!

Přidejte obslužnou rutinu události

Obslužná rutina událostí 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 do tlačítka Hello World!.

  1. Poklikejte na ovládací prvek tlačítka na návrhovém plátně.

  2. Upravte kód obslužné rutiny události v MainPage.xaml.cs, v souboru za stránkou.

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

    snímek obrazovky s kódem jazyka C# pro výchozí obslužnou rutinu události Button_Click

    Změňte ho, aby vypadal takto:

    Snímek obrazovky s kódem jazyka C# pro novou asynchronní obslužnou rutinu události Button_Click

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

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
       MediaElement mediaElement = new MediaElement();
       var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
       Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
       mediaElement.SetSource(stream, stream.ContentType);
       mediaElement.Play();
    }
    
  1. Poklikejte na ovládací prvek tlačítka na návrhovém plátně.

  2. Upravte kód obslužné rutiny události v MainPage.xaml.cs, na stránce s kódem.

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

    snímek obrazovky s kódem jazyka C# pro výchozí obslužnou rutinu události Button_Click

    Změňte ho, aby vypadal takto:

    Snímek obrazovky s kódem jazyka C# pro novou asynchronní obslužnou rutinu události Button_Click

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

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
       MediaElement mediaElement = new MediaElement();
       var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
       Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
       mediaElement.SetSource(stream, stream.ContentType);
       mediaElement.Play();
    }
    

Co jsme udělali?

Kód používá některá rozhraní API systému Windows k vytvoření objektu syntézy řeči a pak mu poskytne nějaký text, který se má říct. Další informace o používání SpeechSynthesisnaleznete v tématu System.Speech.Synthesis.

Spuštění aplikace

Je čas sestavit, nasadit a spustit aplikaci "Hello World" pro UPW, abyste viděli, jak vypadá a zní. Tady je postup.

  1. Pomocí tlačítka Přehrát spusťte aplikaci na místním počítači. Obsahuje text 'Místní počítač'.

    Snímek obrazovky s rozevíracím seznamem otevřeným vedle tlačítka Přehrát s vybranou možností Místní počítač

    Můžete také zvolit Ladění>Spustit ladění v liště nabídek nebo stisknutím klávesou F5 spustit vaši 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:

    Snímek obrazovky zobrazující spuštěnou aplikaci Hello World pro UPW

  3. Vyberte tlačítko Hello World.

    Vaše zařízení s Windows 10 nebo novějším doslova říká" "Hello, World!"

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

Je čas sestavit, nasadit a spustit aplikaci "Hello World" pro UPW, abyste viděli, jak vypadá a zní. Tady je postup.

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

    Snímek obrazovky s rozevíracím seznamem otevřeným vedle tlačítka Přehrát s vybranou možností Místní počítač

    Můžete také zvolit Ladění>Spustit ladění z panelu nabídek nebo stisknutím klávesy F5 spustit 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:

    Snímek obrazovky zobrazující spuštěnou aplikaci Hello World pro UPW

  3. Vyberte tlačítko Hello World.

    Vaše zařízení s Windows 10 nebo novějším doslova říká" "Hello, World!"

  4. Aplikaci zavřete tak, že na panelu nástrojů vyberete tlačítko Zastavit ladění. Alternativně zvolte Ladění>Zastavit ladění v hlavní nabídce, nebo stiskněte Shift+F5.

Další krok

Blahopřejeme k dokončení tohoto kurzu! Doufáme, že jste se seznámili s některými základy UPW a integrovaného vývojového prostředí sady Visual Studio. Další informace najdete v následujícím kurzu: