13.5 Eine Reihe von Seiten

Im nachfolgenden Projekt MAReihe sehen Sie, wie prinzipiell eine Navigation innerhalb einer Reihe von Seiten aufgebaut wird, wie es zum Beispiel in den Projektvorlagen Grid und Split geschieht.

Das Projekt besteht aus insgesamt drei Seiten, in den Dateien MainPage.xaml, Seite2.xaml und Seite3.xaml. Es gibt jeweils eine zugehörige Programmcode-Datei, siehe Projektmappen-Explorer in Abbildung 13.6.

Abbildung 13.6 Projekt »MAReihe«, Dateien

Nach Start der App sieht man die Startseite (MainPage.xaml), siehe Abbildung 13.7.

Abbildung 13.7 Projekt »MAReihe«, Startseite

Von hier aus kann man auf die zweite Seite wechseln, siehe Abbildung 13.8.

Abbildung 13.8 Projekt »MAReihe«, Seite 2

Von der zweiten Seite kann man wieder zurück zur Startseit wechseln oder zu einer dritten Seite, siehe Abbildung 13.9.

Abbildung 13.9 Projekt »MAReihe«, Seite 3

Das Projekt basiert wiederum auf der Projektvorlage Blank. Das Hinzufügen weiterer Seiten wurde bereits erläutert. Für die Seiten 2 und 3 dieses Projekts wird jeweils die Seitenvorlage Leere Seite verwendet.

Der XAML-Code der Startseite:

<Page x:Class="MAReihe.MainPage" ... >
  <StackPanel HorizontalAlignment="Center">
    <TextBlock FontSize="24" HorizontalAlignment="Center"
      Margin="10">Das ist die Startseite</TextBlock>
    <Button Width="200" Height="50" HorizontalAlignment=
      "Center" Click="b2_Click">Zur Seite 2</Button>
  </StackPanel>
</Page>

Listing 13.5 Projekt »MAReihe«, Datei MainPage.xaml

Nach der Überschrift folgt der Button, über den man zur nächsten Seite wechseln kann. Die zugehörige Ereignisprozedur:

Private Sub b2_Click(sender As Object, e As RoutedEventArgs)
    Frame.Navigate(GetType(Seite2))
End Sub

Listing 13.6 Projekt »MAReihe«, Datei MainPage.xaml.vb

Die Eigenschaft Frame der Seite ermöglicht die Navigation. Sie stellt wiederum ein Objekt dar. Die Methode Navigate() dieses Objekts erwartet die Klasse der Seite, zu der gewechselt werden soll. Die Klasse wird über GetType() bereitgestellt.

Entsprechend sieht es auf den beiden anderen Seiten aus. Zunächst Seite 2:

<Page x:Class="MAReihe.Seite2" ... >
  <StackPanel HorizontalAlignment="Center">
    <TextBlock FontSize="24" HorizontalAlignment="Center"
      Margin="10">Das ist Seite 2</TextBlock>
    <Button Width="200" Height="50" HorizontalAlignment=
      "Center" Click="bm_Click">
      Zurück zur Startseite</Button>
    <Button Width="200" Height="50" HorizontalAlignment=
      "Center" Click="b3_Click">Zur Seite 3</Button>
  </StackPanel>
</Page>

Listing 13.7 Projekt »MAReihe«, Datei Seite2.xaml

Die Klasse Seite2 ist wie die Klasse jeder Seite von der Klasse Page abgeleitet. Hier gibt es zwei Buttons: Zurück zur Startseite und Zur Seite 3. Es folgt der Programmcode:

Private Sub bm_Click(sender As Object, e As RoutedEventArgs)
    Frame.Navigate(GetType(MainPage))
End Sub

Private Sub b3_Click(sender As Object, e As RoutedEventArgs)
    Frame.Navigate(GetType(Seite3))
End Sub

Listing 13.8 Projekt »MAReihe«, Datei Seite2.xaml.vb

Es werden die Seiten angefordert, die von der Klasse MainPage beziehungsweise von der Klasse Seite3 sind. Zu guter Letzt die Seite 3:

<Page x:Class="MAReihe.Seite3" ... >
  <StackPanel HorizontalAlignment="Center">
    <TextBlock FontSize="24" HorizontalAlignment="Center"
      Margin="10">Das ist Seite 3</TextBlock>
    <Button Width="200" Height="50" HorizontalAlignment=
      "Center" Click="b2_Click">Zurück zur Seite 2</Button>
  </StackPanel>
</Page>

Listing 13.9 Projekt »MAReihe«, Datei Seite3.xaml

Es folgt der Programmcode:

Private Sub b2_Click(sender As Object, e As RoutedEventArgs)
    Frame.Navigate(GetType(Seite2))
End Sub

Listing 13.10 Projekt »MAReihe«, Datei Seite3.xaml.vb

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.