You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-4Lines changed: 13 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -83,15 +83,24 @@ A complete tutorial application demonstrating navigation patterns with MVUX and
83
83
84
84
#### Tutorial Content
85
85
86
+
-**[Tutorial Serie Uno.Extensions Navigation via Xaml](https://devtkss.github.io/DevTKSS.Uno.SampleApps/articles/en/Navigation/Extensions-Navigation-en.html)** - Step-by-step guide (🇩🇪 German | 🇬🇧 English) - or [watch the Video Guide 🇩🇪](https://youtu.be/knt2oOjHH30)!
87
+
-**[Listen to Route Changes with IRouteNotifier](https://devtkss.github.io/DevTKSS.Uno.SampleApps/articles/en/Navigation/HowTo-ChangeRoutes-en.html)** - Advanced navigation handling - or [🇩🇪 German Version](https://devtkss.github.io/DevTKSS.Uno.SampleApps/articles/de/Navigation/HowTo-ChangeRoutes-de.html)
88
+
-**[Video Tutorial Series](https://youtube.com/playlist?list=PLEL6kb4Bivm_g81iKBl-f0eYPNr5h2dFX)** - Complete walkthrough (🇩🇪 German with English subtitles)
89
+
-**[Source Code](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/tree/master/src/DevTKSS.Uno.XamlNavigationApp/)** - Browse the implementation
-**[Tutorial Documentation](https://devtkss.github.io/DevTKSS.Uno.SampleApps/articles/en/Navigation/Extensions-Navigation-en.html)** - Step-by-step guide (🇩🇪 German | 🇬🇧 English)
93
-
-**[Video Tutorial Series](https://youtube.com/playlist?list=PLEL6kb4Bivm_g81iKBl-f0eYPNr5h2dFX)** - Complete walkthrough (🇩🇪 German with English subtitles)
94
-
-**[Source Code](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/tree/master/src/DevTKSS.Uno.XamlNavigationApp-1/)** - Browse the implementation
100
+
A basic application demonstrating selection and display of member names in a `ListView` bound to a `ListState<string>` in the Model using MVUX.
101
+
102
+
-**[Video Tutorial - How To: Binden von ListState und ImmutableList zu FeedView & ListView im UI | Uno Community Tutorial](https://youtu.be/wOsSlv1YFic)** - Step-by-step guide (🇩🇪 German)
Copy file name to clipboardExpand all lines: docs/articles/de/Navigation/Extensions-Navigation-de.md
+8-2Lines changed: 8 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,13 @@ Lass uns zuerst einmal schauen, was man beispielsweise in einer Xaml-basierten U
28
28
29
29
## Voraussetzungen
30
30
31
-
Diese Tutorial Reihe baut darauf auf, dass deine Entwicklungsumgebung bereits vollständig eingerichtet ist und der Befehl `uno-check --tfm net9.0-desktop` ausgeführt in deinem Terminal grünes Licht gibt. Hier kannst du diese auch noch einmal nachschauen:
31
+
Diese Tutorial Reihe baut darauf auf, dass deine Entwicklungsumgebung bereits vollständig eingerichtet ist und der nachfolgende Befehl dir in deinem Terminal ausgeführt grünes Licht gibt:
32
+
33
+
```bash
34
+
uno-check --tfm net9.0-desktop`
35
+
```
36
+
37
+
Hier kannst du bei Bedarf auch noch einmal nachschauen:
32
38
33
39
- [Tutorial: Einrichten der Entwicklungsumgebung](xref:DevTKSS.Uno.Setup.DevelopmentEnvironment.de)
34
40
@@ -46,7 +52,7 @@ Wenn du diesen Schritt abgeschlossen hast, fahren wir mit der Implementierung de
46
52
47
53
---
48
54
49
-
-[Hier geht's zum Source Code der verwendeten Beispiel Anwendung XamlNavigationApp](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/blob/master/src/DevTKSS.Uno.XamlNavigationApp-1)
55
+
- [Hier geht's zum Source Code der verwendeten Beispiel Anwendung XamlNavigationApp](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/blob/master/src/DevTKSS.Uno.XamlNavigationApp)
Copy file name to clipboardExpand all lines: docs/articles/de/Navigation/HowTo-ChangeRoutes-de.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -117,7 +117,7 @@ Solltest du das noch nicht gemacht haben, dann geht das jetzt ganz einfach auch
117
117
118
118
Nun fehlt nur noch die eigentliche Reaktion auf die Routen Änderung. Das machen wir in der Methode `OnRouteChanged`, die wir zuvor im Konstruktor registriert haben. Hier ist ein Beispiel, wie du dies implementieren kannst:
In diesem Teil des Tutorials, wollen wir uns anschauen, wie man eine einfache Seitennavigation mittels einer `NavigationView` erstellen kann.
8
8
9
-
**Was zuvor geschah...**
9
+
**Was wir zuvor gemacht haben**
10
10
11
11
Wir haben uns nun zuvor im Intro angeschaut, was wir mit der `Uno.Extensions.Navigation` und der `NavigationView` alles machen können und im anschluss das Setup der Anwendung angepasst oder diese erstellt. Nun wollen wir uns anschauen wie man dann dann auch umsetzen kann!
12
12
13
13
## Tutorial Video: Navigation mit `NavigationView` in MVUX und XAML
14
14
15
15
In diesem Video werden wir uns zusammen anschauen, wie du ein `NavigationView`-Steuerelement in einer XAML-Markup-App einrichtest und verwendest. Wir werden die Navigation zwischen verschiedenen Seiten implementieren und dabei die MVUX-Prinzipien anwenden. Den Code kannst du dabei direkt aus dem Code hierunter kopieren und in deine Anwendung einfügen, wenn du möchtest, aber aus eigener Erfahrung heraus hilft es dir mehr, den Code selber zu schreiben und dabei zuzuschauen, wie es funktioniert. So kannst du auch besser verstehen, was du tust und warum.
@@ -84,27 +84,33 @@ Nun wollen wir die von der Extension ermöglichten Eigenschaften, sogenannte `At
84
84
85
85
```diff
86
86
<Grid uen:Region.Attached="True"
87
-
utu:SafeArea.Insets="VisibleBounds">
88
-
<Grid.RowDefinitions>
87
+
utu:SafeArea.Insets="VisibleBounds">
88
+
<Grid.RowDefinitions>
89
89
<RowDefinition Height="*" />
90
90
<RowDefinition Height="Auto"/>
91
-
</Grid.RowDefinitions>
92
-
<NavigationView uen:Region.Attached="True"
93
-
Header="{Binding Title}"
94
-
IsPaneToggleButtonVisible="True"
95
-
PaneDisplayMode="Auto">
96
-
<NavigationView.MenuItems>
91
+
</Grid.RowDefinitions>
92
+
93
+
<NavigationView uen:Region.Attached="True"
94
+
Header="{Binding Title}"
95
+
IsPaneToggleButtonVisible="True"
96
+
PaneDisplayMode="Auto">
97
+
98
+
<NavigationView.MenuItems>
97
99
<NavigationViewItem Content="Home"
98
100
+ uen:Region.Name="Dashboard"
99
101
Icon="Home" />
100
102
<NavigationViewItem Content="Some View"
101
103
+ uen:Region.Name="Second"
102
104
Icon="AddFriend" />
103
-
</NavigationView.MenuItems>
104
-
<NavigationView.Content>
105
-
<Grid uen:Region.Attached="True" />
106
-
</NavigationView.Content>
107
-
</NavigationView>
105
+
</NavigationView.MenuItems>
106
+
107
+
<NavigationView.Content>
108
+
<Grid uen:Region.Attached="True" />
109
+
</NavigationView.Content>
110
+
111
+
</NavigationView>
112
+
113
+
</Grid>
108
114
```
109
115
110
116
1. Zu guter Letzt benötigt das `Grid`, welches wir für die Navigation des Content der `NavigationView` verwenden wollen nun noch zwei letzte weitere und sehr wichtige Eigenschaften setzen, ohne welche es gut möglich ist, dass unser Vorhaben misslingt.
@@ -118,8 +124,8 @@ Nun wollen wir die von der Extension ermöglichten Eigenschaften, sogenannte `At
118
124
119
125
```diff
120
126
<NavigationView.Content>
121
-
<Grid uen:Region.Attached="True"
122
-
+ uen:Region.Navigator="Visibility"
127
+
<Grid uen:Region.Attached="True"
128
+
+ uen:Region.Navigator="Visibility"
123
129
Visibility="Visible" />
124
130
</NavigationView.Content>
125
131
```
@@ -137,7 +143,7 @@ Nun wollen wir die von der Extension ermöglichten Eigenschaften, sogenannte `At
137
143
*Die Namensgebung ist also keineswegs Zufall!*
138
144
139
145
>[!NOTE]
140
-
> Der "Visibility"-Navigator ist gemäß der Dokumentation verfügbare Bezeichner für diese Eigenschaft.
146
+
> Der "Visibility"-Navigator ist gemäß der [Uno Dokumentation der einzige verfügbare Bezeichner für diese Eigenschaft](https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/HowTo-Regions.html#properties-in-the-region-class).
Nun wollen wir uns einmal anschauen, wie wir passend zur Uno Extensions Navigation unser Model bzw. ViewModel aufbauen müssen.
7
+
Nun wollen wir uns einmal anschauen, wie wir passend zur Uno Extensions Navigation unsere Verbindung zwischen der `View` und dem `ViewModel` aufbauen müssen.
8
8
9
-
## Voraussetzungen
9
+
Hierfür wollen wir uns natürlich ersteinmal die Frage stellen: **Navigation nur im Xaml - Geht das eigentlich?**
10
10
11
-
1. Erstelle hierfür zu aller erst ein Model bzw. ViewModel Element.
11
+
*Ja und Nein.*
12
12
13
-
[!INCLUDE [Anleitung zur Erstellung eines grundlegenden Model bzw. ViewModels](../HowTo-Adding-New-VM-Class-Record-de.md)]
13
+
Also, dann lass uns das doch mal genauer betrachten. Was bedeutet das denn nun?
14
14
15
-
2. Füge nun noch den `INavigator` als **DependencyInjection** Konstruktor Parameter hinzu.
15
+
-**Ja:**
16
16
17
-
[!INCLUDE [Anleitung: Nutze Konstruktor Parameter für DependencyInjection](../HowTo-Using-DI-in-ctor-de.md)]
17
+
Tatsächlich brauchst du grundsätzlich weder Codebehind noch Code im ViewModel / Model für die Navigation, wenn du die `Attached Properties` in dem Xaml deiner Seite nutzt.
18
18
19
-
## Navigation im Xaml
19
+
**Wie das geht, erfährst du bei Interesse direkt hier:**
20
20
21
-
Grundsätzlich benötigst du tatsächlich nicht unbedingt einen Navigations-Code im ViewModel / Model, wenn du wie in der [Anleitung: Definieren des UI mit NavigationView für ExtensionsNavigation](xref:DevTKSS.Uno.ExtensionsNavigation.HowTo-Defining-UI.de) die `Attached Properties` nutzt!
21
+
[Anleitung: Definieren des UI mit NavigationView für ExtensionsNavigation](xref:DevTKSS.Uno.ExtensionsNavigation.HowTo-Defining-UI.de)
22
22
23
-
In diesem Fall wären es klassischerweise nur dann die Title Eigenschaften oder andere, die du von View zu ViewModel bindest und du wärst fertig. Und genau das ist auch ein großer Vorteil dieser Extension meiner Meinung nach.
23
+
In diesem Fall wären es dann nur zum beispiel die anzuzeigende Eigenschaft, wie die `string`-Property `Title`, die du entsprechend in deiner `Page`, also deiner `View` zum `ViewModel` bzw. `Model` bindest und schon bist du fertig damit!
24
+
25
+
> [!TIP]
26
+
> Mit der Attached Property `uen:Navi` kannst du den Titel der Seite in der NavigationView setzen.
27
+
28
+
-**Nein:**
29
+
30
+
1. Du musst weiterhin die Routen, die du Navigieren möchtest in der `App.xaml.cs` Klasse in der `RegisterRoutes` Methode registrieren, damit der `INavigator` auch weiß, was zusammen gehört und von wo du mit welchen "Qualifizierern" welche Routen erlauben möchtest zu navigieren.
31
+
2. Wenn du in deinem Model bzw. ViewModel eine Navigation auslösen möchtest, dann brauchst du den `INavigator` dort natürlich, um die Navigation zu starten.
32
+
33
+
## Vorraussetzungen schaffen
34
+
35
+
Gut, also lass uns doch mal davon ausgehen, dass wir genannten zweiten Fall haben und folgendes Tun wollen:
36
+
37
+
1. Unser Anwender soll mit einem Klick auf einen `Button` eine Funktion in unserem `ViewModel` bzw. `Model` auslösen können
38
+
2. Diese Funktion soll ihn zur `SecondPage` navigieren, die wir in der Uno App Vorlage inkludiert hatten, aber es könnte auch jede andere Seite sein, die du selbst erstellt und registriert hast.
39
+
40
+
Angenommen das hier ist unsere `App.xaml.cs` mit der `RegisterRoutes` Methode:
## Binden der View UI Steuerelemente an Eigenschaften im ViewModel bzw. Model
26
71
@@ -64,6 +109,10 @@ public partial class DashboardViewModel : ObservableObject
64
109
}
65
110
```
66
111
112
+
Mit diesem Code ist es dir möglich, die `Name` Eigenschaft in der View zu binden und den `NavigateSecondAsyncCommand` zu verwenden, um zur `SecondViewModel` zu navigieren.
113
+
114
+
Hierbei kannst du einen Button oder ein anderes Steuerelement in der View verwenden, um die Navigation auszulösen, aber indem du die `IsEnabled` Eigenschaft des Steuerelements an den `CanExecute` Status des Befehls bindest, kannst du die Navigation nur dann ausführen, wenn der Name nicht leer ist.
115
+
67
116
### [Mvux](#tab/mvux)
68
117
69
118
```csharp
@@ -92,8 +141,11 @@ public partial record MainModel
92
141
}
93
142
```
94
143
95
-
Mit diesem Code ist es dir möglich, die `Name` Eigenschaft in der View zu binden und den `NavigateSecondAsyncCommand` zu verwenden, um zur `SecondViewModel` zu navigieren.
144
+
Hier könntest du dann in der View einen Button definieren, der die `NavigateSecondAsync` Methode aufruft, um zur `SecondModel` zu navigieren, sich den `Name` Wert holt und diesen als Daten an die nächste Seite übergibt.
145
+
Wenn du jetzt einmal vergleichst, wie das in Mvvm und Mvux aussieht, wirst du feststellen, dass es im Grunde genommen sehr ähnlich ist, aber in Mvux das ganze doch irgendwie übersichtlicher und du weniger "boilerplate" Code benötigt um das selbe zu erreichen.
96
146
97
-
Hierbei kannst du einen Button oder ein anderes Steuerelement in der View verwenden, um die Navigation auszulösen, aber indem du die `IsEnabled` Eigenschaft des Steuerelements an den `CanExecute` Status des Befehls bindest, kannst du die Navigation nur dann ausführen, wenn der Name nicht leer ist.
147
+
Und um zum beispiel direkt an den `IState<string> Name` eine TwoWay Bindung in der View zu erstellen, brauchst du nicht einmal eine `PropertyChanged` Benachrichtigung, wie du es in Mvvm tun müsstest, sondern hängst einfach an das `.Value(...)` ein `.ForEach(...)` daran, erstellst eine Methode, die den neuen Wert empfängt und kannst dort direkt damit arbeiten. Kein lästiges Implementieren von `INotifyPropertyChanged` mehr.
148
+
149
+
Mehr zu diesem Thema findest du hier im [Tutorial: Auf Routen Änderungen reagieren](xref:DevTKSS.Uno.ExtensionsNavigation.HowTo-ChangeRoutes.de)
# Anleitung: Registrieren und Verwalten von Routen
6
6
7
-
Mit der `Uno.Extensions.Navigation` verwenden wir eine zentrale Definition der **Routen Registrierung** in der App Klasse [`App.xaml.cs`(source link)](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/blob/master/src/DevTKSS.Uno.XamlNavigationApp-1/App.xaml.cs) gehandhabt, was man sich vereinfacht schlichtweg wie eine Landkarte vorstellen kann.
7
+
Mit der `Uno.Extensions.Navigation` verwenden wir eine zentrale Definition der **Routen Registrierung** in der App Klasse [`App.xaml.cs`(source link)](https://github.com/DevTKSS/DevTKSS.Uno.SampleApps/blob/master/src/DevTKSS.Uno.XamlNavigationApp/App.xaml.cs) gehandhabt, was man sich vereinfacht schlichtweg wie eine Landkarte vorstellen kann.
8
8
9
9
## Voraussetzungen
10
10
@@ -22,7 +22,7 @@ Bevor du mit der Routen Registrierung beginnst, brauchst du noch zwei Dinge:
22
22
23
23
Füge die dafür benötigte Methode wie folgt in deine App Klasse unterhalb der `OnLaunched` Methode ein:
1. Eine weitere Seite hinzugefügt habe: `DashboardPage`
76
+
2. Ein zugehöriges Model erstellt habe: `DashboardModel`
77
+
3. Diese in der `routes.Register` Methode registriert habe, indem ich sie als `Nested` Routen der `Main`-Route hinzugefügt habe.
78
+
4. Und die beiden Routen `"Dashboard"``"Second"` somit nun in der `RouteMap` der `Main`-Route verschachtelt sind.
69
79
70
-
Hiersiehstdu, dassicheineweitereSeitehinzugefügthabe, die `DashboardPage` undeinModeldazuerstellthabenamens `DashboardModel`. AußerdemhabeichdieRoute `Second` indie `RouteMap` der `Main`-Routeverschachtelt.
80
+
Klasse! Nun sind diese Routen also korrekt registriert und können mit dem "Nested"-Qualifizierer `-` in der NavigationView oder anderen Navigationssteuerelementen verwendet werden um sie innerhalb der `MainPage``"Main"`-Route anzuzeigen!
71
81
72
82
## Nützliche Informationen
73
83
@@ -77,4 +87,4 @@ Wenn du anstelle von **MVVM** das **MVUX** verwendest, solltest du darauf achten
77
87
78
88
## Anwendung starten
79
89
80
-
NunsindwirauchschonfertigmitderRoutenRegistrierungundkönnendieAnwendungstarten. WenndunundieAppstartest, solltestduinderLagesein, die `MainPage` zusehenundvondortauszudenanderenSeitenzunavigieren.
90
+
Nun sind wir auch schon fertig mit der Routen Registrierung und können die Anwendung starten. Wenn du nun die App startest, solltest du in der Lage sein, die `MainPage` zu sehen und von dort aus zu den anderen Seiten zu navigieren. Diese sollten dann im `Content` Bereich der `NavigationView` angezeigt werden, wenn du alle Schritte bisher befolgt hast.
0 commit comments