13.6 Eine geteilte Seite
In der Projektvorlage Split gibt es die Seitenvorlage vom Typ Geteilte Seite. Dort kann links eines von mehreren Elementen ausgewählt werden, dessen Details jeweils rechts angezeigt werden. Im nachfolgenden Projekt MAFrame sehen Sie, wie eine solche Navigation prinzipiell aufbaut wird.
Das Projekt besteht aus insgesamt vier Seiten, in den Dateien MainPage.xaml, Seite1.xaml, Seite2.xaml und Seite3.xaml. Nach Start der App sieht man die Startseite (MainPage.xaml). Dort können Sie über die Buttons auf der linken Seite auswählen, welche Seite rechts angezeigt werden soll, zum Beispiel die Seite 2 (siehe Abbildung 13.10).
Abbildung 13.10 Projekt »MAFrame«
Das Projekt basiert wiederum auf der Projektvorlage Blank. Das Hinzufügen weiterer Seiten wurde bereits erläutert. Für die Seiten 1 bis 3 dieses Projekts wird jeweils die Seitenvorlage Leere Seite verwendet.
Der XAML-Code der Startseite:
<Page x:Class="MAFrame.MainPage" ... >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Left">
<Button Click="b1_Click" Margin="10">
Seite 1 anzeigen</Button>
<Button Click="b2_Click" Margin="10">
Seite 2 anzeigen</Button>
<Button Click="b3_Click" Margin="10">
Seite 3 anzeigen</Button>
</StackPanel>
<Frame x:Name="fr" Grid.Column="1" />
</Grid>
</Page>
Listing 13.11 Projekt »MAFrame«, Datei MainPage.xaml
Die Teilung der Seite wird mithilfe eines Grid-Layouts erreicht. In der linken Spalte des Grids stehen die drei Buttons. In der rechten Spalte des Grids steht nur ein Frame-Element inklusive Bezeichner, das die Navigation innerhalb dieser Spalte ermöglicht.
Es folgt der Programmcode:
Private Sub b1_Click(sender As Object, e As RoutedEventArgs)
fr.Navigate(GetType(Seite1))
End Sub
Private Sub b2_Click(sender As Object, e As RoutedEventArgs)
fr.Navigate(GetType(Seite2))
End Sub
Private Sub b3_Click(sender As Object, e As RoutedEventArgs)
fr.Navigate(GetType(Seite3))
End Sub
Listing 13.12 Projekt »MAFrame«, Datei MainPage.xaml.vb
Es wird mithilfe des bezeichneten Frame-Elements fr navigiert. Die neue Seite erscheint an der Stelle dieses Frame-Elements, also in der rechten Spalte des Grids.
Die Seiten 1 bis 3 sind sehr einfach aufgebaut. Als Beispiel folgt Seite 1:
<Page x:Class="MAFrame.Seite1" ... >
<StackPanel Margin="10">
<TextBlock FontSize="24">Das ist Seite 1</TextBlock>
</StackPanel>
</Page>
Listing 13.13 Projekt »MAFrame«, Datei Seite.xaml
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.