docs(MvuxXamlNavigation): Add linked Guide for the Mvux XamlNavigation Tutorial

DevTKSS · DevTKSS · commit 916e00b50e32 · 2025-10-25T17:09:18.000+02:00
diff --git a/doc/articles/Mvux.XamlNavigationApp/How-To-XamlNavigation.md b/doc/articles/Mvux.XamlNavigationApp/How-To-XamlNavigation.md
@@ -89,20 +89,6 @@ Den Namespace, den wir in einer Xaml-basierten Navigation in einer Uno Anwendung
 
 Anhand der MvuxGallery:
 
-[!Video https://www.youtube.com/embed/vVvnK02r2ug?si=aa3V7HhtglLyCuXd]
+[!Video [Showcase Video](https://www.youtube.com/embed/vVvnK02r2ug?si=aa3V7HhtglLyCuXd)]
 
-### Erstellen und Konfiguration der App mit dem Wizard
-
-[!Video https://youtu.be/UGKidrvdKpQ?si=wXszYWvbK4R7FCUc]
-
-(*weitere Video teile folgen!*)
-
-## Weitere interessante Informationen
-
-### Uno Documentation links
-
-- [How-To: Navigate in Xaml](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-NavigateInXAML.html)
-- [How-To: Define Routes](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-DefineRoutes.html)
-- [How-To: Regions](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-Regions.html)
-- [How-To: Use NavigationView to Switch Views](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.html)
-- [How-To: IRouteNotifier](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/Advanced/HowTo-IRouteNotifier.html) (*möglicherweise fehlerhaft aktuell*)
+[!INCLUDE [How-To Navigation mit NavigationView in einer Mvux Xaml App](HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md)]
diff --git a/doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md b/doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md
@@ -0,0 +1,84 @@
+---
+uid: Mvux.XamlNavigationApp.HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml
+---
+
+# How To: Navigation mit einer `NavigationView` in einer XAML-Markup + MVUX Präsentation Uno Platform App
+
+Dieses Beispiel zeigt, wie man das `NavigationView`-Steuerelement verwendet, um zwischen Seiten in einer XAML-Markup- + MVUX-Präsentations-App zu navigieren. Die App ist so strukturiert, dass sie eine einfache Navigation ermöglicht und das MVUX-Muster demonstriert – mit Fokus auf Kürze und Einfachheit.
+
+**Das Beispiel enthält:**
+
+- Ein `NavigationView`-Steuerelement zur Navigation.  
+- Routen, die in der Datei `App.xaml` definiert sind.  
+- Eine `MainPage.xaml`, die als Einstiegspunkt für die Navigation dient.  
+- `DashboardPage` und `SecondPage` als Beispielseiten für die Navigation.  
+- Jede Seite bindet an einen `IState<string>`-Eigenschaft im zugehörigen Model, um die Zustandsverwaltung gemäß MVUX zu demonstrieren.
+
+Da diese Beispiel-App im Rahmen eines Community-Tutorial-Videos auf YouTube erstellt wurde, kannst du dem Video folgen und den Aufbau der App Schritt für Schritt nachvollziehen.
+
+🔗 [Zur Playlist auf YouTube](https://youtube.com/playlist?list=PLEL6kb4Bivm_g81iKBl-f0eYPNr5h2dFX&si=qHkpAUMSW9s8GZCO)
+
+Showcase-Video: [!Video [Navigation in Xaml und Mvux mit Navigation View (Showcase)](https://youtu.be/vVvnK02r2ug)]
+
+---
+
+## 🧰 Voraussetzungen
+
+- Visual Studio 2022 oder neuer mit installierter Uno Platform-Erweiterung  
+- Der Befehl `uno-check --tfm net9.0-desktop` im Terminal muss alle relevanten Prüfungen bestehen
+
+- 📚 Weitere Informationen: [Uno Platform Dokumentation](https://platform.uno/docs/articles/external/uno.check/doc/using-uno-check.html)
+
+### 📺 Videoanleitung
+
+[!Video [How To: Einrichten unserer Uno Platform Entwicklungsumgebung](https://youtu.be/oI6IZVOeQBI)]]
+
+---
+
+## [⚙️ App-Konfiguration mit dem Visual Studio-Wizard](#tab/vs-wizard)
+
+1. Erstelle eine neue Uno Platform App:
+
+   1. Wähle die Vorlage **`recommended`**
+   1. Ziel-Framework: **`net9.0`**
+   1. Markup: **`Xaml`**
+   1. Präsentation: **`MVUX`**
+   1. Erweiterungen: **`Regions`**, **`Dependency Injection`**
+   1. *Optional: `Toolkit`, `Localization`, `Configuration`*
+
+2. Klicke auf **`Create`**, um die App zu generieren.
+
+### 📺 Video Tutorial zur Konfiguration
+
+[!Video [How To: Konfigurieren unserer Uno App Visual Studio Wizard](https://youtu.be/UGKidrvdKpQ)]
+
+---
+
+## [🖥️ App-Konfiguration über die CLI](#tab/cli)
+
+1. Öffne ein Terminal und navigiere in das gewünschte Verzeichnis.  
+2. Führe folgenden Befehl aus, um eine neue App zu erstellen:
+
+  ```bash
+  dotnet new unoapp -o UnoApp2 -preset "recommended" -platforms "desktop" -config False -http "none" -loc False -dsp False -theme-service False
+  ```
+
+---
+
+## 📺 Tutorial Video: Navigation mit `NavigationView` in MVUX und XAML
+
+Jetzt kann es auch schon loslegen mit der Navigation in deiner App! In diesem Video zeige ich dir, wie du das `NavigationView`-Steuerelement in einer XAML-Markup + MVUX-App einrichtest und verwendest. Wir werden die Navigation zwischen verschiedenen Seiten implementieren und dabei die MVUX-Prinzipien anwenden.
+
+[!Video [Navigation in Xaml und Mvux mit Navigation View](https://youtu.be/knt2oOjHH30)]
+
+[Hier geht's zum Source Code](../../../src/DevTKSS.Uno.XamlNavigationApp-1/)
+
+## Weitere interessante Informationen
+
+### Uno Documentation links
+
+- [How-To: Navigate in Xaml](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-NavigateInXAML.html)
+- [How-To: Define Routes](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-DefineRoutes.html)
+- [How-To: Regions](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-Regions.html)
+- [How-To: Use NavigationView to Switch Views](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.html)
+- [How-To: IRouteNotifier](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/Advanced/HowTo-IRouteNotifier.html) (*möglicherweise fehlerhaft aktuell*)
diff --git a/doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md b/doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md
@@ -0,0 +1,70 @@
+---
+uid: Mvux.XamlNavigationApp.HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml
+---
+
+## How-To: Navigating with a NavigationView in a XAML Markup + MVUX Presentation App
+
+This sample demonstrates how to use a `NavigationView` control to navigate between pages in a XAML Markup + MVUX Presentation App. The app is structured to allow for easy navigation and showcases the MVUX pattern, with focus on brevity and simplicity.
+
+**The sample includes:**
+
+- A `NavigationView` control for navigation.
+- Routes defined in the `App.xaml` file.
+- A `MainPage.xaml` that serves as the entry point for navigation.
+- `DashboardPage` and `SecondPage` as example pages to navigate to.
+- Each of the pages binds to a string statefull property to demonstrate state management gatered by the MVUX.
+
+As this SampleApp is produces alongside a Community Tutorial Video on YouTube, you can follow along with the video to see how the app is built step-by-step.
+
+- [Link to the Playlist](https://youtube.com/playlist?list=PLEL6kb4Bivm_g81iKBl-f0eYPNr5h2dFX&si=qHkpAUMSW9s8GZCO)
+
+> [!NOTE]
+> Currently, the Videos are only available in German Language, but there are Transcriptions added to the Video Description, which should be useable through YouTube's Auto-Translate feature. There are also plans to create English Videos for this SampleApp in the future.
+
+### Prerequisites
+
+- Visual Studio 2022 or later with the Uno Platform extension installed.
+- `uno-check --tfm net9.0-desktop` command executed in the Terminal gives you green light for all applyable checks.
+
+For more information on how to set up your development environment, refer to the [Uno Platform documentation](https://platform.uno/docs/articles/external/uno.check/doc/using-uno-check.html).
+
+### [Configuring the App using the VS Wizard](#tab/vs-wizard)
+
+To configure the app using the Visual Studio Wizard, follow these steps:
+
+1. Create a new Uno Platform App:
+
+  1. Select the `recommended` Template.
+  1. Select the `net9.0` target framework.
+  1. Select `Xaml` as Markup.
+  1. Select `MVUX` as Presentation.
+  1. Select `Regions`, `Dependency Injection`,   as Extensions.
+  1. *Optional: `Toolkit` `Localization`, `Configuration`*
+
+1. Click `Create` to generate the app.
+
+### [Configuring the App using the CLI](#tab/cli)
+
+To configure the app using the CLI, follow these steps:
+
+1. Open a terminal and navigate to the directory where you want to create the app.
+1. Run the following command to create a new Uno Platform App:
+
+  ```bash
+  dotnet new unoapp -o UnoApp2 -preset "recommended" -platforms "desktop" -config False -http "none" -loc False -dsp False -theme-service False
+  ```
+
+---
+<!--
+Here is a Video so you can follow along with the steps:
+
+[!Video [Navigation in Xaml und Mvux mit Navigation View]()] // add link to the english localized video here, when available
+-->
+
+### Tutorial Video: Navigation with `NavigationView` in MVUX and XAML
+
+Now you can get started with the navigation in your app! In this video, I will show you how to set up and use the `NavigationView` control in a XAML Markup + MVUX Presentation App. We will implement navigation between different pages while applying the MVUX principles.
+
+[!Video [Navigation in Xaml und Mvux mit Navigation View](https://youtu.be/knt2oOjHH30?si=PNgis0v9ZTR4LRsF)]
+
+[Discover the Source Code](./)
diff --git a/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.de.md b/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.de.md
@@ -0,0 +1,22 @@
+# DevTKSS.Uno.SampleApps.Mvux.XamlNavigationApp-de
+
+Willkommen bei der Uno Platform und insbesondere bei diesem Community-Tutorial-Beispiel!
+
+## Erste Schritte
+
+Wie du mit deiner neuen App loslegst: [Link zur Uno Doku `Getting Started`](https://aka.platform.uno/get-started)
+
+Weitere Informationen zur Verwendung des Uno.Sdk oder zum Aktualisieren der Uno Platform-Pakete in deiner Lösung: [Das Uno.Sdk benutzen](https://aka.platform.uno/using-uno-sdk)
+
+## Tutorial zur Verwendung dieses Beispiels
+
+Diese Beispiel-App ist Teil eines Community-Tutorials, das dich durch den Prozess des Aufbaus einer XAML-Navigations-App mit der Uno Platform führt.
+
+Bitte wähle die Sprache deiner Wahl, um dem Tutorial zu folgen:
+
+- [Deutsche Version](../../doc/articles/Mvux.XamlNavigationApp/HowTo-XamlNavigation.md)
+- [Englische Version](../../doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md)
+
+## Mitwirken
+
+Wenn du zu diesem Beispiel beitragen möchtest, wirf einen Blick auf das [GitHub repository](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps)
diff --git a/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.en.md b/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.en.md
@@ -0,0 +1,22 @@
+# DevTKSS.Uno.SampleApps.Mvux.XamlNavigationApp-en
+
+Welcome to the Uno Platform and particulary this Community Tutorial Sample!
+
+## Getting Started
+
+To discover how to get started with your new app: [Link to the Uno `Getting Started`](https://aka.platform.uno/get-started)
+
+For more information on how to use the Uno.Sdk or upgrade Uno Platform packages in your solution: [Using the Uno.Sdk](https://aka.platform.uno/using-uno-sdk)
+
+## Tutorial to follow along with this sample
+
+This sample app is part of a Community Tutorial that will guide you through the process of building a XAML Navigation App using the Uno Platform.
+
+Please select the language of your choice to follow along:
+
+- [English](../../doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md)
+- [German](../../doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md)
+
+## Contributing
+
+If you want to contribute to this sample, please check out the [GitHub repository](www.github.com/DevTKSS/DevTKSS.Uno.SampleApps)
diff --git a/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.md b/src/DevTKSS.Uno.XamlNavigationApp-1/ReadMe.md
