Sdílet prostřednictvím


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

Poznámka:

Pokud jste s aktuálními funkcemi v Univerzální platforma 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 sadou Windows App SDK, můžete postupovat podle pokynů v kurzu k sadě Windows App SDK.

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 Univerzální platforma Windows (UPW), jazyk XAML (Extensible Application Markup Language) a programovací jazyk C#.

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 Univerzální platforma Windows projekt. Typ projektu obsahuje všechny soubory šablony, které potřebujete, ještě předtím, 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í systém Windows, zvolte šablonu C# pro prázdnou aplikaci (Univerzální windows) a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Poznámka:

    Pokud se šablona projektu Prázdná aplikace (Univerzální systém Windows) nezobrazuje, 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 Univerzální platforma Windows vývojovou úlohu a pak zvolte Upravit.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform 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.

  4. V dialogovém okně Nový Univerzální platforma Windows projektu přijměte výchozí nastavení cílové verze a minimální verze.

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    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.

    Screenshot showing the UWP 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í.

  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í systém Windows, zvolte šablonu C# pro prázdnou aplikaci (Univerzální windows) a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Poznámka:

    Pokud se šablona projektu Prázdná aplikace (Univerzální systém Windows) nezobrazuje, 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 Univerzální platforma Windows vývojovou úlohu a pak vyberte Upravit.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform 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.

  4. V dialogovém okně Nový Univerzální platforma Windows projektu přijměte výchozí nastavení cílové verze a minimální verze.

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    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 . Vyberte nastavení pro vývojáře, kteří chtějí otevřít Nastavení. Zapněte vývojářský režim a pak zvolte Ano.

    Screenshot showing the UWP 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 MainPage.xaml otevřete rozdělené zobrazení.

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

    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.

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

  2. Zvolte Panel nástrojů , aby se otevřelo kontextové okno panelu nástrojů.

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Pokud se nezobrazuje Možnost panelu nástrojů, kterou můžete otevřít z řádku nabídek. Uděláte to tak, že zvolíte panel nástrojů Zobrazení>. Nebo stiskněte kombinaci kláves Ctrl+Alt+X.)

  3. Kliknutím na ikonu Připnout ukotvíte okno Panel nástrojů.

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Pokud se podíváte na kód v editoru XAML, uvidíte, že se tam přidalo i tlačítko:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

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

    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.

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

  2. Zvolte Panel nástrojů , aby se otevřelo kontextové okno panelu nástrojů.

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Pokud se nezobrazuje Možnost panelu nástrojů, kterou můžete otevřít z řádku nabídek. Uděláte to tak, že zvolíte panel nástrojů Zobrazení>. Nebo stiskněte kombinaci kláves Ctrl+Alt+X.)

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Pokud se podíváte na kód v editoru XAML, uvidíte, že se tam přidalo i tlačítko:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

  1. V editoru XAML změňte hodnotu obsahu tlačítka z tlačítka 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 v Návrháři XAML se také změní.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

  1. V editoru XAML změňte hodnotu obsahu tlačítka z tlačítka 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 v Návrháři XAML se také změní.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

Přidání 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 na tlačítko "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 souboru MainPage.xaml.cs, na stránce s kódem.

    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 Button_Click event handler.

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

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

    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 souboru MainPage.xaml.cs, na stránce s kódem.

    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 Button_Click event handler.

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

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

    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žití 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í. Postupujte následovně.

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

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' 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 nějak takto:

    Screenshot showing the running UWP 'Hello World' application.

  3. Klikněte na tlačítko Hello World .

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

  4. Aplikaci zavřete kliknutím na tlačítko Zastavit ladění na panelu nástrojů. (Případně zvolte Ladění>zastavit ladění z řádku 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í. Postupujte následovně.

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

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' 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 UWP 'Hello World' application.

  3. Vyberte tlačítko Hello World.

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

  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 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:

Viz také