Skip to content

tutorial-uwp.md

Latest commit

 

History

History
308 lines (177 loc) · 16.9 KB

tutorial-uwp.md

File metadata and controls

308 lines (177 loc) · 16.9 KB
Raw
title Tutorial: Create UWP Apps with Visual Studio & C#
description Create a Universal Windows Platform (UWP) app in Visual Studio by using the Extensible Application Markup Language (XAML) and C#.
titleSuffix
ms.custom vs-acquisition
ms.date 03/04/2026
ms.subservice general-ide
ms.topic tutorial
ms.devlang csharp
author MikeJo5000
ms.author mikejo
dev_langs
CSharp

Tutorial: Create your first Universal Windows Platform application in Visual Studio with XAML and C#

In this tutorial, as an introduction to the Visual Studio integrated development environment (IDE), you create a "Hello World" app that runs on any Windows 10 or later device. To do so, you use a Universal Windows Platform (UWP) project template, Extensible Application Markup Language (XAML), and the C# programming language.

Note

If you're happy with your current functionality in the Universal Windows Platform (UWP), then there's no need to migrate your project type to Windows App SDK. WinUI 2.x, and the Windows SDK, support UWP project types. If you would like to get started with WinUI 3 and Windows App SDK, then you can follow the steps in the Windows App SDK tutorial.

In this tutorial, you:

[!div class="checklist"]

  • Create a project
  • Create an application
  • Run the application

::: moniker range=">=vs-2022"

Prerequisites

You need:

  • Visual Studio. Visit the Visual Studio downloads page for a free version.

  • Workloads and components required for developing a UWP app. To verify or install a workload in Visual Studio, select Tools > Get Tools and Features, or in the Create a new project window, select the Install more tools and features link. For more information, see Change workloads or individual components.

    On the Workloads tab of the Visual Studio Installer, select the following workloads and components:

    Visual Studio 2022 version 17.10 and later

    • For app development using UWP, select the WinUI application development workload. Then, in the Installation details pane, under the WinUI application development node, select the UWP option you need (this will also select any additional required components)

    • For C#, select Universal Windows Platform tools and Windows 11 SDK (10.0.26100.0).

    • This tutorial requires the UWP Blank App project template.

    Visual Studio 2022 version 17.1 - 17.9

    • For C# app development using UWP, select the Universal Windows Platform development workload.

    • This tutorial requires the Blank App (Universal Windows) project template.

    [!NOTE] In Visual Studio 17.10 - 17.12, this workload is called Windows application development.

::: moniker-end

Create a project

First, create a Universal Windows Platform project. The project type comes with all the template files you need, before you even add anything!

::: moniker range="visualstudio"

  1. Open Visual Studio, and on the start window, choose Create a new project.

  2. On the Create a new project screen, enter Universal Windows in the search box, choose the C# template for UWP Blank App (.NET Native), and then choose Next.

    :::image type="content" source="media/visualstudio/uwp-create-new-project.png" alt-text="Screenshot of the 'Create a new project' dialog box with 'Universal Windows' entered in the search box, and the 'UWP Blank App (.NET Native)' project template highlighted.":::

  3. Give the project a name, HelloWorld, and choose Create.

    :::image type="content" source="media/visualstudio/uwp-configure-your-project.png" alt-text="Screenshot of the 'Configure your new project' dialog box with 'HelloWorld' entered in the Project name field.":::

  4. Accept the default Target version and Minimum version settings in the New Windows Project dialog box.

    :::image type="content" source="media/visualstudio/new-uwp-project-target-dialog.png" alt-text="Screenshot of the New Windows Project dialog showing the default Target version and Minimum version settings.":::

    [!NOTE] If this is the first time you have used Visual Studio to create a UWP app, you see the following message:

    :::image type="content" source="media/visualstudio/enable-development-warning.png" alt-text="Screenshot that shows the Visual Studio requires your device to be enabled for developement message.":::

    If you see this message, go to the System > Advanced page in Windows settings and enable Developer Mode. In the Use developer features window, select Yes:

    :::image type="content" source="media/visualstudio/enable-developer-mode-settings.png" alt-text="Screenshot showing the System > Advanced settings dialog box the option for enabling Developer Mode.":::

    Visual Studio installs an additional Developer Mode package for you. When the package installation is complete, close the Settings dialog box.

::: moniker-end

::: moniker range="vs-2022"

  1. Open Visual Studio, and on the start window, choose Create a new project.

  2. On the Create a new project screen, enter Universal Windows in the search box, choose the C# template for Blank App (Universal Windows) or UWP Blank App in Visual Studio 2022 17.10 or later, and then choose Next.

    :::image type="content" source="media/vs-2022/uwp-create-new-project.png" alt-text="Screenshot of the 'Create a new project' dialog box with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.":::

  3. Give the project a name, HelloWorld, and choose Create.

    :::image type="content" source="media/vs-2022/uwp-configure-your-project.png" alt-text="Screenshot of the 'Configure your new project' dialog box with 'HelloWorld' entered in the Project name field.":::

  4. Accept the default Target version and Minimum version settings in the New Universal Windows Platform Project dialog box.

    :::image type="content" source="media/vs-2022/new-uwp-project-target-minver-dialog.png" alt-text="Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.":::

    [!NOTE] If this is the first time you have used Visual Studio to create a UWP app, the Enable Developer Mode for Windows dialog box appears. Select settings for developers to open Settings. Turn on Developer mode, and then choose Yes.

    :::image type="content" source="media/vs-2022/enable-developer-mode-settings.png" alt-text="Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.":::

    Visual Studio installs an additional Developer Mode package for you. When the package installation is complete, close the Settings dialog box.

::: moniker-end

Create the application

It's time to start developing. Add a button control, add an action to the button, and then start the "Hello World" app to see what it looks like.

Add a button to the Design canvas

::: moniker range="visualstudio"

  1. In the Solution Explorer, double-click MainPage.xaml to open a split view.

    :::image type="content" source="media/visualstudio/uwp-solution-explorer-mainpage-xaml.png" alt-text="Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.":::

    There are two panes: The XAML Designer, which includes a design canvas, and the XAML Editor, where you can add or change code.

    :::image type="content" source="media/visualstudio/uwp-xaml-editor.png" alt-text="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. Choose Toolbox to open the Toolbox fly-out window.

    :::image type="content" source="media/visualstudio/uwp-toolbox.png" alt-text="Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.":::

    If you don't see the Toolbox option, you can open it from the menu bar. To do so, choose View > Toolbar. Or, press Ctrl+Alt+X.

  3. Select the Pin icon to dock the Toolbox window.

    :::image type="content" source="media/visualstudio/uwp-toolbox-auto-hide.png" alt-text="Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.":::

  4. Select the Button control and then drag it onto the design canvas.

    :::image type="content" source="media/visualstudio/uwp-toolbox-add-button-control.png" alt-text="Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.":::

    If you look at the code in the XAML Editor, you see that the Button appears there, too:

    :::image type="content" source="media/vs-2022/uwp-xaml-control-code-window.png" alt-text="Screenshot showing the code for the newly added Button highlighted in the XAML editor.":::

::: moniker-end

::: moniker range="vs-2022"

  1. In the Solution Explorer, double-click MainPage.xaml to open a split view.

    :::image type="content" source="media/vs-2022/uwp-solution-explorer-mainpage-xaml.png" alt-text="Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.":::

    There are two panes: The XAML Designer, which includes a design canvas, and the XAML Editor, where you can add or change code.

    :::image type="content" source="media/vs-2022/uwp-xaml-editor.png" alt-text="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. Choose Toolbox to open the Toolbox fly-out window.

    :::image type="content" source="media/vs-2022/uwp-toolbox.png" alt-text="Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.":::

    If you don't see the Toolbox option, you can open it from the menu bar. To do so, choose View > Toolbar. Or, press Ctrl+Alt+X.

  3. Select the Pin icon to dock the Toolbox window.

    :::image type="content" source="media/vs-2022/uwp-toolbox-autohide.png" alt-text="Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.":::

  4. Select the Button control and then drag it onto the design canvas.

    :::image type="content" source="media/vs-2022/uwp-toolbox-add-button-control.png" alt-text="Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.":::

    If you look at the code in the XAML Editor, you see that the Button appears there, too:

    :::image type="content" source="media/vs-2022/uwp-xaml-control-code-window.png" alt-text="Screenshot showing the code for the newly added Button highlighted in the XAML editor.":::

::: moniker-end

Add a label to the button

::: moniker range="visualstudio"

  1. In the XAML Editor, change Button Content value from Button to Hello World!

    :::image type="content" source="media/vs-2022/uwp-change-button-text-in-xaml-code-window.png" alt-text="Screenshot showing the XAML code for the Button in the XAML editor with the value of the Content property changed to 'Hello World!'.":::

  2. Notice that the button in the XAML Designer changes, too.

    :::image type="content" source="media/visualstudio/uwp-button-text-change-in-design-canvas.png" alt-text="Screenshot showing the Button control on the canvas of the XAML Designer with the label of the button changed to Hello World!":::

::: moniker-end

::: moniker range="vs-2022"

  1. In the XAML Editor, change Button Content value from Button to Hello World!

    :::image type="content" source="media/vs-2022/uwp-change-button-text-in-xaml-code-window.png" alt-text="Screenshot showing the XAML code for the Button in the XAML editor with the value of the Content property changed to 'Hello World!'.":::

  2. Notice that the button in the XAML Designer changes, too.

    :::image type="content" source="media/vs-2022/uwp-button-text-change-in-design-canvas.png" alt-text="Screenshot showing the Button control on the canvas of the XAML Designer with the label of the button changed to Hello World!":::

::: moniker-end

Add an event handler

An event handler sounds complicated, but it's just another name for code that is called when an event happens. In this case, it adds an action to the Hello World! button.

::: moniker range=">=vs-2022"

  1. Double-click the button control on the design canvas.

  2. Edit the event handler code in MainPage.xaml.cs, the code-behind page.

    Here's where things get interesting. The default event handler looks like this:

    :::image type="content" source="media/vs-2022/uwp-button-click-code.png" alt-text="Screenshot showing the C# code for the default Button_Click event handler.":::

    Change it, so it looks like this:

    :::image type="content" source="media/vs-2022/uwp-add-hello-world-async-code.png" alt-text="Screenshot showing the C# code for the new async Button_Click event handler.":::

    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();
}

::: moniker-end

What did we just do?

The code uses some Windows APIs to create a speech synthesis object and then gives it some text to say. For more information on using SpeechSynthesis, see xref:System.Speech.Synthesis.

Run the application

::: moniker range="visualstudio"

It's time to build, deploy, and launch the "Hello World" UWP app to see what it looks and sounds like. Here's how.

  1. Use the Play button (it has the text Local Machine) to start the application on the local machine.

    :::image type="content" source="media/visualstudio/uwp-start-or-debug.png" alt-text="Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.":::

    Alternatively, you can choose Debug > Start Debugging from the menu bar or press F5 to start your app.

  2. View your app, which appears soon after a splash screen disappears. The app should look similar to this image:

    :::image type="content" source="media/vs-2022/uwp-hello-world-app.png" alt-text="Screenshot showing the running UWP 'Hello World' application.":::

  3. Select the Hello World button.

    Your Windows 10 or later device literally says, "Hello, World!"

  4. To close the app, select the Stop Debugging button in the toolbar. Alternatively, choose Debug > Stop debugging from the menu bar, or press Shift+F5.

::: moniker-end

::: moniker range="vs-2022"

It's time to build, deploy, and launch the "Hello World" UWP app to see what it looks and sounds like. Here's how.

  1. Use the Play button (it has the text Local Machine) to start the application on the local machine.

    :::image type="content" source="media/vs-2022/uwp-start-or-debug.png" alt-text="Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.":::

    Alternatively, you can choose Debug > Start Debugging from the menu bar or press F5 to start your app.

  2. View your app, which appears soon after a splash screen disappears. The app should look similar to this image:

    :::image type="content" source="media/vs-2022/uwp-hello-world-app.png" alt-text="Screenshot showing the running UWP 'Hello World' application.":::

  3. Select the Hello World button.

    Your Windows 10 or later device literally says, "Hello, World!"

  4. To close the app, select the Stop Debugging button in the toolbar. Alternatively, choose Debug > Stop debugging from the menu bar, or press Shift+F5.

::: moniker-end

Related content

Next step

Congratulations on completing this tutorial! We hope you learned some basics about UWP and the Visual Studio IDE. To learn more, continue with the following tutorial:

[!div class="nextstepaction"] Create a user interface