Add Data binding tutorial using MVVM Toolkit (#5933)

* Update data binding overview and add how-to shell

Update data binding overview, the TOC, and add the MVVM Toolkit data binding how-to topic with header and H1.

* Add some intro info to the mvvm how-to

* Minor tweaks

* Update MVVM Toolkit tutorial

* Update namespace declarations

* Style and SEO edits

* Fix broken link

* Update customer intent

* Refactor tutorial to multiple steps

* Tweak TOC

* Shorten code blocks for fakes

* Add links to github code repo

* Add more MVVM info and seo updates

* Add WinUI class library background info

* Fix broken links

* Edits and update info about models

Author: alvinashcraft

hub/apps/develop/data-binding/index.md

@@ -1,25 +1,31 @@
 ---
 ms.assetid: adfa70f3-a4d9-45d1-8957-c26a7703a276
-title: Data binding in Windows apps
-description: Data binding is a way for your app's UI to display data, and optionally to stay in sync with that data.
-ms.date: 12/12/2022
-ms.topic: article
+title: Data binding in Windows apps - A guide for developers
+description: Learn data binding in Windows apps to connect UI with data dynamically. Master x Bind and Binding markup extensions with examples and best practices for MVVM architecture.
+ms.date: 09/07/2025
+ms.topic: concept-article
 keywords: windows 10, windows 11, windows app sdk, winui, windows ui
 ms.localizationpriority: medium
+# customer intent: As a Windows developer, I want to learn about data binding in Windows apps so that I can create a separation of concerns between my data and UI.
 ---
 
 # Data binding in Windows apps
 
-Data binding is a way for your app's UI to display data, and optionally to stay in sync with that data. Data binding allows you to create a separation of concerns between your data and UI, and that results in a simpler conceptual model as well as better readability, testability, and maintainability of your app. In XAML markup, you can choose to use either the [{x:Bind} markup extension](/windows/apps/develop/platform/xaml/x-bind-markup-extension) or the [{Binding} markup extension](/windows/apps/develop/platform/xaml/binding-markup-extension). And you can even use a mixture of the two in the same app—even on the same UI element. `{x:Bind}` was new for UWP in Windows 10, is also available in Windows App SDK, and it has better performance.
+**Data binding** connects your app's user interface to its data, creating a dynamic relationship that keeps your UI current and responsive. When you implement data binding in Windows apps, you establish a clear separation between your app's data layer and presentation layer, which improves code organization and makes your app easier to maintain and test.
+
+Windows apps support two primary data binding approaches: the [{x:Bind} markup extension](/windows/apps/develop/platform/xaml/x-bind-markup-extension) and the [{Binding} markup extension](/windows/apps/develop/platform/xaml/binding-markup-extension). You can use either approach individually or combine them within the same app. The `{x:Bind}` extension, available in Windows App SDK and UWP apps on Windows 10 and later, offers better performance and compile-time validation.
+
+Whether you're displaying a single data item, binding to collections, or implementing complex architectural patterns like Model-View-ViewModel (MVVM), data binding provides the foundation for creating responsive, maintainable Windows applications.
 
 | Topic | Description |
 |-------|-------------|
 | [Data binding overview](data-binding-overview.md) | This topic shows you how to bind a control (or other UI element) to a single item or bind an items control to a collection of items in a Windows App SDK app. In addition, we show how to control the rendering of items, implement a details view based on a selection, and convert data for display. For more detailed info, see [Data binding in depth](data-binding-in-depth.md). |
 | [Data binding in depth](data-binding-in-depth.md) | This topic describes data binding features in detail. |
 | [Bind hierarchical data and create a master/details view](bind-to-hierarchical-data-and-create-a-master-details-view.md) | You can make a multi-level master/details (also known as list-details) view of hierarchical data by binding items controls to [**CollectionViewSource**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.collectionviewsource) instances that are bound together in a chain. |
 | [Data binding and MVVM](data-binding-and-mvvm.md) | This topic describes the Model-View-ViewModel (MVVM) UI architectural design pattern. Data binding is at the core of MVVM, and enables loose coupling between UI and non-UI code. |
+| [How to data bind with the MVVM Toolkit in WinUI apps](../../tutorials/winui-mvvm-toolkit/intro.md) | This tutorial builds on the [Create a WinUI app](/windows/apps/tutorials/winui-notes/intro) tutorial and shows you how to implement data binding with the [MVVM Toolkit](/dotnet/communitytoolkit/mvvm/). It covers updating your view models to leverage the MVVM Toolkit and the differences between the MVVM Toolkit and traditional MVVM approaches. |
 | [Functions in x:Bind](function-bindings.md) | In Windows App SDK apps, `{x:Bind}` supports using a function as the leaf step of the binding path. In this topic, learn how properties are bound to functions to do conversions, date formatting, text formatting, text concatenations, etc. |
 
-## See also
+## Related content
 
-* [Data binding in UWP apps](/windows/uwp/data-binding/)
+- [Data binding in UWP apps](/windows/uwp/data-binding/)

hub/apps/toc.yml

@@ -196,6 +196,18 @@ items:
                     href: develop/data-binding/bind-to-hierarchical-data-and-create-a-master-details-view.md
                   - name: Data binding and MVVM
                     href: develop/data-binding/data-binding-and-mvvm.md
+                  - name: Data binding with the MVVM Toolkit
+                    items:
+                    - name: Introduction
+                      href: tutorials/winui-mvvm-toolkit/intro.md
+                    - name: 1 - Create class library project
+                      href: tutorials/winui-mvvm-toolkit/class-library.md
+                    - name: 2 - Implement MVVM
+                      href: tutorials/winui-mvvm-toolkit/mvvm-implementation.md
+                    - name: 3 - Add dependency injection
+                      href: tutorials/winui-mvvm-toolkit/dependency-injection.md
+                    - name: 4 - Add unit tests
+                      href: tutorials/winui-mvvm-toolkit/unit-testing.md
               - name: Files, folders, and libraries
                 items:
                   - name: Files, folders, and libraries

hub/apps/tutorials/winui-mvvm-toolkit/class-library.md

@@ -0,0 +1,77 @@
+---
+title: Data Binding with WinUI and MVVM Toolkit - Step 1 - Create a class library project
+description: Create a separate class library project to hold ViewModels and services for improved testability in your WinUI app.
+ms.date: 10/29/2025
+ms.topic: tutorial
+keywords: windows 11, windows app sdk, winui, windows ui, mvvm, mvvm toolkit, dotnet
+ms.localizationpriority: medium
+---
+
+# Create a class library project
+
+To enable unit testing of your ViewModels and services, create a separate class library project. You need this project because WinUI unit test projects can't directly reference WinUI app projects.
+
+## Understanding the WinUI Class Library template
+
+The **WinUI Class Library** project template creates a .NET managed class library (DLL) specifically designed for use with WinUI 3 desktop applications. This template is part of the Windows App SDK and provides important capabilities that a standard .NET class library doesn't include.
+
+### Key differences from a .NET Class Library
+
+The WinUI Class Library template differs from a standard .NET Class Library in several important ways:
+
+- **Windows-specific targeting**: It targets a Windows-specific framework (like `net8.0-windows10.0.19041.0`) rather than the cross-platform .NET framework, giving access to Windows APIs.
+- **Windows App SDK integration**: It includes references to the `Microsoft.WindowsAppSDK` and `Microsoft.Windows.SDK.BuildTools` NuGet packages, providing access to WinUI 3 and Windows App SDK APIs.
+- **WinUI support enabled**: The project includes `<UseWinUI>true</UseWinUI>` in its configuration, enabling WinUI-specific build tasks and XAML compilation.
+- **Windows runtime identifiers**: It's configured for Windows-specific runtime identifiers (win-x86, win-x64, win-arm64).
+
+### Why use a WinUI Class Library?
+
+Use the **WinUI Class Library** template instead of a regular **.NET Class Library** when your library needs to:
+
+- **Reference WinUI 3 types and controls**: The WinUI Class Library template allows you to use types from the `Microsoft.UI.Xaml` namespace and other Windows App SDK APIs in your library code.
+- **Include XAML resources**: If your library contains UserControls, custom controls, or other XAML resources, you need the WinUI Class Library template to properly compile and package these resources.
+- **Integrate with WinUI apps**: The template is configured to work seamlessly with WinUI 3 desktop apps, ensuring compatibility with the Windows App SDK runtime and deployment model.
+- **Support XAML markup compilation**: The template includes the necessary build tasks to compile XAML files into the library.
+
+### When to use a regular .NET Class Library
+
+Use a standard **.NET Class Library** project when your library:
+
+- Contains only pure .NET code (ViewModels, models, services, utilities)
+- Doesn't reference any WinUI 3 or Windows App SDK types
+- Doesn't include any XAML files or UI-related code
+- Needs to be shared across different application types (not just WinUI apps)
+- Targets multiple platforms (for example, .NET MAUI or ASP.NET Core) or operating systems (for example, Linux or macOS)
+
+For a tutorial on adding a .NET Class Library to your solution, see [Extend C# console app and debug in Visual Studio](/visualstudio/get-started/csharp/tutorial-console-part-2).
+
+For this tutorial, use the **WinUI Class Library** template because it allows you to reference WinUI types if needed in the future, and it's specifically designed to integrate with WinUI 3 applications. While our ViewModels and services don't currently require WinUI types, using this template provides flexibility and ensures proper integration with the Windows App SDK environment.
+
+## Create the WinUINotes.Bus project
+
+Create a new WinUI Class Library project named `WinUINotes.Bus` to hold your ViewModels, models, and services in the same solution as your WinUI app project.
+
+1. In Visual Studio, right-click the solution in **Solution Explorer**.
+1. Select **Add** > **New Project...**.
+1. Choose the **WinUI Class Library** template and select **Next**.
+   
+   > [!NOTE]
+   > Make sure you select **WinUI Class Library**, not just **Class Library**. The WinUI Class Library template includes references to the Windows App SDK and WinUI 3 framework.
+
+1. Name the project `WinUINotes.Bus` and select **Create**.
+1. Delete the default `Class1.cs` file.
+
+## Add project references
+
+Project references enable your WinUI app project to use the ViewModels and services defined in the class library project:
+
+1. Right-click the **WinUINotes** project and select **Add** > **Project Reference...**.
+1. Check the **WinUINotes.Bus** project and select **OK**.
+
+The Bus project contains your ViewModels, models, and services, so you can test them independently of the UI layer.
+
+> [!NOTE]
+> The term "Bus" indicates a project that acts as a communication layer or intermediary. It contains the presentation logic (ViewModels), business logic (models), and services that you can share and test independently of the UI.
+
+> [!div class="nextstepaction"]
+> [Continue to step 2 - Implement MVVM with the MVVM Toolkit](mvvm-implementation.md)