Die Windows Phone 8-Plattform verfügt über eigene Layoutstile, die sie von jeder anderen mobilen Plattform abheben. Diese einzigartigen Layouts sind dank ein paar praktischer Steuerelemente des Windows Phone 8 SDK möglich. Die Steuerelemente, die wir in diesem Tutorial betrachten werden, sind die Pivot und Panorama Kontrollen.
1. Panorama
Was ist es?
Die Windows Phone Panorama-Layoutsteuerung bietet einen einzigartigen Ansatz für die Darstellung von Inhalten für den Benutzer. Ein Panorama besteht aus mehreren Bereichen oder Panoramaelementen, die jeweils eine Seite darstellen. Zu einem Zeitpunkt ist nur ein Panoramaelement neben einem kleinen Teil des vorherigen oder nächsten Panoramaelements sichtbar. Wenn Sie mit der Panorama-Steuerung durch ein Schlüsselloch spähen, können Sie einen Teil des Raums hinter der Tür sehen, aber nicht den gesamten Raum.
Der obige Screenshot ist ein großartiges Beispiel, um die Panorama-Steuerung zu demonstrieren. Das obige Beispiel enthält fünf Panoramaelemente. Jedes Panoramaelement repräsentiert eine Seite mit Inhalt.
In dem obigen Screenshot hat das aktive Panorama den Titel Speisekarte. Zur gleichen Zeit können wir einen Blick auf das nächste Panoramaelement mit dem Titel sehen vorgestellt. Das Panorama-Steuerelement zeigt dem Benutzer an, dass rechts weitere Inhalte darauf warten, entdeckt zu werden. Lassen Sie uns herausfinden, wie Sie das Panorama-Steuerelement verwenden.
Panorama-Steuerelement erstellen
Beginnen Sie mit dem Erstellen eines neuen Windows Phone-Projekts. Um dem Projekt ein Panorama-Steuerelement hinzuzufügen, wählen Sie Neues Element hinzufügen> Windows Phone-Panoramaseite> Hinzufügen von dem Projekt Speisekarte. Dies sollte ein Panorama-Steuerelement mit zwei Panoramaelementen hinzufügen. Das Panorama-Steuerelement sollte in der Entwurfsansicht von Visual Studio sichtbar sein.
Fügen wir dem Panorama-Steuerelement Inhalt hinzu. Das erste Panoramaelement wird mit einer Liste von Farben und das zweite Panoramaelement mit einer Reihe farbiger Rechtecke gefüllt, die der Liste der Farben des ersten Panoramaelements entsprechen. Derzeit enthält das Panorama-Steuerelement ein Raster-Steuerelement mit dem Namen LayoutRoot (siehe unten).
Das Rastersteuerelement wurde benannt LayoutRoot ist der Hauptcontainer der aktuellen Seite unserer Anwendung und enthält alle anderen Elemente der Seite. Beachten Sie, dass Steuerelemente in XAML hierarchisch strukturiert sind und XML sehr ähnlich sind.
Das Panorama-Steuerelement ist im Raster-Steuerelement verschachtelt und hat eine Titel Eigentum von "meine Bewerbung". Das Panorama-Steuerelement enthält die Panorama-Elemente. Wie Sie im obigen XAML-Snippet sehen können, enthält das Panorama-Steuerelement derzeit zwei Panorama-Elemente Header Eigentum der Panorama-Elemente ist Gegenstand 1 und item2 beziehungsweise.
Das Header Die Eigenschaft eines Panoramaelements ist ähnlich der Titel Eigenschaft des Panorama-Steuerelements und Sie können sie beliebig ändern.
Farben hinzufügen
Lassen Sie uns nun die Panorama-Elemente mit einigen Inhalten füllen, die wir bereits besprochen haben. Aktualisieren Sie den Inhalt der beiden Panoramaelemente wie unten gezeigt.
Wie Sie sehen können, habe ich das geändert Header Eigentum der Panorama-Elemente an Farbnamen und Farben beziehungsweise. Dem ersten Panoramaelement habe ich ein StackPanel-Steuerelement hinzugefügt, das fünf TextBlock-Steuerelemente enthält. Jedes der TextBlock-Steuerelemente hat seine Text Eigenschaft auf die Namensfarbe gesetzt. Ich habe auch die eingestellt Schriftgröße Eigenschaft jedes TextBlock-Steuerelements an 30px um den Text zu vergrößern.
Das zweite PanoramaItem-Steuerelement enthält auch ein StackPanel-Steuerelement mit fünf Rechtecksteuerelementen. Jedes Rechteck-Steuerelement wird mit einer Farbe gefüllt, die im ersten Panoramaelement mit seinem Element aufgeführt ist Füllen Eigentum. Das Höhe Eigenschaft der Rechtecke ist auf gesetzt 50px und das Spanne Eigenschaft ist auf gesetzt 0, 0, 0, 10, was zu einem unteren Rand von 10px. Sie können das Ergebnis Ihrer Arbeit in der Entwurfsansicht Ihrer IDE sehen (siehe unten).
Nachdem wir das Panorama-Steuerelement mit einigen Inhalten gefüllt haben, ist es an der Zeit, sich auf das zweite Steuerelement dieses Lernprogramms, das Pivot-Steuerelement, zu konzentrieren.
2. Pivot
Was ist es?
Das Pivot-Steuerelement ist eine andere Möglichkeit, dem Benutzer Inhalte zu präsentieren, die für die Windows Phone-Plattform einzigartig sind. Das Pivot-Steuerelement ähnelt in gewisser Weise dem Panorama-Steuerelement, verfügt jedoch über eine Reihe von Funktionen, die es voneinander unterscheiden.
Wie ein Panorama-Steuerelement kann ein Pivot-Steuerelement aus mehreren bestehen PivotItem Kontrollen. Jedes Pivot-Element kann andere Steuerelemente enthalten, z. B. Raster- und StackPanel-Steuerelemente. Der obige Screenshot zeigt ein Pivot-Steuerelement mit zwei PivotItem-Steuerelementen, Verzeichnis und Einrichtung.
Während das Panorama-Steuerelement einen Vorgeschmack auf die nächste Seite zeigt, macht das Pivot-Steuerelement dasselbe für die Header am oberen Rand der Pivot-Steuerung. Dies wird im obigen Beispiel deutlich, in dem Sie die ersten Buchstaben des Wortes sehen können Einrichtung, der Titel des zweiten Pivotelements. Um zu veranschaulichen, dass das zweite Pivotelement nicht im Fokus ist, ist der Titel grau hinterlegt.
Erstellen eines Pivot Controls
Lassen Sie uns ein Pivot-Steuerelement erstellen, indem Sie die gleichen Schritte ausführen wie beim Erstellen eines Panorama-Steuerelements. Wählen Sie stattdessen die Option Windows Phone-Pivot-Seite aus. Füllen Sie wie das Panorama-Steuerelement wie zuvor das Pivot-Steuerelement mit der Liste der Farben und deren Namen. Der resultierende XAML-Code für das Pivot-Steuerelement sollte ähnlich wie in der folgenden Abbildung aussehen.
Bevor wir die Anwendung erstellen und ausführen können, um beide Steuerelemente in Aktion zu sehen, müssen wir eine Möglichkeit zum Navigieren auf den Anwendungsseiten implementieren. Das wird der Fokus des nächsten Abschnitts sein.
3. Seitennavigation
Wenn Sie die Anwendung in ihrer aktuellen Form ausführen, wird das angezeigt MainPage.xaml Seite, der Standardeinstiegspunkt für jede Windows Phone-Anwendung. Lass uns das ändern.
Schaltflächen hinzufügen
Um zu den Panorama- und Pivot-Steuerelementen zu navigieren, die wir zuvor implementiert haben, müssen wir dem Button zwei Button-Steuerelemente hinzufügen MainPage.xaml Seite. Doppelklick MainPage.xaml in Ihrer IDE und ziehen Sie zwei Button-Steuerelemente aus der Werkzeugkasten auf die Seite in der Entwurfsansicht von Visual Studio.
Wie Sie unten sehen können, habe ich auch das geändert Inhalt Eigenschaften der zu lesenden Button-Steuerelemente Panorama und Pivot.
Implementieren der Button-Steuerelemente
Wenn die Anwendung auf ein Button-Steuerelement tippt, soll die Anwendung entweder zum Panorama- oder Pivot-Steuerelement navigieren. Beginnen wir mit dem linken Knopf.
Panorama
Beginnen Sie mit einem Doppelklick auf das linke Button-Steuerelement in der Entwurfsansicht. Das sollte dich dazu bringen MainPage.cs, die enthält die Klasse, mit der verbunden ist MainPage.xaml. Visual Studio hat bereits eine Methode für uns erstellt, Button_Click, Das wird aufgerufen, wenn der Benutzer auf die Schaltfläche tippt Panorama.
Wenn der Benutzer auf die erste Schaltfläche tippt, sollte die Anwendung sie zum Panorama-Steuerelement bringen. Dies erreichen wir durch ein Update der Button_Click Methode wie unten gezeigt.
Wir rufen das an Navigieren Methode auf NavigationService, am Ziel vorbei, a Uri Instanz und die Art des Ziels, UriKind.Relative. Beachten Sie, dass der Name der Zielseite mit der ersten Seite des Panorama-Steuerelements übereinstimmen muss, PanoramaPage1.xaml im obigen Beispiel. Vergiss nicht den führenden Schrägstrich.
Pivot
Die Navigation zum Pivot-Steuerelement ist sehr ähnlich. Öffnen Sie MainPage.xaml und doppelklicken Sie auf das beschriftete Button-Steuerelement Pivot, und implementieren Sie den Event-Handler, Button_Click_1, Wie nachfolgend dargestellt. Der einzige Unterschied ist das Ziel, zu dem wir navigieren, PivotPage1.xaml.
Erstellen Sie die Anwendung, und führen Sie sie aus, um die Schaltflächen sowie die Steuerelemente Panorama und Pivot zu testen. Verwenden Sie die physische Zurück-Taste Ihres Geräts oder Emulators, um zur vorherigen Seite zurückzukehren.
Fazit
In diesem Lernprogramm haben wir zwei wichtige Layout-Steuerelemente der Windows Phone-Plattform behandelt, die Panorama- und Pivot-Steuerelemente. Wir haben auch die Navigation überarbeitet und einige der üblichen Steuerelemente in Windows Phone verwendet, z. B. die Steuerelemente Button, TextBox und Rectangle. Im nächsten Artikel schließen wir diese Einführungsreihe mit Windows Phone ab und schauen, was als Nächstes für Sie am nächsten ist.
Share
Accentsconagua
