12.3 Frame-Anwendung

Im Projekt WPFNavigationFrame kann sich der Benutzer zwei verschiedene Seiten in beliebiger Reihenfolge anzeigen lassen.

Ablauf

Nach dem Start erscheint nur die Steuerung, siehe Abbildung 12.3.

Abbildung 12.3 Steuerung

Von hier aus kann der Benutzer die beiden Seiten über Hyperlinks erreichen. Als Beispiel sehen Sie in Abbildung 12.4 die Seite 2.

Abbildung 12.4 Anzeige der Seite 2

Die Klasse NavigationWindow (siehe unten) stellt eine Browser-ähnliche Navigation mit Vorwärts- und Rückwärts-Buttons und einer History zur Verfügung. Für die Anwendung benötigen Sie die fünf XAML-Dateien MainWindow.xaml, Aufbau.xaml, Steuerung.xaml, Seite1.xaml und Seite2.xaml, jeweils mit Programmcodedatei, siehe Abbildung 12.5.

Abbildung 12.5 Projektdateien

Navigationsdatei

Zunächst der Aufbau der Navigation in der Datei MainWindow.xaml:

<NavigationWindow x:Class="MainWindow"
  xmlns="http://..." xmlns:x="http://..."
  Title="WPFNavigationFrame" Height="200" Width="300"
  Source="Aufbau.xaml" />

Listing 12.5 Projekt »WPFNavigationFrame«, MainWindow.xaml

Es wird eine Standard-WPF-Anwendung erzeugt. Allerdings wird das Hauptelement vom Typ Window auf den Typ NavigationWindow geändert. Die Eigenschaft Source verweist auf den URI der ersten Seite, die nach dem Start im NavigationWindow angezeigt wird. Der Titel der Anwendung wird hier mithilfe der Eigenschaft Title festgelegt.

Alle weiteren Seiten sind vom Typ Page. Einzelne Pages fügen Sie über den Menüpunkt Projekt • Seite hinzufügen hinzu.

Aufbauseite

Es folgt das Layout der Aufbauseite in der Datei Aufbau.xaml:

<Page x:Class="Aufbau"
    xmlns="http://..." xmlns:x="http://...">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="90" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Frame Grid.Row="0" Grid.Column="0"
       Source="Steuerung.xaml" />
    <Frame x:Name="fr" Grid.Row="0" Grid.Column="1" />
  </Grid>
</Page>

Listing 12.6 Projekt »WPFNavigationFrame«, Aufbau.xaml

Innerhalb eines Layouts vom Typ Grid wird eine Seite aufgeteilt wie eine Tabelle, in Zeilen (engl.: Rows) und Spalten (engl.: Columns). Die Nummerierung der Zeilen und Spalten beginnt bei 0.

Hier sind es zwei Spalten, eine davon mit fester Breite. In beiden Spalten wird ein Steuerelement der Klasse Frame erzeugt. Die Eigenschaft Source des linken Frames verweist auf den URI der Page, die links angezeigt wird.

Der rechte Frame bekommt einen Namen, damit er später als Ziel für die Navigation dienen kann. Zunächst wird im rechten Frame noch keine Seite angezeigt.

Steuerungsseite

Es folgt der Code der Steuerungsseite, in der Datei Steuerung.xaml:

<Page x:Class="Steuerung"
    xmlns="http://..." xmlns:x="http://..."
    Background="LightGray">
  <StackPanel Grid.Row="0" Grid.Column="0">
    <TextBlock Margin="5">
      <Hyperlink NavigateUri="Seite1.xaml"
        TargetName="fr">Zur Seite 1</Hyperlink>
    </TextBlock>
    <TextBlock Margin="5">
      <Hyperlink NavigateUri="Seite2.xaml"
        TargetName="fr">Zur Seite 2</Hyperlink>
    </TextBlock>
  </StackPanel>
</Page>

Listing 12.7 Projekt »WPFNavigationFrame«, Steuerung.xaml

Die Eigenschaft NavigateUri der beiden Hyperlink-Objekte verweist auf die URI der Seiten, die nach der Betätigung angezeigt werden sollen. Ein Hyperlink-Objekt muss innerhalb eines umgebenden Steuerelements stehen.

Mithilfe der Eigenschaft TargetName wird festgelegt, dass die Seiten im rechten Frame erscheinen. In Seite1.xaml und Seite2.xaml steht jeweils eine einfache Page ohne besondere Elemente. Als Beispiel wird Seite2.xaml gezeigt:

<Page x:Class="Seite2"
    xmlns="..." xmlns:x="..." Background="DarkGray">
  <Label Foreground="White">Seite 2</Label>
</Page>

Listing 12.8 Projekt »WPFNavigationFrame«, Seite2.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.