Skip to content

Latest commit

 

History

History
56 lines (36 loc) · 2.87 KB

intro.md

File metadata and controls

56 lines (36 loc) · 2.87 KB
author ms.author ms.date ms.topic
jwmsft
jimwalk
03/26/2025
include

This tutorial series demonstrates how to create a WinUI 3 app using XAML and C#. The app you'll create is a note app, where the user can create, save, and load multiple notes.

In this tutorial, you learn how to:

[!div class="checklist"]

  • Use XAML markup to define the user interface of the app.
  • Interact with XAML elements through C# code.
  • Save and load files from the local file system.
  • Create views and bind them to data.
  • Use navigation to move to and from pages in the app.
  • Use resources like documentation and sample apps to create your own app.

You'll use Visual Studio 2022 to create an app that you can use to enter a note and save it to local app storage. The app will have two pages:

  • NotePage - a page for editing a single note.
  • AllNotesPage - a page to show all the saved notes.

The final application is shown below:

AllNotesPage

:::image type="content" source="../media/intro/final-all-notes.png" alt-text="Final screenshot of the notes app, showing three save notes.":::

NotePage

:::image type="content" source="../media/intro/final-note.png" alt-text="Final screenshot of the notes app, showing a new blank note.":::

Create the Visual Studio project

To begin this tutorial, you must create a WinUI 3 app project in Visual Studio using the Blank App, Packaged (WinUI 3 in Desktop) C# project template. When creating the project, use the following settings:

  • Project Name

    This must be set to WinUINotes. If the project is named something different, the code you copy and paste from this tutorial may result in build errors. This is because Visual Studio uses the project name as the default namespace for your app code.

  • Windows App SDK

    This tutorial uses features that are new in Windows App SDK 1.7. You must make sure the Windows App SDK NuGet package is updated to version 1.7 or later.

Important

If you have not created a WinUI 3 project before, follow the steps in Start developing Windows apps to make sure your dev environment and Visual Studio project are set up correctly.

When you run your blank app project (as outlined in Start developing Windows apps), you should see an empty window that looks like this:

:::image type="content" source="../media/intro/step-0.png" alt-text="The notes app window with a title bar and empty content area.":::

Tip

You'll frequently refer to API reference docs and conceptual docs while building Windows apps. In this tutorial, you'll see links inline in the text, and in groups labeled, "Learn more in the docs:". These links are optional; you don't need to follow them to complete the tutorial. They're provided in case you want to make note of where to find the information you'll need when you start to create your own apps.