Teil 3: Navigation, Layout und Ansichten

Applies to Windows only

Das UI-Design Ihrer Windows Store-App dreht sich um die Strukturierung und Darstellung von Inhalten für Ihre Benutzer, darüber hinaus darum, Befehle bereitzustellen, die den Benutzern das Anwenden von Aktionen auf Inhalte ermöglichen. UI-Design bedeutet die Strukturierung von Seiten in der App, die Navigation zwischen Seiten und das Layout von Inhalten und Befehlen auf den einzelnen Seiten.

In einer Windows Store-App können verschiedene Navigationsmuster verwendet werden. Unter Navigationsmuster finden Sie Hilfe zur Auswahl des besten Navigationsmusters für die App.

Hinweis  

Sie können die beiden primären Navigationsmuster (das flache Navigationsmuster und das hierarchische Navigationsmuster) in Aktion erleben, wenn Sie sich die Reihe App-Features – Gesamtübersicht ansehen.

Wichtig  Dieses Lernprogramm ist für Microsoft Visual Studio 2013 und Windows 8.1 konzipiert. Teile des Lernprogramms funktionieren in Verbindung mit Microsoft Visual Studio 2012 und Windows 8 nicht ordnungsgemäß.

In diesem Lernprogramm lernen Sie Folgendes:

  • Hinzufügen von Seiten und Navigationselementen
  • Anordnung von Steuerelementen und Inhalten auf einer Seite
  • Anpassen des Seitenlayouts an verschiedene Ausrichtungen und Ansichten

Vorbereitung

Schritt 1: Hinzufügen von Seiten und Navigation

In diesem Beispiel beschreiben wir die Grundlagen zur Erstellung einer Benutzeroberfläche mithilfe von XAML (Extensible Application Markup Language). Zu diesem Zweck erstellen Sie eine einfache Bildanzeige, die es dem Benutzer ermöglicht, ein Bild in seinen Bildern auszuwählen und zusammen mit einigen Informationen zur Bilddatei anzuzeigen. Für die Bildanzeige fügen Sie der App "Hello, world" aus Teil 2 eine neue Seite hinzu. Zur Verwendung der neuen Seite fügen Sie Befehle für die Navigation zwischen den Seiten hinzu.

Als Erstes müssen Sie der App eine neue Seite für die Bildanzeige hinzufügen. Anschließend fügen Sie der Hauptseite einen Navigationsbefehl hinzu, damit der Benutzer zur neuen Seite wechseln kann.

Hinzufügen der Bildanzeigeseite

Wir beginnen hier mit dem Code aus Teil 2: Verwalten von App-Lebenszyklus und -Zustand.

JJ215600.wedge(de-de,WIN.10).gifSo wird's gemacht: Hinzufügen von Seiten zu einer App

  1. Klicken Sie auf Projekt > Neues Element hinzufügen. Das Dialogfeld Neues Element hinzufügen wird geöffnet.

    Tipp  Stellen Sie sicher, dass im Projektmappen-Explorer nicht die Projektmappe, sondern das Projekt ausgewählt ist.

  2. Wählen Sie im linken Bereich unter Visual C# oder Visual Basic den Vorlagentyp Windows Store aus.
  3. Wählen Sie im mittleren Bereich Standardseite aus.
  4. Geben Sie "PhotoPage.xaml" als Namen für die Seite an.
  5. Klicken Sie auf Hinzufügen. Die XAML- und CodeBehind-Dateien für Ihre Seite werden dem Projekt hinzugefügt.

    Hier sehen Sie das Dialogfeld Neues Element hinzufügen.

    Visual Studio-Dialogfeld Add New Item (Neues Element hinzufügen)

    Wenn Sie der Vorlage Leere App zum ersten Mal eine neue Seite hinzufügen, bei der es sich nicht um eine leere Seite handelt, zeigt Visual Studio ein Dialogfeld mit dem Hinweis an, dass Sie dem Projekt fehlende Dateien hinzufügen müssen. Da Sie diese Dateien in Teil 1 hinzugefügt haben, sollte die Warnung nicht angezeigt werden. Klicken Sie andernfalls auf Ja, um die entsprechenden Dateien hinzuzufügen. Ihrem Projekt werden im Ordner Common Dateien für einige Hilfsklassen hinzugefügt.

  6. Wählen Sie zum Ändern des Seitentitels am Seitenanfang von PhotoPage.xaml den Text "My Application" aus.

    Stellen Sie sicher, dass der TextBlock mit dem Namen pageTitle im Panel Eigenschaften angezeigt wird und die Eigenschaftenansicht (Ereignisschaltfläche) ausgewählt ist.

  7. Klicken Sie im Bereich Eigenschaften unter Allgemein auf den Eigenschaftsmarker für die Text-Eigenschaft. Das Eigenschaftenmenü wird geöffnet.

    Hinweis  Der Eigenschaftsmarker ist das kleine Feldsymbol rechts vom jeweiligen Eigenschaftswert. Der Eigenschaftsmarker für Text ist grün, um anzuzeigen, dass er auf eine Ressource festgelegt ist.

  8. Wählen Sie im Eigenschaftsmenü Ressource bearbeiten aus. Das Dialogfeld Ressource bearbeiten wird geöffnet.
  9. Ändern Sie im Dialogfeld Ressource bearbeiten den Wert "My Application" in "Hello, photo!".
  10. Klicken Sie auf OK.

    Die XAML für die Ressourcendefinition wird wie folgt aktualisiert

    
    <x:String x:Key="AppName">Hello, photo!</x:String>
    
    
    .

Hinzufügen von Navigation

Das XAML-UI-Framework verfügt über ein integriertes Navigationsmodell, das Frame- und Page-Elemente verwendet und wie die Navigation in einem Webbrowser funktioniert. Das Frame-Steuerelement hostet Page-Elemente. Mit dem zugehörigen Navigationsverlauf können Sie außerdem zwischen den besuchten Seiten wechseln. Bei der Navigation können auch Daten zwischen den Seiten übergeben werden.

In Teil 1 und Teil 2 haben Sie den Code in App.xaml.cs/.vb gesehen, der einen Frame generiert und zur MainPage navigiert, wenn die App gestartet wird. Hier fügen Sie der MainPage auf die gleiche Weise einen Befehl für die Navigation zur neuen PhotoPage hinzu.

JJ215600.wedge(de-de,WIN.10).gifNavigation zwischen Seiten

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei MainPage.xaml, um sie zu öffnen.
  2. Suchen Sie im XAML-Editor das StackPanel, das den greetingOutput-TextBlock enthält. Fügen Sie direkt nach dem greetingOutput TextBlock-Objekt ein Button-Element hinzu, siehe folgendes Beispiel:
    
    <Button Content="Go to photo page"/>
    
    

    Hier ist die Schaltfläche, die Sie zusammen mit dem umgebenden XAML-Code hinzugefügt haben.

    
    
    <StackPanel Grid.Row="1" Margin="120,30,0,0">
        <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                     TextChanged="NameInput_TextChanged"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
        <Button Content="Go to photo page"/>
    </StackPanel>
    
    
    
  3. Wählen Sie im XAML-Editor oder der Designansicht das Button-Element "Zur Fotoseite wechseln" aus, das Sie MainPage.xaml hinzugefügt haben.
  4. Klicken Sie im Bereich Eigenschaften auf die Schaltfläche Ereignisse (Ereignisschaltfläche).
  5. Suchen Sie am Anfang der Ereignisliste nach dem Click-Ereignis. Geben Sie im Textfeld für das Ereignis "PhotoPageButton_Click" als Namen der Funktion ein, die das Click-Ereignis behandelt.
  6. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird erstellt und im Code-Editor geöffnet, damit Sie den Code hinzufügen können, der bei Auftreten des Ereignisses ausgeführt werden soll.
  7. Fügen Sie dem Ereignishandler, den Sie auf der CodeBehind-Seite erstellt haben, diesen Code hinzu. Navigieren Sie im Ereignishandler zur neuen Fotoseite, die Sie der App hinzugefügt haben.
    
    
                // Add this code.
                if (this.Frame != null)
                {
                    this.Frame.Navigate(typeof(PhotoPage));
                }
    
    

    Dieser Aufruf von Navigate führt dazu, dass ein neues PhotoPage-Element instanziiert wird. Zum Beibehalten des Zustands der Fotoseite können Sie den Navigationscache aktivieren, damit die Seite nicht bei jeder Navigation eines Benutzers neu erstellt werden muss.

  8. Wechseln Sie zurück zu PhotoPage.xaml. Wählen Sie im XAML-Editor oder der Designansicht das Page-Stammelement aus.
  9. Klicken Sie im Panel Eigenschaften auf die Schaltfläche Eigenschaften (Schaltfläche "Eigenschaften").
  10. Klicken Sie im Panel Eigenschaften unter Allgemein auf den Pfeil nach unten, um erweiterte Eigenschaften anzuzeigen, und ändern Sie den NavigationCacheMode-Wert in Enabled.
  11. Drücken Sie F5, um die App zu erstellen und auszuführen. Klicken Sie auf die Schaltfläche Zur Fotoseite wechseln. Die Fotoseite wird geöffnet. Klicken Sie auf "Zurück", um zur Hauptseite zurückzukehren.

Navigation zwischen Seiten

Sie müssen der Fotoseite keine Schaltfläche "Zurück" hinzufügen. Die Fotoseite basiert auf der Standardseitenvorlage (Basic Page), die über integrierte Navigationsunterstützung verfügt. Die "Zurück"-Schaltfläche nutzt den Frame-Verlauf, um zur vorherigen Seite zurückzukehren, und sie wird nur angezeigt, wenn die Frame.CanGoBack-Eigenschaft auf true festgelegt ist.

Schritt 2: Hinzufügen von Steuerelementen und Inhalten zu einer Seite

Jetzt fügen Sie der Fotoseite Inhalte hinzu. Bevor Sie sich mit dem Layout der Fotoseite beschäftigen, kann es von Vorteil sein, sich mit den Grundlagen von Layouts mit XAML vertraut zu machen.

Erstellen einer Benutzeroberfläche mit XAML

Das XAML-Layoutsystem unterstützt sowohl statische als auch dynamische Layouts.

In einem statischen Layout weisen Sie Steuerelementen feste Größen in Pixel und Positionen zu. Wenn der Benutzer die Auflösung oder Ausrichtung seines Geräts ändert, bleibt die UI unverändert. Statische Layouts können gestreckt und verkleinert oder auf bestimmte Formfaktoren und Anzeigegrößen festgelegt werden.

Dynamische Layouts passen sich durch Vergrößerung, Verkleinerung und Umbrüche an den auf einem Gerät verfügbaren Platz für die Anzeige an. In dynamischen Layouts werden Größe und Position von Layoutcontainern und Steuerelementen automatisch neu angepasst, wenn sich die Größe der App ändert. Bei Windows Store-Apps kommen statische Elemente und Werte an bestimmten Stellen immer noch vor, es sollte jedoch darauf geachtet werden, dass die Gesamt-UI dynamisch ist und sich an verschiedene Auflösungen, Layouts und Ansichten anpasst.

Die meisten App-Inhalte können in Gruppen oder Hierarchien gegliedert werden. Sie verwenden Layoutcontainer, um UI-Elemente zu gruppieren und anzuordnen. Das XAML-Layoutsystem bietet verschiedene Panel-Steuerelemente wie z. B. Grid, StackPanel und Canvas, die als Container dienen, in denen Sie Ihre Inhalte anordnen. Die meisten Container nehmen automatisch Größenanpassungen ihrer untergeordneten Elemente vor, sofern keine bestimmte Größe für diese Elemente vorgegeben ist.

Sie verwenden ein Grid, um Inhalte in Zeilen und Spalten zu gliedern. Die Positionierung der Elemente erfolgt mithilfe der angefügten Eigenschaften Grid.Row und Grid.Column. Wenn der Inhalt über mehrere Spalten und Zeilen angezeigt werden soll, können Sie die angefügten Eigenschaften Grid.RowSpan und Grid.ColumnSpan verwenden.

Verwenden Sie ein StackPanel, um Inhalte in einer einzelnen Zeile anzuordnen. Sie können die Orientation-Eigenschaft so festlegen, dass Elemente entweder vertikal oder horizontal gestapelt werden.

Sie greifen auf eine Canvas zurück, wenn Sie alle Aspekte der Positionierung und Größe der Inhalte bestimmen möchten. In einer Canvas werden die Elemente absolut mithilfe der angefügten Eigenschaften Canvas.Top und Canvas.Left positioniert. Eine Canvas nimmt keine Größenanpassungen von untergeordneten Elementen vor, daher müssen Sie ihnen explizit Größen zuweisen.

Zum Bestimmen der Größe und Position eines Elements legen Sie seine Layouteigenschaften fest. Im Folgenden werden einige gängige Layouteigenschaften und ihre Auswirkung beschrieben.

  • HorizontalAlignment und VerticalAlignment: Gibt die Position eines Objekts relativ zum übergeordneten Objekt an.
  • Margin: Gibt den leeren Raum um das Steuerelement, zwischen dem Außenbereich des untergeordneten Objekts und den Grenzen des Bereichs an.
  • Width und Height: Geben feste Werte in Pixel an.
  • MinWidth/MaxWidth und MinHeight/MaxHeight: Geben Werte an, die die Größe eines Elements begrenzen, während weiterhin eine dynamische Größenanpassung möglich ist.

Mithilfe dieser Container und Layouteigenschaften erstellen Sie ein dynamisches Layout für die Bildanzeigeseite.

XAML-Layouttools

In Teil 1 haben Sie der Hauptseite Steuerelemente hinzugefügt, indem Sie XAML-Code direkt in den XAML-Editor eingegeben haben. Visual Studio enthält jedoch auch einen visuellen XAML-Designer, den Sie zum Hinzufügen und Anordnen von Steuerelementen verwenden können. Im verbleibenden Teil des Lernprogramms verwenden Sie den XAML-Designer zum Erstellen der UI. Bevor wir beginnen, sehen wir uns die Teile der Visual Studio-UI an, die Sie verwenden werden, und erläutern, wie einige gängige Aufgaben durchgeführt werden.

Die folgende Liste enthält die wichtigsten Teile von Visual Studio, die Sie verwenden:

PanelBildBeschreibung
Projektmappen-ExplorerProjektmappen-ExplorerVerwenden zur Verwaltung von Dateien in Ihrem Projekt.
  • Doppelklicken Sie eine Datei, um sie zu öffnen. Falls die Datei bereits offen ist, wird sie zum aktiven Dokument.
EigenschaftenEigenschaftenpanelVerwenden zum Aufrufen und Bearbeiten der Eigenschaften des ausgewählten Elements.
  • Standardmäßig werden Eigenschaften nach Kategorie gruppiert. Erweitern Sie eine Kategorie, um die Eigenschaften zu sehen.
  • Rufen Sie erweiterte Eigenschaften auf, indem Sie auf den Abwärtspfeil unten in einer Kategorie klicken.
XAML-DesignerXAML-DesignerVerwenden zum Hinzufügen und Anordnen der Elemente einer App-UI.
  • Gängige Interaktionen sind Drag & Drop zur Anordnung von Elementen und Klicken zur Auswahl eines Elements.
XAML-EditorXAML-Editor Verwenden zur direkten Bearbeitung von XAML-Code.
ToolboxToolbox Verwenden zum Hinzufügen von Steuer- und anderen Elementen zur UI Ihrer App.
  • Ziehen Sie Steuerelemente auf die Oberfläche des Designers.
GerätPanel "Gerät" Verwenden zur Simulation verschiedener Einstellungen eines physischen Geräts im Designer.
  • Klicken Sie auf die Ansichtsschaltflächen, um verschiedene App-Ansichten im Designer zu simulieren.
  • Ändern Sie die Anzeigeeinstellungen, um verschiedene Auflösungen im Designer zu simulieren.
DokumentgliederungDokumentgliederung Verwenden zum Auswählen und Anordnen von UI-Elementen in einer hierarchischen Ansicht.
  • Klicken Sie ein Element an, um es auszuwählen.
  • Klicken Sie auf die Pfeile, um ein Element zu erweitern und seine untergeordneten Elemente zu sehen.
  • Nutzen Sie STRG+Klick, um mehrere, nicht zusammenhängende Elemente auszuwählen.
  • Nutzen Sie UMSCHALT+Klick, um mehrere, zusammenhängende Elemente auszuwählen.
  • Ziehen Sie Elemente, um sie neu anzuordnen.

 

Wir gehen davon aus, dass Sie das Standardfensterlayout in Visual Studio verwenden. Wenn Sie das Standardlayout ändern, können Sie es im Menü Fenster über den Befehl Fensterlayout zurücksetzen wiederherstellen.

Es gibt einige häufige Aufgaben, die sich während der UI-Erstellung wiederholen. Sich vor Beginn darüber im Klaren zu sein, wie diese Aufgaben ausgeführt werden, erleichtert die Erstellung der UI.

JJ215600.wedge(de-de,WIN.10).gifÖffnen einer Datei

  • Doppelklicken Sie den Dateinamen im Projektmappen-Explorer. Sollte die Datei bereits offen sein, wird Sie im Designer und im XAML-Editor aktiv.

Standardmäßig sind die Panels Toolbox, Gerät und Dokumentgliederung links im Designer reduziert.

JJ215600.wedge(de-de,WIN.10).gifÖffnen der "Toolbox"-, "Geräte"- oder "Dokumentgliederung"-Panels

  1. Klicken Sie auf den Namen des gewünschten Panels, um es zu öffnen.
  2. Klicken Sie auf das Symbol Automatisch im Hintergrund (anheften) in der Kopfzeile des Panels.

    Tipp  Wenn die Toolbox einen Teil des XAML-Designers verdeckt, in dem Sie ein Steuerelement ablegen müssen, heften Sie die Toolbox offen an.

Es gibt viele Möglichkeiten, ein Element auszuwählen und es zu aktivieren. In einigen Fällen kann es einfacher sein, sich für einen bestimmten Weg zu entscheiden. In solchen Fällen schlagen wir die einfachste Möglichkeit zur Auswahl des Elements vor.

JJ215600.wedge(de-de,WIN.10).gifAuswählen eines Elements

  1. Klicken Sie in Dokumentgliederung auf das Element oder den Elementnamen, falls es einen Namen hat.
  2. Klicken Sie im XAML-Editor auf das öffnende Tag des Elements.
  3. Im XAML-Designer haben Sie die folgenden Möglichkeiten:
    • Führen Sie Ihren Mauszeiger über das Element, bis es blau hervorgehoben wird. Klicken Sie das hervorgehobene Element an, um es zu aktivieren.
    • Klicken Sie mit der rechten Maustaste auf ein Objekt im Designer. Öffnen Sie im Kontextmenü das Untermenü Aktuelle Auswahl festlegen, und wählen Sie das zu aktivierende Element aus.
  4. Werfen Sie einen Blick auf das Eigenschaften-Panel und vergewissern Sie sich, dass das richtige Element aktiviert ist.

Das Eigenschaften-Panel bietet Ansichten zur Verwaltung von Eigenschaften und Ereignisse.

JJ215600.wedge(de-de,WIN.10).gifWechseln des Eigenschaftenpanels zwischen den Ansichten "Eigenschaften" und "Ereignisse"

  • Klicken Sie im Eigenschaftenpanel
    • Klicken Sie auf die Schaltfläche Ereignisse (Ereignisschaltfläche), um die Ansicht Ereignisse aufzurufen.
    • Klicken Sie auf die Schaltfläche Eigenschaften (Ereignisschaltfläche), um die Ansicht Eigenschaften aufzurufen.

Geben Sie einem Element in Ihrem Code einen Namen, um es zu referenzieren.

JJ215600.wedge(de-de,WIN.10).gifBenennen eines UI-Elements

  1. Wählen Sie das zu benennende Element aus.
  2. Geben Sie im Eigenschaftenpanel einen Namen in das Textfeld Name ein.
  3. Drücken Sie die Eingabetaste, um den Namen zu übernehmen.

    Namenseigenschafteneditor

Wenn Sie im Designer ein Element hinzufügen, legt dieser Layouteigenschaften fest, um Position und Größe des Elements absolut festzulegen. Diese Eigenschaften müssen in der Regel zurückgesetzt werden, um ein dynamisches Layout zu ermöglichen.

JJ215600.wedge(de-de,WIN.10).gifZurücksetzen einer Eigenschaft

  1. Achten Sie darauf, dass das Element mit der Eigenschaft ausgewählt und das Eigenschaftenpanel nicht in der Eigenschaften-Ansicht ist.
  2. Klicken Sie im Bereich Eigenschaften auf den Eigenschaftsmarker neben dem Eigenschaftswert. Das Eigenschaftenmenü wird geöffnet.
  3. Klicken Sie im Eigenschaftsmenü auf Zurücksetzen.

    Eigenschaftsmenü

JJ215600.wedge(de-de,WIN.10).gifÄndern der Ausrichtung eines Elements

  1. Wählen Sie das auszurichtende Element aus.
  2. Navigieren Sie zu Layout im Eigenschaftenpanel, und tun Sie anschließend Folgendes:
    • Ändern Sie die HorizontalAlignment-Eigenschaft auf eine der folgenden:
      Verankert den Text links und streckt ihn bei einer Größenänderung nach rechts.
      Immer zentral in der Horizontalen verankert, unabhängig von Größenänderung.
      Verankert den Text rechts und streckt ihn bei einer Größenänderung nach links.
      Streckt den Text bei einer Größenänderung in beide horizontalen Richtungen.

       

    • Ändern Sie die VerticalAlignment-Eigenschaft auf eine der folgenden:
      Verankert den Text unten und streckt ihn bei einer Größenänderung nach oben.
      Immer zentral in der Vertikalen verankert, unabhängig von Größenänderung.
      Verankert den Text oben und streckt ihn bei einer Größenänderung nach unten.
      Streckt den Text bei einer Größenänderung in beide vertikale Richtungen.

       

JJ215600.wedge(de-de,WIN.10).gifÄndern der Ränder eines Elements

  1. Wählen Sie das Element aus, für das Ränder festgelegt werden sollen.
  2. Legen Sie unter Layout im Bereich Eigenschaften einen oder mehrere Margin-Werte fest: Links, Rechts, Oben, Unten.

    Randeigenschaft

 

Hinzufügen von Navigationsbefehlen

In Schritt 1 haben Sie eine Button hinzugefügt, um von der Hauptseite zur neue Fotoseite navigieren zu können. Der Einfachheit halber haben Sie die Schaltfläche auf der Canvas der Hauptseite platziert. Der Navigationsbefehl hat jedoch keinerlei Bezug zu anderen Elementen auf der Hauptseite, weshalb die Schaltfläche deplatziert wirkt. Beim Designen Ihrer Windows Store-App ist es wichtig, sich die Platzierung von Befehlen gut zu überlegen.

Windows Store-Apps stellen App-Leisten zum Gruppieren von Befehlen bereit, die standardmäßig ausgeblendet sind. Der Benutzer kann sich die Befehle bei Bedarf anzeigen lassen, indem er von oben nach unten über den Bildschirm streift oder mit der rechten Maustaste klickt. Da normalerweise die App-Leiste oben auf dem Bildschirm zur Navigation verwendet wird, fügen Sie eine App-Leiste hinzu und verschieben die Navigationsschaltfläche auf die Leiste.

JJ215600.wedge(de-de,WIN.10).gifSo fügen Sie oben eine App-Leiste hinzu

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei MainPage.xaml, um sie zu öffnen.
  2. Erweitern Sie in der Dokumentgliederung das "pageRoot"-Element, und klicken Sie mit der rechten Maustaste auf TopAppBar.
  3. Wählen Sie im Kontextmenü die Option CommandBar hinzufügen. Ein CommandBar-Element wird der Seite hinzugefügt.

    Sie können einer Seite entweder ein AppBar- oder ein CommandBar-Element hinzufügen. AppBar lässt sich stärker anpassen, aber Sie müssen sich dabei auch mehr selbst um die Gestaltung des Layouts kümmern. CommandBar kann nicht so stark angepasst werden, aber dafür ist der Layoutaufwand geringer. Wenn Sie nicht auf die Flexibilität von AppBar angewiesen sind, wird die Verwendung eines CommandBar-Elements empfohlen.

Ein CommandBar-Element kann nur Elemente vom Typ AppBarButton, AppBarToggleButton und AppBarSeparator enthalten. Wenn Sie die bereits hinzugefügte Navigationsschaltfläche ersetzen möchten, fügen Sie dem CommandBar-Element ein AppBarButton-Element hinzu.

JJ215600.wedge(de-de,WIN.10).gifHinzufügen einer App-Leisten-Schaltfläche

  1. Erweitern Sie in der Dokumentgliederung das CommandBar-Element, und klicken Sie mit der rechten Maustaste auf PrimaryCommands.
  2. Wählen Sie im Kontextmenü die Option AppBarButton hinzufügen. Ein AppBarButton-Element wird dem CommandBar-Element hinzufügt und ausgewählt.
  3. Wählen Sie im Panel Eigenschaften unter Symbol in der Dropdownliste Symbol die Option "Pictures".
  4. Ändern Sie im Panel Eigenschaften unter Allgemein den Label-Wert von "AppBarButton" in "Pictures".
  5. Klicken Sie im Bereich Eigenschaften auf die Schaltfläche Ereignisse (Ereignisschaltfläche).
  6. Suchen Sie am Anfang der Ereignisliste nach dem Click-Ereignis. Geben Sie in das Textfeld für das Ereignis PhotoPageButton_Click ein. Sie verwenden dabei denselben Ereignishandler, den Sie für die bereits hinzugefügte Navigationsschaltfläche erstellt haben.

    Hier der endgültige XAML-Code für die App-Leiste.

    
    <Page.TopAppBar>
        <CommandBar>
            <AppBarButton Label="Pictures" Icon="Pictures" Click="PhotoPageButton_Click"/>
        </CommandBar>
    </Page.TopAppBar>
    
    
  7. Wählen Sie die Schaltfläche "Zur Fotoseite wechseln" aus, und drücken Sie die ENTF-TASTE. Sie verfügen für die Navigation jetzt über die App-Leiste, sodass diese Schaltfläche nicht mehr erforderlich ist.
  8. Drücken Sie F5, um die App zu erstellen und auszuführen. Öffnen Sie die App-Leiste, indem Sie eine Streifbewegung von oben nach unten auf dem Bildschirm ausführen oder die App mit der rechten Maustaste anklicken.

Sie haben das Layout der Hauptseite mit der App-Leiste übersichtlich gestaltet. Nun widmen wir uns der neuen Bildanzeigeseite.

Hinzufügen eines Layoutrasters

Als Erstes fügen Sie ein Grid hinzu, um den Inhaltsbereich der Seite in drei Zeilen zu unterteilen. Die ersten beiden Zeilen haben eine feste Höhe, und die letzte Zeile füllt den restlichen verfügbaren Raum aus.

JJ215600.wedge(de-de,WIN.10).gifHinzufügen eines Rasterpanels zu einer Seite

  1. Öffnen Sie PhotoPage.xaml.
  2. Ziehen Sie ein Grid von der Toolbox auf die Designoberfläche in der Mitte der Seite.

    Das Grid wird zur Seite hinzugefügt, und der Designer legt einige Eigenschaften auf Grundlage seiner Einschätzung des gewünschten Layouts fest. Das Grid wird blau hervorgehoben, womit angezeigt wird, dass es sich dabei um das aktive Objekt handelt.

  3. Geben Sie im Eigenschaftenpanel"contentGrid" als Name für das Grid ein.

    Namenseigenschafteneditor

  4. Setzen Sie die folgenden Grid-Eigenschaften zurück: Width, Height, HorizontalAlignment, VerticalAlignment und Margin. Das Grid füllt den Inhaltsbereich der Seite nun vollständig aus.
  5. Legen Sie den linken Margin und den unteren Margin unter Layout auf "120" fest.

    Randeigenschaft

  6. Im Designer erscheinen gepunktete Linien entlang der oberen und linken Seiten des Grid. Führen Sie den Cursor über die gepunktete Linie links. Der Zeiger ändert sich zu einem Pfeil mit einem Pluszeichen (+), und eine orangefarbene Linie zeigt an, wo eine Zeile eingefügt wird.

    Hinzufügen von Rasterzeilen

  7. Klicken Sie auf eine beliebige Stelle der gepunkteten Linie, um eine Zeile hinzuzufügen.
  8. Wiederholen Sie den vorherigen Schritt, um dem Grid eine weitere Zeile hinzuzufügen.

    Es befinden sich nun drei Zeilen im Grid. Wenn sich der Cursor über der gepunkteten Linie befindet, erscheint ein kleines Flyout, mit dem Sie auf die Größenoptionen und die Height-Zeileneigenschaft zugreifen können.

  9. Platzieren Sie den Cursor über die gepunktete Linie in der ersten Zeile, bis das Flyout erscheint.
  10. Klicken Sie auf den Abwärtspfeil, um das Flyoutmenü zu öffnen. Wählen Pixel im Menü.

    Flyoutmenü der Rasterzeile

  11. Platzieren Sie den Cursor erneut über die gepunktete Linie, bis das Flyout erscheint. Klicken Sie im Flyout auf den Zahlenwert.
  12. Geben Sie "50" ein, und drücken Sie EINGABE, um die Height-Eigenschaft auf 50 Pixel festzulegen.

    Pixelwert der Rasterzeile

  13. Wiederholen Sie die Schritte 9-12, um die Height der zweiten Zeile auf 70 Pixel festzulegen.

    Die letzte Zeile wird auf den Standardwert "1*" (1 Stern) festgelegt, was dafür sorgt, dass sie den restlichen verbleibenden Raum ausfüllt.

Sehen wir uns nun den XAML-Code an, der zu diesem Ergebnis führt.


<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Fügen Sie der RowDefinition-Sammlung Grid.RowDefinitions-Objekte hinzu, um Zeilen in einem Grid zu definieren. Sie können angeben, wie die Zeile aussehen soll, indem Sie für die RowDefinition Eigenschaften festlegen. Spalten werden ebenfalls mit ColumnDefinition-Objekten und der Grid.ColumnDefinitions-Sammlung hinzugefügt.

Beachten Sie diese Einstellung im öffnenden Grid-Tag: Grid.Row="1". Die Positionierung der Elemente in einem Grid erfolgt mithilfe der angefügten Eigenschaften Grid.Row und Grid.Column. Die Nummerierung von Zeilen und Spalten ist nullbasiert. Daher gibt diese Einstellung an, dass das "contentGrid"-Panel der zweiten Zeile seines übergeordneten Grid hinzugefügt wird. Diese Eigenschaft wird von Visual Studio auf Grundlage dessen festgelegt, wo Sie das Grid ablegen, wenn Sie es hinzufügen.

Hinzufügen von Steuerelementen zur Fotoseite

Nun fügen Sie dem Grid Steuerelemente hinzu. Sie fügen ein Button-Steuerelement zum Abrufen eines Bilds aus "Bilder", ein Image-Steuerelement zum Anzeigen des Bilds und einige TextBlock-Steuerelemente zum Anzeigen von Informationen zur Bilddatei hinzu. In der letzten Rasterzeile verwenden Sie StackPanels, um die Image- und TextBlock-Steuerelemente anzuordnen.

JJ215600.wedge(de-de,WIN.10).gifHinzufügen von Steuerelementen zur Seite

  1. JJ215600.wedge(de-de,WIN.10).gifHinzufügen der Schaltfläche "Get photo"

    1. Wählen Sie in der Dokumentgliederung das Panel "contentGrid" aus.
    2. Ziehen Sie, nachdem Sie das "contentGrid"-Panel ausgewählt haben, ein Button-Steuerelement aus der Toolbox in die erste Rasterzeile.
    3. Setzen Sie im Eigenschaftenpanel die folgenden Button-Eigenschaften zurück: HorizontalAlignment, VerticalAlignment und Margin.
    4. Legen Sie die Content-Eigenschaft der Schaltfläche auf "Get photo" fest.
  2. JJ215600.wedge(de-de,WIN.10).gifHinzufügen des Bildnamen-TextBlock

    1. Ziehen Sie, nachdem Sie das "contentGrid"-Panel ausgewählt haben, ein TextBlock-Steuerelement aus der Toolbox in die zweite Rasterzeile.
    2. Setzen Sie im Eigenschaftenpanel die folgenden TextBlock-Eigenschaften zurück: HorizontalAlignment, VerticalAlignment und Margin.
    3. Erweitern Sie die Gruppe Sonstiges, und suchen Sie dort nach der Eigenschaft Style.
    4. Wählen Sie im Menü der Eigenschaft "Style" die Option Systemressource > SubheaderTextBlockStyle.
  3. JJ215600.wedge(de-de,WIN.10).gifHinzufügen des Bilds

    1. Ziehen Sie, nachdem Sie das "contentGrid"-Panel ausgewählt haben, ein StackPanel-Element aus der Toolbox in die letzte Rasterzeile.
    2. Setzen Sie die folgenden StackPanel-Eigenschaften zurück: Width, Height, HorizontalAlignment, VerticalAlignment und Margin.
    3. Legen Sie im Eigenschaftenpanel die Orientation-Eigenschaft von StackPanel auf Horizontal fest.
    4. Geben Sie im Name-Textfeld für das StackPanel"imagePanel" ein, und drücken Sie EINGABE.
    5. Ziehen Sie, nachdem Sie StackPanel ausgewählt haben, ein Border-Steuerelement aus der Toolbox in das StackPanel.
    6. Wählen Sie unter Pinsel im Bereich Eigenschaften die Option Background aus.
    7. Wählen Sie die Registerkarte für den Pinsel mit Volltonfarbe, und stellen Sie den Farbwert auf "#FF808080".
    8. Wiederholen Sie die Schritte f–g für die BorderBrush-Eigenschaft.

      Visual Studio-Pinsel-Editor

    9. Ziehen Sie ein Image-Steuerelement aus der Toolbox in das Border.
    10. Geben Sie im Name-Textfeld für das Image"displayImage" ein, und drücken Sie die Eingabetaste.
    11. Wählen Sie in der Dropdownliste für die Image Source-Eigenschaft "Logo.png".
    12. Wählen Sie in der Dokumentgliederung das Border-Objekt aus, das das Image enthält.
    13. Setzen Sie im Panel Eigenschaften die Width-Eigenschaft des Border-Elements zurück.
  4. JJ215600.wedge(de-de,WIN.10).gifHinzufügen der Bildinformationen

    1. Ziehen Sie ein TextBlock-Steuerelement aus der Toolbox in das "imagePanel"-StackPanel rechts neben dem Image-Steuerelement.

      Hier müssen Sie nun keine der Layouteigenschaften zurücksetzen, wie es nötig war, nachdem Sie den TextBlock in das Raster gezogen haben. StackPanel und Grid handhaben die Größe ihrer untergeordneten Elemente unterschiedlich. Weitere Informationen finden Sie in Schnellstart: Hinzufügen von Layoutsteuerelementen.

    2. Ziehen Sie fünf weitere TextBlock-Steuerelemente in das StackPanel.

      Rechts neben dem Image-Steuerelement befinden sich nun sechs TextBlock-Steuerelemente in einer horizontalen Anordnung.

    3. Wählen Sie den ersten TextBlock aus und legen Sie seine Text-Eigenschaft auf "File name:" fest.
    4. Wählen Sie den dritten TextBlock aus und legen Sie seine Text-Eigenschaft auf "Path:" fest.
    5. Wählen Sie den fünften TextBlock aus und legen Sie seine Text-Eigenschaft auf "Date created:" fest.

Die UI der Bildanzeige sieht nun so aus. Das Layout ist nun beinahe fertig, Sie müssen jedoch noch die Darstellung der TextBlock-Elemente zum Anzeigen der Bildinformationen korrigieren.

App im XAML-Designer

Hier der XAML-Code, der für dieses Layout generiert wird.


<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Get photo"/>
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource PageSubheaderTextStyle}"/>
    <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
         <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
             <Image x:Name="displayImage" Source="Assets/Logo.png"/>
         </Border>
         <TextBlock TextWrapping="Wrap" Text="File name:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Path:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Date created:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    </StackPanel>
</Grid>

Sie müssen das Layout und die Formatierung der hinzugefügten TextBlock-Elemente korrigieren. Um dem Bildinformationstext das gewünschte Layout zu geben, gruppieren Sie die Steuerelemente in einem vertikalen StackPanel.

JJ215600.wedge(de-de,WIN.10).gifGruppieren von Elementen in ein StackPanel

  1. Klicken Sie in Dokumentgliederung auf den ersten TextBlock im "imagePanel"-StackPanel.
  2. Halten Sie UMSCHALT gedrückt, und klicken Sie auf den letzten TextBlock in der Gruppe. Damit wählen Sie alle sechs TextBlock-Steuerelemente aus.
  3. Klicken Sie mit der rechten Maustaste auf die ausgewählten TextBlock-Steuerelemente. Wählen Sie im Kontextmenü Gruppieren in > StackPanel.

    Der Seite wird ein StackPanel hinzugefügt, und die sechs TextBlock-Steuerelemente werden im StackPanel abgelegt.

  4. Legen Sie unter Layout im Panel Eigenschaften die Orientation-Eigenschaft des StackPanel-Elements auf Vertical fest.
  5. Legen Sie die linke Margin für das StackPanel auf "20" fest.

Der letzte Schritt ist die Formatierung des Informationstextes des Bilds. Sie verwenden integrierte Formatvorlagen für den Text und legen einige Ränder fest, um etwas Abstand zwischen den Elementen zu lassen.

JJ215600.wedge(de-de,WIN.10).gifAnpassen des Texts

  1. Klicken Sie in Dokumentgliederung auf den ersten TextBlock im "imagePanel"-StackPanel.
  2. Halten Sie STRG gedrückt, und klicken Sie auf den dritten und fünften TextBlock in der Gruppe. Damit wählen Sie drei TextBlock-Steuerelemente aus.
  3. Suchen Sie unter Sonstiges im Eigenschaftenpanel die Style-Eigenschaft.
  4. Wählen Sie im Menü der Style-Eigenschaft die Option Systemressource > CaptionTextBlockStyle.
  5. Wählen Sie das zweite, vierte und sechste TextBlock-Steuerelement in der Gruppe aus.
  6. Legen Sie die Style-Eigenschaft auf Systemressource > BodyTextBlockStyle fest.
  7. Legen Sie den Margin-Eigenschaftswert für links auf 10, den für unten auf 30 fest.

Der XAML-Code für den Informationstext des Bilds sieht nun so aus.


<StackPanel Margin="20,0,0,0">
    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Date created:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
</StackPanel>

Drücken Sie F5, um die App zu erstellen und auszuführen. Navigieren Sie zur Fotoseite. Sie sieht jetzt so aus:

App im XAML-Designer

Schritt 3: Anpassen des Seitenlayouts an verschiedene Ausrichtungen und Ansichten

Bisher haben Sie die App zur Anzeige im Vollbildmodus und im Querformat entworfen. Eine neue Windows-UI muss sich aber unterschiedlichen Ausrichtungen und Layouts anpassen können. Insbesondere muss sie sowohl das Querformat als auch das Hochformat unterstützen. Hier sehen Sie, wie Sie sicherstellen können, dass die App unabhängig von Auflösung und Ausrichtung immer gut aussieht.

Verwendung verschiedener Ansichten in Visual Studio

Sie können den Bereich Gerät in Visual Studio 2013 verwenden, um zu überprüfen, wie die App in den unterschiedlichen Ansichten aussieht. (Der Bereich Gerät ist nur verfügbar, wenn eine XAML-Seite aktiv ist.) So können Sie verschiedene Ansichten, Anzeigen und Anzeigeoptionen für Ihre App im Visual Studio-Designer simulieren. Hier sehen Sie, wie die Optionen unter Ausrichtung verwendet werden. Sie müssen jedoch auch die Optionen unter Anzeige verwenden, um zu überprüfen, wie die UI bei verschiedenen Bildschirmauflösungen aussieht. Ein dynamisches Layout passt sich an, sodass es auf verschiedenen Bildschirmen immer gut aussieht.

Panel "Gerät"

Probieren wir zunächst die Ausrichtung im Hochformat aus, um herauszufinden, wie die App aussieht.

JJ215600.wedge(de-de,WIN.10).gifVerwendung verschiedener Ansichten in Visual Studio

  1. Klicken Sie im Panel Gerät auf die Schaltfläche für das Hochformat (Schaltfläche für Hochformat). Der Designer wechselt zu einer Simulation des Hochformats.

    So sieht Ihre App aus, wenn der Benutzer sie in das Hochformat dreht. Diese Ansicht ist zu schmal. Sie müssen einige Anpassungen an der Breite der App-UI vornehmen.

    Hochformat

  2. Klicken Sie auf die Schaltfläche Querformat, um zurück zur Standardansicht zu wechseln.

Anpassen des Hochformats

Korrigieren wir nun das Hochformat.

Wenn Sie das StackPanel von Horizontal in Vertical ändern, wird die Größe von Border und Image automatisch angepasst. Dies ist ein Beispiel für ein dynamisches Layout. Das StackPanel sorgt dafür, dass die untergeordneten Elemente in die Richtung gestreckt werden, in die es ausgerichtet ist, und verhindert eine Streckung in die andere Richtung. Anstatt das Bild auf eine feste Größe festzulegen, lassen Sie das Layoutpanel seine untergeordneten Elemente selbst anordnen und in der Größe anpassen.

JJ215600.wedge(de-de,WIN.10).gifAnpassen des Hochformats

  1. Fügen Sie im XAML-Editor nach dem Grid-Element von contentGrid diesen XAML-Codeblock hinzu.
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultLayout">
                        <Storyboard>
                        </Storyboard>
                    </VisualState>
    
                    <VisualState x:Name="Portrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(StackPanel.Orientation)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Orientation>Vertical</Orientation>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>0,0,20,0</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
    
  2. Wählen Sie in der Dokumentgliederung das Element "pageRoot" aus.
  3. Klicken Sie im Bereich Eigenschaften auf die Schaltfläche Ereignisse (Ereignisschaltfläche).
  4. Suchen Sie in der Ereignisliste das SizeChanged-Ereignis. Geben Sie im Textfeld für das Ereignis "PhotoPage_SizeChanged" als Namen der Funktion ein, die das SizeChanged-Ereignis behandelt.
  5. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird erstellt und im Code-Editor geöffnet, damit Sie den Code hinzufügen können, der bei Auftreten des Ereignisses ausgeführt werden soll.
  6. Fügen Sie diesen Code dem Ereignishandler hinzu.
    
    
                if (e.NewSize.Height/e.NewSize.Width >= 1)
                {    
                    VisualStateManager.GoToState(this, "Portrait", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "DefaultLayout", true);
                }
    
    

Wenn Sie die App in unterschiedlichen Ausrichtungen, Ansichten und Auflösungen testen möchten, können Sie den Simulator in Visual Studio verwenden. Wählen Sie auf der Standardsymbolleiste in der Dropdownliste neben der Schaltfläche Debuggen starten die Option Simulator aus, um Ihre Windows Store-App im Simulator zu starten. Weitere Informationen zum Testen der App im Simulator finden Sie unter Ausführen von Windows Store-Apps in Visual Studio.

Wenn Sie die App im Simulator im Hochformat ausführen, sieht sie jetzt wie folgt aus:

Hochformat

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das dritte Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie App-Daten und Sitzungszustand in einer Windows-StoreApp speichern.

Siehe Code

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Informationen finden Sie unter Teil 3: Vollständiger Code.

Nächste Schritte

Im nächsten Teil dieser Lernprogrammreihe lernen Sie, wie Sie auf Dateien zugreifen und mit ihnen arbeiten. Fahren Sie mit Teil 4: Dateizugriff und -auswahl fort.

Verwandte Themen

Für Designer
Navigationsmuster
Befehlsmuster
Layout
Zurück-Schaltfläche
Richtlinien für die Hubsteuerung
Richtlinien für App-Leisten
Barrierefreie App-Leiste
Für Entwickler (XAML)
Hinzufügen von App-Leisten (XAML)
Navigieren zwischen Seiten (XAML)
XAML-Beispiel für ein Hub-Steuerelement
XAML-Beispiel für ein AppBar-Steuerelement
XAML-Beispiel für die Navigation
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class

 

 

Anzeigen:
© 2014 Microsoft