Development

Raus aus dem Labyrinth

Konzeption und Implementierung der App-Navigation für die UWP
Keine Kommentare

Das klassische Anwendungsmenü scheint ein Auslaufmodell zu sein und ist für Apps der UWP auch nur noch in Ausnahmefällen sinnvoll. Dennoch braucht es auch in Apps eine durchdachte Struktur, um den Nutzer zielgerichtet zu leiten. Tabs, Pivot- und Hubnavigation muss man richtig einsetzten.

Mit den neuesten Windows-10-Updates wird die Universal Windows Platform (UWP) auch für sogenannte Line-of-Business-Anwendungen interessanter. Ein wichtiger Grund: Aus der App heraus ist nun auch ein SQL Server direkt ansprechbar und der Zugang zu Datenquellen daher nicht nur über die Cloud möglich. Ist bei einer neuen Applikation die Entscheidung zugunsten einer UWP-App gefallen, müssen neben den funktionalen Aspekten auch die Belange der Nutzerführung bzw. -interaktion betrachtet werden. Ein wichtiger Punkt ist dabei die Festlegung bzw. Ausgestaltung der Navigationsstruktur. Dasselbe gilt auch, wenn eine bestehende Desktopanwendung zu einer UWP-App migriert werden soll. Dabei geht es nicht nur darum, die technischen Fragen zu klären; ebenso ist das gesamte Konzept der Navigation bzw. Menüführung auf den Prüfstand zu stellen und in den meisten Fällen auch vollständig neu zu fassen. Klassische Windows-Anwendungen haben den Nutzer jahrelang an die Navigation über Anwendungsmenüs gewöhnt. Eine Variation ist das Menüband, das Microsoft Office vor vielen Jahren eingeführt hat. Mittlerweile wird es auch in zahlreichen anderen Applikationen verwendet. Unterstützt wird die Bediendung meist über Symbolleisten.

Für Apps geht man bei der Nutzerführung bekanntermaßen einen ganz anderen Weg. Im Mittelpunkt steht stets der Content. Die Bedienelemente sind nur kontextbezogen vorhanden und passen sich dynamisch der Situation an. Darüber hinaus dient meist auch der Content selbst als Navigationshilfe. Dieses Vorgehen ist inspiriert durch die Nutzung von Apps auf mobilen Geräten, denn diese werden eben nicht mit Maus und Tastatur bedient, sondern per Touch-Eingabe. UWP-Apps nehmen hier eine Sonderstellung ein: Sie funktionieren sowohl auf Tablets mit Windows 10, bei denen die Bedienung per Touch erfolgt, als auch auf klassischen Desktop- und Notebook-Geräten. Bei modernen Bildschirmen ist auch hier eine Touch-Bedienung möglich, aber sie wird meist nur als zusätzliches Feature genutzt, da Maus und Tastatur ebenso vorhanden sind.

In diesem Artikel soll speziell die Navigation einer UWP-App im Fokus liegen. Die beiden Hauptthemen sind dabei Designgrundlagen für eine gelungene Navigation und die Implementierung der Navigationsstruktur.

Gute Hilfe bei der Codierung leistet dabei das Windows Template Studio. Für ein neues App-Projekt kann man damit schon grundlegende Navigationsstrukturen anlegen. Beginnen wir mit den Möglichkeiten der App-Navigation.

Designbasics

Das Navigationsdesign spielt eine entscheidende Rolle bei der Entwicklung einer App. Die Navigation ist gewissermaßen der Ausgangspunkt der Benutzererfahrung. Es gibt zwar kein einheitliches Navigationsdesign, das für jede Anwendung optimal ist, aber es gibt allgemeine Richtlinien und Prinzipien, an denen sich Entwickler orientieren können. Es ist wichtig, eine richtige Entscheidung hinsichtlich Struktur, Inhalt und Funktionen der Navigation zu treffen. Eine gute Navigation kann als konsistent, einfach und klar beschrieben werden:

  • Konsistent – Die Navigation erfüllt die Erwartungen der Anwender. Merkmale sind die Verwendung von Standardsteuerungselementen, die Einhaltung von Konventionen für Symbole, Positionen und Stilregeln. Das Ziel: Der Benutzer kann sich schnell und intuitiv zurechtfinden.
  • Einfach – Weniger ist mehr! Die Navigation soll nicht mehr Elemente als notwendig enthalten. Der Zugriff auf die wichtigen Elemente soll unmittelbar möglich sein. Aktuell weniger wichtige Objekte können Sie ausblenden.
  • Klar – Die Wege und Optionen einer Navigation müssen klar und verständlich werden. Dabei sollte die Anordnung so erfolgen, dass die Pfade für den Benutzer logisch sind.

Fragen Sie sich stets: „Was möchte der Nutzer in der aktuellen Situation wahrscheinlich tun? Welches Ziel hat er?“

Es gibt zwei allgemeine Strukturen für die Gestaltung der Navigation einer App: Zum einen die flache und zum anderen die hierarchische Navigation. Eine flache Struktur ist durch parallele Seiten gekennzeichnet. Diese Struktur ist immer dann empfehlenswert, wenn die Seiten in beliebiger Reihenfolge angezeigt werden können und sie nicht über eine offensichtliche Beziehung zwischen über- und untergeordneten Elementen verfügen. Bei einer hierarchischen Struktur werden die Seiten in einer Baumstruktur organisiert. Jede untergeordnete Seite hat ein übergeordnetes Element. Ein übergeordnetes Element kann eine oder mehrere untergeordnete Seiten haben. Existiert in einer Struktur nur ein untergeordnetes Element, dann sollte man streng prüfen, ob diese hierarchische Anordnung hier wirklich angebracht ist. Der Anwender muss ein übergeordnetes Element durchlaufen, um eine untergeordnete Seite aufzurufen. Die Verwendung einer hierarchischen Struktur ist bei Seiten empfehlenswert, die in einer bestimmten Reihenfolge aufgerufen werden. Viele Apps verwenden eine Kombination dieser beiden Strukturelemente, d. h. sie arbeiten mit einer flachen Struktur auf oberster Ebene, in der die Seiten in beliebiger Reihenfolge angezeigt werden können. Darüber hinaus wird für einzelne Seiten (nicht alle) eine hierarchische Struktur auf der darunter liegenden Ebene aufgebaut. Die Möglichkeiten der Navigation sind in Abbildung 1 zusammengefasst.

Neben der Seitenstruktur sind ebenso die (zulässigen) Pfade in einer App festzulegen. Grundsätzlich sollte eine direkte Navigation (Peer-to-Peer) nur zwischen Elementen der gleichen Ebene möglich sein (Abb. 2). Verwendet man beispielsweise eine Tabnavigation, kann der Anwender zwischen den Registerkarten leicht navigieren, beispielsweise durch eine einfache Wischbewegung. Im Beispiel betrifft das die Navigation auf oberster Ebene (A bis D) und auf den unteren Ebenen. Das direkte Aufrufen einer Seite der Ebene C2 von der Ebene A2 oder A3 aus ist nicht empfehlenswert. Dadurch würde der Nutzer verwirrt werden und möglicherweise den Überblick darüber verlieren , wo er sich gerade befindet. Ergibt die Praxis tatsächlich häufiger die Notwendigkeit solch übergreifender „Sprünge“, muss man prüfen, ob die Seite in der Struktur richtig angeordnet ist. Beispielsweise kann eine Settings-Seite durchaus von allen Seiten erreichbar sein. Diese sollte dann aber auch auf oberster Ebene platziert werden bzw. könnte man diese Seite gewissermaßen als Sonderseite so anordnen, dass man sie bequem von allen anderen Seiten aus erreichen kann. Dem Anwender ist dann auch automatisch klar, dass er mit der Rückwärtsnavigation wieder zur Ausgangsseite zurückkehrt. Grundsätzlich gilt folgendes Prinzip: „Die Navigationsstruktur muss einfach, klar und ohne Überraschungen sein.“

Abb. 2: Bei der App-Navigation keine „Spaghettistruktur“ vorsehen

Abb. 2: Bei der App-Navigation keine „Spaghettistruktur“ vorsehen

Es empfiehlt sich, den Anwender visuell zu unterstützen. Mit Hilfe einfacher grafischer Symbole können Sie das erreichen. Diese können Sie stets an der gleichen Position auf den Seiten anordnen. Wichtig: Die Symbole müssen eindeutig und allgemein bekannt sein. Die Startseite kann man dann zum Beispiel mittels des Symbols Home kennzeichnen, Programmeinstellungen durch das Zahnradsymbol usw. Unseres Erachtens ist die Verdeutlichung mit Symbolen einer Auszeichnung mit Text vorzuziehen. Erstens sagt ein Bild mehr als tausend Worte, d. h. ein eindeutiges Symbol ist schneller zu erfassen. Zweitens ist ein Symbol kompakter, d. h. es benötigt weniger Platz und drittens müssen Sie Grafiken nicht lokalisieren. Wird die App für mehrere Sprachräume angeboten, dann müssen Sie keine umfassenden Texte übersetzen. Das Prinzip kann sogar so weit gehen, dass man bei Apps fast ausschließlich auf eine grafische Visualisierung der Nutzerführung setzt.

Das passende User Interface für die Navigation auswählen

Die UWP bringt eine Reihe von Steuerelementen für die Gestaltung der App-Navigation mit. Welches Element man wählen sollte hängt davon ab, welche Anzahl von Seiten man in die Navigation einbinden möchte. Die Designrichtlinien von Microsoft empfehlen bei fünf oder weniger Seiten, Registerkarten und Pivot zu verwenden. Bei einer größeren Anzahl von Seiten sollte man die Navigationsansicht inklusive Hamburger-Menü bzw. die Master-/Detailansicht verwenden. Sehen wir uns die einzelnen Möglichkeiten etwas genauer an (Abb. 3):

  • Frame: Die meisten Apps mit mehreren Seiten verwenden ein Frame. Dabei hat die App eine Hauptseite, die den Frame und ein Navigationselement beinhaltet. Wählt man während der Laufzeit über die Navigation eine bestimmte Seite, wird diese durch das Frame geladen und angezeigt.
  • Registerkarten und Pivot: Das Steuerelement zeigt eine horizontale Liste (Tableiste) an, die eine Auswahl von Seiten gleicher Ebene erlaubt. Die Anzahl der Seiten sollte zwischen zwei und fünf liegen. Ebenso muss davon auszugehen sein, dass der Nutzer häufiger zwischen den Seiten wechselt.
  • Navigationsansicht: Auf der linken Seite wird eine Navigationsansicht eingeblendet, die man auch in verkleinerter Ansicht – also ein- und ausgeklappt – darstellen kann. Dieses Navigationsmuster wird im Regelfall mit dem sogenannten Hamburger-Menü verwendet. Die Navigationsleiste kennt unterschiedliche Anzeigemodi, nämlich: minimiert – hier bleibt nur die Hamburger-Schaltfläche fest, während der Navigationsbereich nach Bedarf ein- und ausgeblendet wird; kompakt – der Navigationsbereich wird als schmaler Streifen angezeigt, der zur vollen Breite erweitert werden kann; erweitert – der Navigationsbereich wird neben dem Inhalt geöffnet. Beim Schließen durch Aktivieren des Hamburger-Buttons wird die Navigationsfläche zu einem schmalen Streifen verringert.
  • Master/Details-Muster: Hier handelt es sich um keine Navigation zwischen Seiten, stattdessen gibt es einen Masterbereich, der i. d. R. als Listenansicht ausgeführt wird. Wenn ein Element in der Masterliste ausgewählt wird, wird der Detailbereich aktualisiert. Dieses Muster ist beispielsweise typisch für eine E-Mail- oder Kontaktlisten-App.
  • Hub: Man kann damit Inhalte in unterschiedlichen, aber zusammenhängenden Abschnitten oder Kategorien organisieren. Hubs eignen sich gut zum Durchblättern und Ansehen unterschiedlicher Inhalte.
  • Hyperlinks/Buttons können auch für die Navigation verwendet werden. Diese Navigationselemente können Sie für eine spezielle Benutzerführung auf einer Seite einsetzen. Zum Beispiel können Sie auf der Settings Page einen Hyperlink platzieren, der auf die Datenschutzrichtlinie zur App verweist. Sie öffnet sich dann im Standardbrowser.

Nach diesen allgemeinen Ausführungen wollen wir uns jetzt ansehen, wie man diese essenziellen Navigationsmuster für die UWP implementiert.

Abb. 3: Steuerelemente zur Navigation in einer UWP-App

Abb. 3: Steuerelemente zur Navigation in einer UWP-App

Gibt es ein klassisches Menü in einer UWP-App?

Apps sehen eigentlich eine andere Art von Bedienung vor als über klassische Anwendungsmenüs. Touch-Interaktion und Kontextbezug sind die favorisierten Navigationsprinzipien. Da die UWP jedoch auch auf Desktop-PCs und Notebooks abzielt, gibt es gerade im Bereich von Businessanwendungen den Bedarf, auch weiterhin die Programmführung mittels Menüelementen anzubieten. Das Ziel von Microsoft ist es, möglichst viele Desktopanwendungen mittel- und langfristig zu Apps für die UWP zu migrieren. Nicht überall wird sich (sofort) eine neue Form der Interaktion durchsetzen. Im Windows Community Toolkit findet sich daher auch ein Menu Control. Im Abschnitt zu Codierung kommen wir auf dessen Verwendung zurück. Zwischenfazit: Ob man ein klassisches Menü in einer UWP-App verwendet, ist keine Frage der Technik. Vielmehr richtet sich die Verwendung nach dem genauen Einsatzzweck der App. Typische Fragen sind: Wie und auf welchen Geräten wird die App bedient? Passt ein Anwendungsmenü besser zum Handling dieser Art von Software als andere Navigationsansätze? Bei einer datenintensiven Business-App ist das möglicherweise der Fall. Bei einer App, die auch auf einem Tablet bedient werden soll, eher nicht.

Applikationsrahmen für Navigation aufsetzen

Betrachten wir nun die technische Umsetzung der Navigationsstruktur. Wir wollen dazu jeweils Apps im Grundgerüst erstellen, die die unterschiedlichen Varianten der Navigation verwenden. Bei der Entwicklung einer neuen App kann man ein solches Template verwenden, um es dann entsprechend den eigenen Anforderungen funktional und designtechnisch zu vervollständigen. Um eine neue App auf der Basis der UWP zu starten, beginnt man am besten mit dem Windows Template Studio die Arbeit. Es kann als Add-in über den Menüpunkt Extension- und Updates in Visual Studio installiert werden. In Windows Template Studio kann man u. a. die Basiseinstellungen für die Navigation konfigurieren (Abb. 4).

Abb. 4: Im Template Studio kann man zwischen Pivot- und Hamburger-Navigation wählen

Abb. 4: Im Template Studio kann man zwischen Pivot- und Hamburger-Navigation wählen

Windows Template Studio sieht dabei die folgenden Navigationsarten vor: Navigationsmenü (Hamburger-Menü), Pivot und Tabs sowie Blank (keine Navigation). Selbst wenn wir eine andere Navigationsstruktur erstellen möchten, empfiehlt sich der Einsatz des Template Studios, um ein Grundgerüst für die App zu erstellen. Ebenso kann man im nächsten Schritt direkt die Architektur (Design Pattern) der App konfigurieren. Für UWP-Apps ist die Verwendung des MVVM-Musters zu empfehlen. Es kann mit eigenen Basisklassen umgesetzt oder über ein vorgefertigtes Framework verwenden werden, beide Optionen stehen zur Auswahl. Nun aber zurück zur Navigation. Je nach Ansatz muss man bei der Implementierung folgendermaßen vorgehen:

  • Navigationsmenü: Für jede anzuzeigende Seite wird eine eigene Datei angelegt. Der Wurzeltyp der Seiten ist vom Typ Page. Benötigt wird eine Startseite, die in unserem Beispiel den Namen ShellPage trägt. Sie enthält als zentrales Element ein Control vom Typ NavigationView. Die Einträge im Hamburger-Menü sind Elemente vom Typ NavigationViewItem. An die Einträge wird der Code gebunden, der die einzelnen Seiten aufruft. Listing 1 zeigt einen Auszug aus der Startseite ShellPage. Zusätzlich gibt es die Möglichkeit, Navigationselemente zu gruppieren (NavigationViewItemSeparator), Gruppen von Elementen zu beschriften (NavigationViewItemHeader), eine Suchbox auf App-Ebene einzubauen (AutoSuggestBox) und einen Einstiegspunkt für App-Einstellungen vorzusehen. Die Fußzeile kann man ebenfalls frei mit Inhalt anreichern. Dazu dient die Eigenschaft PaneFooter. Ein einfaches Beispiel zeigt Abbildung 5.
Abb. 5: Navigation über Navigation Pane und Hamburger-Menü

Abb. 5: Navigation über Navigation Pane und Hamburger-Menü

Pivot und Tabs: Auch hier benötigen Sie für jede Seite eine eigene Datei vom Typ Page. Die Navigation wird von einer zentralen (übergeordneten) Seite gesteuert. Hier wird ein Control vom Typ Pivot eingefügt, das als untergeordnete Elemente (PivotItem) die Seiten der Registerkarten enthält (Listing 2). Das Pivot-Steuerelement ist ein ItemsControl, daher kann man grundsätzlich Elemente eines beliebigen Typs damit verwalten. Handelt es sich nicht um ein Element vom Typ PivotItem, wird es implizit in ein PivotItem eingeschlossen. Die Elemente können dabei wie im Beispiel direkt im XAML-Code erstellt oder durch Verweis auf eine Datenquelle mit Hilfe der Eigenschaft ItemsSource hinzugefügt werden. Je nach Breite des Bildschirms und der Anzahl der Pivot-Elemente gibt es zwei Ansichten des Steuerelements. Bei der sogenannten stationären Ansicht werden alle Pivot-Header im oberen Bereich angezeigt. Durch Tippen auf eine solche Beschriftung wird zur entsprechenden Seite navigiert. Das Pivot selbst wird jedoch nicht verschoben. Das aktive Pivotelement wird hervorgehoben. Bei der Ansicht Karussell passen nicht alle Pivot-Header in den verfügbaren Bereich. Durch Tippen auf eine Pivot-Beschriftung wird die entsprechende Seite aufgerufen und das aktive Pivot-Element rückt an die erste Position. Eine Tab-Navigation mit fünf Seiten sehen Sie in Abbildung 6.

Abb. 6: Navigation über Tabs

Abb. 6: Navigation über Tabs

  • Master/Details: Dazu wird das Control MasterDetailsView aus dem NuGet Package Microsoft.Toolkit.Uwp.UI.Controls benötigt. Es müssen Templates für die Detailanzeige und die Navigationsleiste definiert werden. Die einzelnen Elemente können mittels Datenbindung angesprochen werden (Listing 3). Damit eignet sich die MasterDetailsView eher für eine Navigation auf Ebene von Daten als auf Ebene von Seiten. Ein Beispiel sehen Sie in Abbildung 7.
Abb. 7: Master/Detail-Anordnung für eine Seite

Abb. 7: Master/Detail-Anordnung für eine Seite

  • Menüs: Es ist möglich, ein klassisches Anwendungsmenü in UWP-Apps zu integrieren. Zum Sinn und Zweck dieser Navigationsoption lesen Sie bitte auch den Kasten „Gibt es ein klassisches Menü in einer UWP-App?“. Voraussetzung ist, dass Sie über NuGet das Package Microsoft.Toolkit.Uwp.UI.Controls einbinden. In der betreffenden Seite bekommen Sie über den XAML-Eintrag xmlns:controls=“using:Microsoft.Toolkit.Uwp.UI.Controls“ einen Zugriff auf die zugehörigen UI Controls, u. a. auf das Steuerelement MenuControl. Die Verwendung des MenuControls selbst ist recht einfach, wie ein Blick in Listing 4 zeigt. Das Ergebnis ist ein klassisches Anwendungsmenü (Abb. 8). Diese Form der Navigation dürfte am häufigsten bei der Migration von Desktopanwendung zu einer UWP-App zum Einsatz kommen. Eine Anpassung des Navigationskonzepts ist an dieser Stelle dann nicht notwendig.
Abb. 8: Ein Menü in einer UWP-App

Abb. 8: Ein Menü in einer UWP-App

  • Hub: Auf der Startseite platzieren Sie ein Steuerelement vom Typ Hub. Die einzelnen Bereiche sind vom Typ HubSection. Über die Eigenschaft IsHeaderInteractive kann veranlasst werden, dass der Nutzer zu weitergehenden Informationen gelangen kann. Dazu wird automatisch ein Hyperlink mit der Beschriftung See more eingeblendet. Die einzelnen Bereiche können jeweils unterschiedlich gestaltet werden. Einen Ausschnitt aus dem Quellcode zeigt Listing 5. Es wird ein Hub mit drei Bereichen erstellt, wobei die beiden Bereiche Sports und Tech interaktiv sind und weitere Seiten aufrufen (Abb. 9). Die Seitennavigation wird dann an zentraler Stelle, hier durch die Methode Hub_SectionHeaderClick, gesteuert.
Abb. 9: Navigation mit Hubsteuerelement

Abb. 9: Navigation mit Hubsteuerelement

 

<Page
  x:Class="App1.Views.ShellPage"
  ...>
  <NavigationView
    ...">
    <NavigationView.MenuItems>
      <NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
      <NavigationViewItem x:Uid="Shell_Page1" Icon="Document" helpers:NavHelper.NavigateTo="views:Page1Page" />
      <NavigationViewItem x:Uid="Shell_Page2" Icon="Document" helpers:NavHelper.NavigateTo="views:Page2Page" />
    </NavigationView.MenuItems>
    ...
    ...
  </NavigationView>
</Page>

 

<Page
  ...>
  <Grid>
    <Pivot x:Uid="PivotPage">
      <PivotItem x:Uid="PivotItem_Main">
        <Frame>
          <views:MainPage/>
        </Frame>
      </PivotItem>
      <PivotItem x:Uid="PivotItem_Page1">
        <Frame>
          <views:Page1Page/>
        </Frame>
      </PivotItem>
      <PivotItem x:Uid="PivotItem_Page2">
        <Frame>
          <views:Page2Page/>
        </Frame>
      </PivotItem>
      ...
    </Pivot>
  </Grid>
</Page>

 

<Page
  ...>
  ...
    <Grid x:Name="ContentArea">
      <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <TextBlock
        Grid.Row="0"
        x:Uid="MasterDetail_Title"
        Margin="{StaticResource MediumLeftRightMargin}"
        Style="{StaticResource PageTitleStyle}" />
      <controls:MasterDetailsView
        Grid.Row="1"
        x:Name="MasterDetailsViewControl"
        ItemsSource="{x:Bind ViewModel.SampleItems}"
        SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}"
        ItemTemplate="{StaticResource ItemTemplate}"
        DetailsTemplate="{StaticResource DetailsTemplate}"
        NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
        BorderBrush="Transparent" />
    </Grid>
</Page>

 

<Page
  x:Class="Menue.MainPage"
  ...
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  mc:Ignorable="d"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid>
    <controls:Menu>
      <controls:MenuItem Header="File">
        <MenuFlyoutItem Text="New" />
        <MenuFlyoutItem Text="Open..." />
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit" />
      </controls:MenuItem>
      <controls:MenuItem Header="Edit" />
    </controls:Menu>
  </Grid>
</Page>

 

<Page
  ...>
    <Grid>
      <Hub Header="News" SectionHeaderClick="Hub_SectionHeaderClick">
        <HubSection MinWidth="600" Header="Latest">
          <DataTemplate>
            <Grid>
              <TextBlock Text="The most recent news will be here." Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
          </DataTemplate>
        </HubSection>

        <HubSection x:Name="Tech" Header="Tech" IsHeaderInteractive="True" Background="#F4F4F4" MinWidth="250">
          <DataTemplate>
            <StackPanel>
              <TextBlock Text="Tech news goes here." Style="{ThemeResource BodyTextBlockStyle}"/>
              <TextBlock Text="Click the header to go to the Tech page." Style="{ThemeResource BodyTextBlockStyle}"/>
            </StackPanel>
          </DataTemplate>
        </HubSection>
      </Hub>
    </Grid>
</Page>

Sie haben jetzt die Grundgerüste der wesentlichen Navigationsmöglichkeiten für eine UWP-App kennengelernt. Dabei ist natürlich auch eine gewisse Kombination der Möglichkeiten gegeben. Auf oberster Ebene sind die Varianten Navigation Pane (Hamburger-Menü), Pivot/Tabs, Master/Details und, mit konzeptionellen Einschränkungen, die Verwendung eines Anwendungsmenüs möglich. Master/Details und Tabs stellen auch eine Möglichkeit der Navigation auf Seitenebene dar. Hier muss man jedoch aufpassen, dass man die Navigationsstruktur insgesamt nicht zu kompliziert gestaltet. Ein einheitliches Konzept ist Pflicht.

Navigation und Navigationscache

Um die Navigation zwischen mehreren Seiten durchzuführen verwendet man die Methode Navigate(typeof(Seitenname)) der Klasse Frame, also zum Beispiel Frame.Navigate(typeof(SportsNewsPage)). Dabei muss man beachten, dass bei jedem Seitenaufruf standardmäßig eine neue Instanz der Seite erstellt und aufgerufen wird. Wechselt der Anwender also mehrfach zwischen den Seiten und hat er Eingaben/Einstellungen auf einer Seite vorgenommen, dann sind diese Daten bei einem erneuten Aufruf der Seite nicht mehr verfügbar. Um das zu vermeiden, muss man die Eigenschaft NavigationCacheMode der betreffenden Seite (Klasse Page) auf true setzen. Jetzt wird bei Ausführung der Methode Frame.Navigate(…) die Seite aus dem Cache geladen. Die vorherigen Nutzerdaten sind dann noch vorhanden, ohne dass man diese explizit wiederherstellen muss.

Fazit

Als Navigation bezeichnet man die Nutzerführung in Apps. Diese unterscheidet sich von der klassischen Menüführung in herkömmlichen Desktopanwendungen. Statt funktionaler Aspekte steht der Content im Mittelpunkt. Die Elemente zur Navigation werden dem aktuellen Inhalt angepasst. Ebenso dienen Teile des Contents selbst als Elemente der Navigation. Ein Beispiel dafür sind Hyperlinks. Für die Hauptnavigation stehen auf der Universal Windows Platform mehrere Steuerelemente zur Auswahl. Ein wichtiges Kriterium für die Auswahl des richtigen Navigationskonzepts ist die Zahl der Seiten. Bei der Migration einer Desktopanwendung zur UWP ist die Neugestaltung der Nutzerführung essenziell.

Der Beispielcode zu den besprochenen Navigationskonzepten findet sich auf GitHub.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -