Kurz: Vytvoření první aplikace Univerzální platforma Windows v aplikaci Visual Studio s použitím jazyka XAML a jazyka C#Tutorial: Create your first Universal Windows Platform application in Visual Studio with XAML and C#

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.In this introduction to the Visual Studio integrated development environment (IDE), you'll create a "Hello World" app that runs on any Windows 10 device. Uděláte to tak, že použijete šablonu projektu Univerzální platforma Windows (UWP), jazyk Extensible Application Markup Language (XAML) (XAML) a C# programovací jazyk.To do so, you'll use a Universal Windows Platform (UWP) project template, Extensible Application Markup Language (XAML), and the C# programming language.

Pokud jste ještě nenainstalovali aplikaci Visual Studio, přejděte soubory ke stažení Visual Studio stránku a nainstalovat zdarma.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Pokud jste ještě nenainstalovali aplikaci Visual Studio, přejděte soubory ke stažení Visual Studio stránku a nainstalovat zdarma.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Vytvoření projektuCreate a project

Nejprve vytvořte projekt Univerzální platforma Windows.First, create a Universal Windows Platform project. Typ projektu se dodává se všemi soubory šablon, které potřebujete, předtím, než jste dokonce přidali cokoli!The project type comes with all the template files you need, before you've even added anything!

  1. Otevřít Visual Studio.Open Visual Studio.

  2. V horním řádku nabídek vyberte soubor > Nový > projekt.From the top menu bar, choose File > New > Project.

  3. V levém podokně dialogového okna Nový projekt rozbalte položku Visual C# a pak zvolte možnost univerzální pro systém Windows.In the left pane of the New Project dialog box, expand Visual C#, and then choose Windows Universal. V prostředním podokně vyberte prázdná aplikace (univerzální pro Windows) .In the middle pane, choose Blank App (Universal Windows). Pak pojmenujte projekt Hello a zvolte OK.Then, name the project HelloWorld and choose OK.

    Šablona univerzálního projektu Windows v dialogovém okně Nový projekt v integrovaném vývojovém prostředí sady Visual Studio

    Note

    Pokud nevidíte šablonu projektu prázdná aplikace (univerzální pro Windows) , klikněte na odkaz otevřít instalační program pro Visual Studio v levém podokně dialogového okna Nový projekt .If you don't see the Blank App (Universal Windows) project template, click the Open Visual Studio Installer link in the left pane of the New Project dialog box.

    Klikněte na odkaz otevřít Instalační program pro Visual Studio v dialogovém okně Nový projekt.Click the Open Visual Studio Installer link from the New Project dialog box

    Spustí se instalační program pro Visual Studio.The Visual Studio Installer launches. Zvolte Univerzální platforma Windows úlohy vývoje a pak zvolte Upravit.Choose the Universal Windows Platform development workload, and then choose Modify.

    Univerzální platforma Windows úlohy vývoje v Instalační program pro Visual StudioUniversal Windows Platform development workload in the Visual Studio Installer

  4. V dialogovém okně Nový projekt Univerzální platforma Windows přijměte výchozí nastavení cílové verze a Minimální verze .Accept the default Target version and Minimum version settings in the New Universal Windows Platform Project dialog box.

    Přijměte výchozí cílovou verzi a minimální verzi nastavení v dialogovém okně Nový projekt Univerzální platforma Windows.

  1. Otevřete Visual Studio a v okně Start vyberte vytvořit nový projekt.Open Visual Studio, and on the start window, choose Create a new project.

  2. Na obrazovce vytvořit nový projekt do vyhledávacího pole zadejte Universal Windows , zvolte šablonu C# prázdné aplikace (univerzální pro Windows) a klikněte na tlačítko Další.On the Create a new project screen, enter Universal Windows in the search box, choose the C# template for Blank App (Universal Windows), and then choose Next.

    Snímek obrazovky s vytvořením nového projektu

    Note

    Pokud nevidíte šablonu projektu prázdná aplikace (univerzální pro Windows) , klikněte na odkaz instalovat další nástroje a funkce .If you don't see the Blank App (Universal Windows) project template, click the Install more tools and features link.

    Klikněte na odkaz instalovat další nástroje a funkce.Click the Install more tools and features link

    Spustí se instalační program pro Visual Studio.The Visual Studio Installer launches. Zvolte Univerzální platforma Windows úlohy vývoje a pak zvolte Upravit.Choose the Universal Windows Platform development workload, and then choose Modify.

    Univerzální platforma Windows úlohy vývoje v Instalační program pro Visual StudioUniversal Windows Platform development workload in the Visual Studio Installer

  3. Dejte projektu název, _HelloWorld_a klikněte na vytvořit.Give the project a name, HelloWorld, and choose Create.

    Obrazovka konfigurace projektu

  4. V dialogovém okně Nový projekt Univerzální platforma Windows přijměte výchozí nastavení cílové verze a Minimální verze .Accept the default Target version and Minimum version settings in the New Universal Windows Platform Project dialog box.

    Přijměte výchozí cílovou verzi a minimální verzi nastavení v dialogovém okně Nový projekt Univerzální platforma Windows.

Note

Pokud jste aplikaci Visual Studio poprvé použili k vytvoření aplikace pro UWP, může se zobrazit dialogové okno Nastavení .If this is the first time you have used Visual Studio to create a UWP app, a Settings dialog box might appear. Zvolte režim vývojářa pak zvolte Ano.Choose Developer mode, and then choose Yes.

Povolení režimu vývojářů v dialogovém okně nastavení UWPEnable the Developer Mode in the UWP Settings dialog box

Sada Visual Studio nainstaluje další balíček vývojářského režimu za vás.Visual Studio installs an additional Developer Mode package for you. Po dokončení instalace balíčku zavřete dialogové okno Nastavení .When the package installation is complete, close the Settings dialog box.

Vytvoření aplikaceCreate the application

Je čas začít vyvíjet.It's time to start developing. Přidáte ovládací prvek tlačítko, přidáte pro něj akci a pak spustíte aplikaci "Hello World", abyste viděli, co vypadá jako.You'll add a button control, add an action to the button, and then start the "Hello World" app to see what it looks like.

Přidání tlačítka na plátno návrhuAdd a button to the Design canvas

  1. V Průzkumník řešenídvakrát klikněte na MainPage. XAML a otevřete rozdělené zobrazení.In the Solution Explorer, double-click MainPage.xaml to open a split view.

    Otevřete MainPage. XAML z Průzkumník řešeníOpen MainPage.xaml from the Solution Explorer

    Otevřete MainPage. XAML z Průzkumník řešení

    K dispozici jsou dvě podokna: Návrhář XAML, který obsahuje plátno návrhu, a Editor XAML, kde můžete přidat nebo změnit kód.There are two panes: The XAML Designer, which includes a design canvas, and the XAML Editor, where you can add or change code.

    Podokno Návrhář XAML v editoru XAML

  2. Vyberte panel nástrojů a otevřete tak okno s časovým obdobím panelu nástrojů.Choose Toolbox to open the Toolbox fly-out window.

    Kliknutím na panel nástrojů otevřete okno s časovým obdobím panelu nástrojů.

    (Pokud nevidíte možnost panelu nástrojů , můžete ji otevřít z řádku nabídek.(If you don't see the Toolbox option, you can open it from the menu bar. Provedete to tak, že kliknete napanel nástrojů zobrazení > .To do so, choose View > Toolbar. Také můžete stisknout klávesu Ctrl+Alt+X.)Or, press Ctrl+Alt+X.)

  3. Kliknutím na ikonu připnutí můžete ukotvit okno panelu nástrojů.Click the Pin icon to dock the Toolbox window.

    Kliknutím na ikonu připnutí můžete ukotvit okno panelu nástrojů.

  4. Klikněte na ovládací prvek tlačítko a přetáhněte ho na plátno pro návrh.Click the Button control and then drag it onto the design canvas.

    Klikněte na ovládací prvek tlačítko a přetáhněte ho na plátno pro návrh.

    Pokud se podíváte na kód v editoru XAML, uvidíte, že tlačítko bylo přidáno také.If you look at the code in the XAML Editor, you'll see that the Button has been added there, too:

    Klikněte na ovládací prvek tlačítko a přetáhněte ho na plátno pro návrh.

Přidání popisku na tlačítkoAdd a label to the button

  1. V editoru XAMLzměňte hodnotu obsahu tlačítka z "tlačítko" na "Hello World!"In the XAML Editor, change Button Content value from "Button" to "Hello World!"

    Změňte hodnotu obsahu tlačítka na Hello World

  2. Všimněte si, že se změní tlačítko v Návrhář XAML .Notice that the button in the XAML Designer changes, too.

    Tlačítko se změní na Hello World na plátně návrhu

Přidání obslužné rutiny událostiAdd an event handler

"Obslužná rutina události" je složitá, ale je to pouze jiný název kódu, který je volán, když dojde k události.An "event handler" sounds complicated, but it's just another name for code that is called when an event happens. V tomto případě přidá akci do "Hello World!".In this case, it adds an action to the "Hello World!" tlačítko.button.

  1. Dvakrát klikněte na ovládací prvek tlačítko na plátně návrhu.Double-click the button control on the design canvas.

  2. Upravte kód obslužné rutiny události v MainPage.XAML.cs, na stránce s kódem na pozadí.Edit the event handler code in MainPage.xaml.cs, the code-behind page.

    Tady je místo, kde se dostanete zajímavě.Here is where things get interesting. Výchozí obslužná rutina události vypadá takto:The default event handler looks like this:

    Výchozí obslužná rutina události Button_ClickThe default Button_Click event handler

    Pojďme změnit, aby vypadala takto:Let's change it, so it looks like this:

    Nová obslužná rutina události Async Button_ClickThe new async Button_Click event handler

    Zde je kód ke zkopírování a vložení:Here's the code to copy and paste:

    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 máme jenom vy?What did we just do?

Kód používá některá rozhraní API systému Windows k vytvoření objektu syntézy řeči a pak mu dává text, který je třeba vyslovit.The code uses some Windows APIs to create a speech synthesis object and then gives it some text to say. (Další informace o použití SpeechSynthesisnaleznete v tématu System.Speech.Synthesis.)(For more information on using SpeechSynthesis, see System.Speech.Synthesis.)

Spuštění aplikaceRun the application

Je čas sestavování, nasazování a spuštění aplikace "Hello World", která zobrazuje vzhled a zvuky jako.It's time to build, deploy, and launch the "Hello World" UWP app to see what it looks and sounds like. Tady je způsob.Here's how.

  1. K spuštění aplikace v místním počítači použijte tlačítko Přehrát ( místní počítačobsahuje text).Use the Play button (it has the text Local Machine) to start the application on the local machine.

    Kliknutím na místní počítač spustíte a naladíte aplikaci UWP.

    (Případně můžete zvolit ladění > Spustit ladění z řádku nabídek nebo stisknout klávesu F5 pro spuštění aplikace.)(Alternatively, you can choose Debug > Start Debugging from the menu bar or press F5 to start your app.)

  2. Zobrazte si aplikaci, která se zobrazí, jakmile se nezobrazí úvodní obrazovka.View your app, which appears soon after a splash screen disappears. Aplikace by měla vypadat nějak takto:The app should look similar to this:

    Aplikace Hello World UWP

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

    Vaše zařízení s Windows 10 bude doslova vyslovit text "Hello, World!".Your Windows 10 device will literally say, "Hello, World!"

  4. Pokud chcete aplikaci zavřít, klikněte na tlačítko Zastavit ladění na panelu nástrojů.To close the app, click the Stop Debugging button in the toolbar. (Případně zvolte možnost ladění > Zastavit ladění z řádku nabídek nebo stiskněte klávesy Shift + F5.)(Alternatively, choose Debug > Stop debugging from the menu bar, or press Shift+F5.)

Je čas sestavování, nasazování a spuštění aplikace "Hello World", která zobrazuje vzhled a zvuky jako.It's time to build, deploy, and launch the "Hello World" UWP app to see what it looks and sounds like. Tady je způsob.Here's how.

  1. K spuštění aplikace v místním počítači použijte tlačítko Přehrát ( místní počítačobsahuje text).Use the Play button (it has the text Local Machine) to start the application on the local machine.

    Kliknutím na místní počítač spustíte a naladíte aplikaci UWP.

    (Případně můžete zvolit ladění > Spustit ladění z řádku nabídek nebo stisknout klávesu F5 pro spuštění aplikace.)(Alternatively, you can choose Debug > Start Debugging from the menu bar or press F5 to start your app.)

  2. Zobrazte si aplikaci, která se zobrazí, jakmile se nezobrazí úvodní obrazovka.View your app, which appears soon after a splash screen disappears. Aplikace by měla vypadat nějak takto:The app should look similar to this:

    Aplikace Hello World UWP

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

    Vaše zařízení s Windows 10 bude doslova vyslovit text "Hello, World!".Your Windows 10 device will literally say, "Hello, World!"

  4. Pokud chcete aplikaci zavřít, klikněte na tlačítko Zastavit ladění na panelu nástrojů.To close the app, click the Stop Debugging button in the toolbar. (Případně zvolte možnost ladění > Zastavit ladění z řádku nabídek nebo stiskněte klávesy Shift + F5.)(Alternatively, choose Debug > Stop debugging from the menu bar, or press Shift+F5.)

Další krokyNext steps

Blahopřejeme k dokončení tohoto kurzu!Congratulations on completing this tutorial! Doufáme, že jste se seznámili se základními informacemi o UWP a prostředí IDE sady Visual Studio.We hope you learned some basics about UWP and the Visual Studio IDE. Další informace najdete v následujícím kurzu:To learn more, continue with the following tutorial:

Viz také:See also