Skip to content

Commit ad765c5

Browse files
committed
docs(XamlNavigation): Updating and creating the Tutorial Docs
1 parent 916e00b commit ad765c5

20 files changed

Lines changed: 238 additions & 109 deletions

README.md

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,21 @@ The samples in this Repository are meant to help other Developers, independent t
77
> [!TIP]
88
> Check out the [Documentation](./doc/articles/introduction.md), for more a more detailed List and future coming Guides and Explanations.
99
10-
## Table of Contents
10+
**Table of Contents** *(of this ReadMe)**
1111

12-
- [DevTKSS Uno Samples](#devtkss-uno-samples)
13-
- [Table of Contents](#table-of-contents)
12+
- Samples in this Repository:
1413
- [Mvux Gallery](#mvux-gallery)
15-
- [Controls to be explored in this App](#controls-to-be-explored-in-this-app)
16-
- [Uno.Extensions to be explored here](#unoextensions-to-be-explored-here)
14+
- [Sampled Controls](#sampled-controls)
15+
- [Uno.Extensions](#sampled-unoextensions)
1716
- [Known Issues](#known-issues)
18-
- [Tutorials](#tutorials)
19-
- [German Language](#german-language)
20-
- [Help Welcome!](#help-welcome)
21-
- [See also](#see-also)
17+
- [Mvux.XamlNavigationApp](./src/DevTKSS.Uno.XamlNavigationApp-1/)
18+
- [Tutorials](#tutorial-videos-and-used-samples)
19+
- [Mvux XamlNavigation App](#mvuxxamlnavigationapp)
20+
21+
Last but not least:
22+
23+
- [Contributions Welcome!](#help-welcome)
24+
- [See also](#see-also)
2225

2326
## Mvux Gallery
2427

@@ -29,9 +32,9 @@ The samples in this Repository are meant to help other Developers, independent t
2932
![Mvux Gallery ShowCase](./doc/articles/images/MvuxGallery-ShowCase.gif)
3033

3134
Following list provides you a quick Overview, what you can find in the [Mvux Gallery](./src/DevTKSS.Uno.Samples/DevTKSS.Uno.Samples.MvuxGallery) App.
32-
The Overview about it and its Tutorials you can find [here](./doc/articles/MvuxGallery/Overview.md)
35+
[Detailed and linked Overview about the Mvux Gallery Contents](./doc/articles/MvuxGallery-Overview.md)
3336

34-
### Controls to be explored in this App
37+
### Sampled Controls
3538

3639
- FeedView combined with:
3740
- GridView
@@ -43,57 +46,46 @@ The Overview about it and its Tutorials you can find [here](./doc/articles/MvuxG
4346
- `ItemOverlayTemplate` DataTemplate layout replicated from WinUI 3 Gallery
4447
- TabBar & TabBarItem
4548

46-
### Uno.Extensions to be explored here
49+
### Sampled Uno.Extensions
4750

4851
- Mvux
49-
- ListFeed
50-
- State
5152
- Navigation
5253
- via Xaml
53-
- Hosting
54-
- DependencyInjection
54+
- Hosting (App Host Builder)
55+
- Dependency Injection
5556
- Serialization
56-
- JsonSerializerContext of each DataModel
57-
- Using multiple `JsonSerializable(typeof...)` Attributes to extend the `CodeSampleOptionsContext.Default.<...>` Items
5857
- Configuration
5958
- Data for Serialization load from separate `appsettings.sampledata.json`
6059
- Storage
61-
- Directly in the Model Definition
62-
- Via Service
63-
- Via StorageExtension
64-
- Referenced currently in private preview package
65-
- Via Uno.Extensions.Storage.IStorage Interface extension
66-
- added as PR to Uno.Extensions [#2734](https://github.com/unoplatform/uno.extensions/pull/2734)
6760
- Localization
68-
- **IStringLocalizer**
69-
- Resources Dictionaries
70-
- Binding current value in `IState<string>` and to corresponding View
71-
- Requesting localized Items via FeedView
72-
- **ILocalizationService**
73-
- Requesting current culture
7461

7562
### Known Issues
7663

7764
- [ ] Fixing ThemeResource Styled that are not seeming to listen to Theme changes
7865
- [ ] Getting `IOptions` with JsonTypeInfo Typed to Dictionary or Tuples does not work as expected and only returns null values. (see [#6](./issues/6))
7966
- [ ] Missing Information about how to use `NamedOptions` at the point they should get returned by the IConfiguration to Configure the Service because Uno did remove the Microsoft own `.Configure<...>` which would be known, but is missing a documentation about those Changes applied. So in amiss of that, we need to create a derived Record for each of them to get the correct JsonSerializable Type and makes us need to define the CodeSampleService Generic. Following this up on [#9](./issues/9)
8067

81-
## Tutorials
68+
## Tutorial Videos and used Samples
69+
70+
To show you how to get to the end result of the Mvux Gallery App, I created a Tutorial Video that will guide you through the process of building this App with the following Sample Apps and added Documentation.
8271

83-
### German Language
72+
### Mvux.XamlNavigationApp
8473

85-
- **Xaml Navigation with NavigationView**
86-
- Video Tutorial Playlist I recommend to check out frequently:
74+
You want to use Mvux as your Presentation in Uno Platform Apps?
75+
You would like to use a NavigationView Control for the base Navigation Layout of your App?
76+
Your Markup is Xaml and you would like to get to know how the NavigationExtensions can help you to achieve this?
77+
Then this is the right Sample App for you, learning how to do this!
8778

88-
https://www.youtube.com/playlist?list=PLEL6kb4Bivm_g81iKBl-f0eYPNr5h2dFX
79+
Here is a sneak peak of the end Result of the Xaml Navigation Tutorial you can explore 😍
8980

90-
- [Documentation in German Language](./doc/articles/MvuxGallery/How-To-XamlNavigation.md)
81+
![Image of final XamlNavigationApp](./doc/articles/images/DevTKSS.Uno.XamlNavigationApp.png)
9182

92-
Here is a sneak peak of the end Result of the Xaml Navigation Tutorial you can explore 😍
83+
Select your preferred Language for the Tutorial for this:
9384

94-
![Image of final XamlNavigationApp](./doc/articles/images/DevTKSS.Uno.XamlNavigationApp.png)
85+
- [German Language](./doc/articles/Mvux.XamlNavigation/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md)
86+
- [English Language](./doc/articles/Mvux.XamlNavigation/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md)
9587

96-
Source Code already available in the [DevTKSS.Uno.XamlNavigationApp](./src/DevTKSS.Uno.XamlNavigationApp-1/) Project.
88+
[Source Code of the DevTKSS.Uno.XamlNavigationApp](./src/DevTKSS.Uno.XamlNavigationApp-1/) Project.
9789
<!--markdownlint-disable MD026 -->
9890
## Help Welcome!
9991

cSpell.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"Mvux",
1010
"Resizetizer",
1111
"resw",
12-
"sampledata"
12+
"sampledata",
13+
"dotnet",
14+
"unoapp"
1315
],
1416
"dictionaries": [
1517
"csharp",
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
uid: DevTKSS.Setup.DevelopmentEnvironment.de
3+
---
4+
5+
# 🛠️ Anleitung: Entwicklungsumgebung für Uno Platform Apps einrichten
6+
7+
Um mit der Entwicklung von Uno Platform Apps zu starten, prüfe bitte ob du folgende Schritte erledigt hast.
8+
9+
> [!TIP]
10+
> Ab dem 6.0 Release des Uno.Sdk bzw. der zugehörigen Visual Studio Extension kann das nachfolgend genutzte Tool `Uno.Check` (CLI Name `uno-check`) hieraus in den meisten Fällen deine Entwicklungsumgebung für alle Endgeräte prüfen. Dennoch ist immer sinnvoll sich einmal die zugehörige Dokumentation durchzulesen um auf etwaige Fehlermeldungen adäquat reagieren zu können.
11+
12+
## Videoanleitung
13+
14+
[!Video [How To: Einrichten unserer Uno Platform Entwicklungsumgebung](https://youtu.be/oI6IZVOeQBI)]
15+
16+
> [!NOTE]
17+
> Die aktuellste Anleitung hierfür findest du immer im offiziellen [Quick Start Guide](https://platform.uno/docs/articles/get-started.html) von Uno Platform.
18+
19+
---
20+
21+
## Checkliste zur Einrichtung
22+
23+
- **Installiere das neueste .NET SDK**\
24+
Download unter [dotnet.microsoft.com](https://dotnet.microsoft.com/)
25+
26+
- **Wähle und installiere deine bevorzugte IDE**
27+
28+
> [!NOTE]
29+
> In diesem Guide wird Visual Studio 2022 Community Edition verwendet. Solltest du mit Rider oder Visual Studio Code arbeiten, informiere dich bitte im zuvor verlinkten Quick Start Guide über etwaige Abweichungen!
30+
31+
- **Installiere die Uno Platform-Erweiterung**\
32+
Erhältlich im [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=nventive.unoplatform)
33+
34+
<!-- - **Installiere **``** über die Kommandozeile**
35+
36+
```bash
37+
dotnet tool install -g Uno.Check
38+
```
39+
40+
- **Starte **``**, um deine Umgebung zu prüfen**
41+
42+
```bash
43+
uno-check
44+
```
45+
46+
> ℹ️ *Dieses Tool hilft dir, fehlende Workloads zu installieren oder Probleme zu beheben, damit du sofort loslegen kannst.* -->
47+
48+
- **Optionen zur Konfiguration entdecken**
49+
50+
- Mehr Infos in der [Uno.Check Dokumentation](https://platform.uno/docs/articles/external/uno.check/doc/configuring-uno-check.html)\
51+
52+
- Oder gib `uno-check -h` im Terminal ein, um alle Optionen zu sehen.
53+
54+
- **Probleme bei der Einrichtung?**\
55+
Sieh dir den [Troubleshooting Guide](https://platform.uno/docs/articles/external/uno.check/doc/troubleshooting-uno-check.html) an.
56+
57+
---
58+
59+
## 🧪 Was du als Nächstes tun solltest
60+
61+
Sobald deine Umgebung eingerichtet ist, empfehlen wir dir, mindestens den [Counter Workshop](https://platform.uno/docs/articles/getting-started/counterapp/get-started-counter.html) durchzuführen. Dabei lernst du unter anderem:
62+
63+
- 📁 Die Struktur einer Uno-App
64+
- 🖼️ Den Umgang mit Assets (Bilder/Icons) über **Uno.Resizetizer**
65+
- 🔗 Die Verwendung von Commands und Bindings
66+
67+
> [!TIPP]
68+
> Abhängig vom Tutorial, das du anschließend machen möchtest, solltest du im Workshop die passende Variante auswählen:
69+
>
70+
> - Wähle zwischen **XAML** oder **C#** als Markup
71+
> - Und zwischen **MVVM** oder **MVUX** als `Presentation` deiner Anwendung.
72+
73+
---
74+
75+
Viel Spaß bei den nachfolgenden Tutorials! 🚀

doc/articles/getting-started.md renamed to doc/articles/HowTo-Setup-DevelopmentEnvironment.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
# Getting Started
1+
---
2+
uid: DevTKSS.Setup.DevelopmentEnvironment.en
3+
---
4+
5+
# How To: Setup your Development Environment for Uno Apps
26

37
To setup your Development Environment for Uno Apps, please make sure, to follow the [Quick Start Guide](https://platform.uno/docs/articles/get-started.html) provided by Uno Platform which will include:
48

doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md renamed to doc/articles/Mvux.XamlNavigation/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
uid: Mvux.XamlNavigationApp.HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml
2+
uid: DevTKSS.Mvux.XamlNavigation.HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml
33
---
44

55
# How To: Navigation mit einer `NavigationView` in einer XAML-Markup + MVUX Präsentation Uno Platform App
@@ -31,7 +31,7 @@ Showcase-Video: [!Video [Navigation in Xaml und Mvux mit Navigation View (Showca
3131

3232
### 📺 Videoanleitung
3333

34-
[!Video [How To: Einrichten unserer Uno Platform Entwicklungsumgebung](https://youtu.be/oI6IZVOeQBI)]]
34+
[!Video [How To: Einrichten unserer Uno Platform Entwicklungsumgebung](https://youtu.be/oI6IZVOeQBI)]
3535

3636
---
3737

doc/articles/Mvux.XamlNavigationApp/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md renamed to doc/articles/Mvux.XamlNavigation/HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
uid: Mvux.XamlNavigationApp.HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml
2+
uid: DevTKSS.Mvux.XamlNavigation.HowTo-Navigation-with-NavigationView-in-Mvux-and-Xaml
33
---
44

5-
## How-To: Navigating with a NavigationView in a XAML Markup + MVUX Presentation App
5+
# How-To: Navigating with a NavigationView in a XAML Markup + MVUX Presentation App
66

77
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.
88

@@ -12,7 +12,7 @@ This sample demonstrates how to use a `NavigationView` control to navigate betwe
1212
- Routes defined in the `App.xaml` file.
1313
- A `MainPage.xaml` that serves as the entry point for navigation.
1414
- `DashboardPage` and `SecondPage` as example pages to navigate to.
15-
- Each of the pages binds to a string statefull property to demonstrate state management gatered by the MVUX.
15+
- Each of the pages binds to a string stateful property to demonstrate state management gathered by the MVUX.
1616

1717
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.
1818

@@ -21,7 +21,7 @@ As this SampleApp is produces alongside a Community Tutorial Video on YouTube, y
2121
> [!NOTE]
2222
> 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.
2323
24-
### Prerequisites
24+
## Prerequisites
2525

2626
- Visual Studio 2022 or later with the Uno Platform extension installed.
2727
- `uno-check --tfm net9.0-desktop` command executed in the Terminal gives you green light for all applyable checks.
@@ -34,14 +34,14 @@ To configure the app using the Visual Studio Wizard, follow these steps:
3434

3535
1. Create a new Uno Platform App:
3636

37-
1. Select the `recommended` Template.
38-
1. Select the `net9.0` target framework.
39-
1. Select `Xaml` as Markup.
40-
1. Select `MVUX` as Presentation.
41-
1. Select `Regions`, `Dependency Injection`, as Extensions.
42-
1. *Optional: `Toolkit` `Localization`, `Configuration`*
37+
1. Select the `recommended` Template.
38+
2. Select the `net9.0` target framework.
39+
3. Select `Xaml` as Markup.
40+
4. Select `MVUX` as Presentation.
41+
5. Select `Regions`, `Dependency Injection`, as Extensions.
42+
6. *Optional: `Toolkit` `Localization`, `Configuration`*
4343

44-
1. Click `Create` to generate the app.
44+
2. Click `Create` to generate the app.
4545

4646
### [Configuring the App using the CLI](#tab/cli)
4747

@@ -67,4 +67,4 @@ Now you can get started with the navigation in your app! In this video, I will s
6767

6868
[!Video [Navigation in Xaml und Mvux mit Navigation View](https://youtu.be/knt2oOjHH30?si=PNgis0v9ZTR4LRsF)]
6969

70-
[Discover the Source Code](./)
70+
[Discover the Source Code](../../../src/DevTKSS.Uno.XamlNavigationApp-1/)

doc/articles/Mvux.XamlNavigationApp/How-To-XamlNavigation.md renamed to doc/articles/Mvux.XamlNavigation/HowTo-XamlNavigation-Intro-de.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
uid: DevTKSS.Uno.SamplesApps.MvuxGallery.XamlNavigation
2+
uid: DevTKSS.Mvux.XamlNavigation.Intro-de
33
---
44
# Navigieren via Xaml in Uno Apps
55

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
uid: DevTKSS.Uno.SampleApps.MvuxGallery.Overview
33
---
44

5-
## Mvux Gallery
5+
# Mvux Gallery Overview
66

7-
The [Mvux Gallery (source link)](../../../src/DevTKSS.Uno.Samples.MvuxGallery/) Tutorials are currently:
7+
The [Mvux Gallery (source link)](../../../src/DevTKSS.Uno.Samples.MvuxGallery/) should give you a impression of whats possible to achieve with the Mvux and Uno.Extensions packages in your Uno Platform App.
88

9-
- [How-To: Xaml Navigation mit NavigationView (deutschsprachig)](./How-To-XamlNavigation.md)
9+
As it contains already a lot of Controls and Features, I decided to create some Tutorials to guide you through the process of building this App with some Sample Apps and added Tutorials. Take a look at the Table of Contents and Navigationbar in these Docs to see what is already available.
1010

11-
### Controls
11+
## Sampled Controls
1212

13-
Here is a list of Controls and Features you can explore in the MvuxGallery App with links to their Source code in this Repository.
13+
Here is a list of Controls and Features you can explore in the MvuxGallery App with links to their Source code in the MvuxGallery App:
1414

1515
- [Card](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/SimpleCardsPage.xaml)
1616
- [Counter](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/CounterPage.xaml) and [CounterModel](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/ViewModels/CounterModel.cs)
@@ -20,7 +20,7 @@ Here is a list of Controls and Features you can explore in the MvuxGallery App w
2020
- [`ItemOverlayTemplate` DataTemplate](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Styles/Generic.xaml) (*Layout replicated from WinUI 3 Gallery*)
2121
- [TabBar and TabBarItem](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/Views/DashboardPage.xaml) and [Model for Binding Items to ListFeed](../../../src/DevTKSS.Uno.Samples.MvuxGallery/Presentation/ViewModels/DashboardModel.cs)
2222

23-
### Uno.Extensions
23+
## Sampled Uno.Extensions
2424

2525
- Mvux
2626
- ListFeed

doc/articles/MvuxGallery/toc.yml

Lines changed: 0 additions & 9 deletions
This file was deleted.

doc/articles/Willkommen.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
uid: DevTKSS.Uno.SampleApps.Intro.de
3+
_layout: landing
4+
---
5+
<!--markdownlint-disable MD026-->
6+
# Willkommen zu Dokumentation & Tutorials!
7+
8+
Hier findest du praktische Anleitungen und Einblicke zu verschiedenen Beispiel-Apps, die mit der **Uno Platform** entwickelt wurden.
9+
Die Tutorials helfen dir – unabhängig von deinem Vorwissen – die gezeigten Konzepte schnell zu verstehen und direkt umzusetzen.
10+
11+
> 🎯 Ziel: Entwickler*innen aller Erfahrungsstufen beim Einstieg in die Uno Platform unterstützen.
12+
13+
---
14+
15+
## Aktuelle Beispiel-Apps
16+
17+
Hier ein schneller Überblick über die enthaltenen Samples. Detaillierte Infos findest du jeweils im zugehörigen Kapitel des Inhaltsverzeichnisses.
18+
19+
### MvuxGallery
20+
21+
- 📄 [Dokumentation ansehen](./MvuxGallery-Overview.md)
22+
- 🧩 [Zum Quellcode](../src/DevTKSS.Uno.Samples.MvuxGallery/)
23+
24+
### Mvux.XamlNavigationApp
25+
26+
- 📄 [NavigationView in MVUX + XAML](./Mvux.XamlNavigation/HowTo-Navigation-mit-NavigationView-in-Mvux-und-Xaml.md)
27+
- 🧩 [Zum Quellcode](../../src/DevTKSS.Uno.Samples.Mvux.XamlNavigationApp/)
28+
29+
---
30+
31+
## Was du als Nächstes tun kannst
32+
33+
👉 [Umgebung einrichten für Uno Platform App-Entwicklung](./HowTo-Setup-DevelopmentEnvironment.md)
34+
35+
---
36+
37+
<!-- Optional: später aktivieren
38+
## 🔍 Weitere Ressourcen
39+
40+
📚 [API-Dokumentation](./api/)
41+
-->

0 commit comments

Comments
 (0)