Zusammenfassung von Kapitel 25. Seitenvarianten
Hinweis
Dieses Buch wurde im Frühjahr 2016 veröffentlicht und seitdem nicht aktualisiert. Wenngleich ein großer Teil des Buchs weiterhin relevante Informationen liefert, sind einige Abschnitte veraltet, und einige Themen sind nicht mehr korrekt oder vollständig.
Bisher haben Sie zwei Klassen kennengelernt, die von Page abgeleitet werden: ContentPage und NavigationPage. In diesem Kapitel werden zwei weitere vorgestellt:
MasterDetailPageverwaltet zwei Seiten, eine Master- und eine Detailseite.TabbedPageverwaltet mehrere untergeordnete Seiten, auf die über Registerkarten zugegriffen wird.
Diese Seitentypen bieten komplexere Navigationsoptionen als die NavagationPage in Kapitel 24 erläuterten. Seitennavigation.
Master und Detail
Die MasterDetailPage definiert zwei Eigenschaften vom Typ Page: Master und Detail. Im Allgemeinen legen Sie jede dieser Eigenschaften auf eine ContentPage fest. Die MasterDetailPage zeigt diese beiden Seiten an und wechselt zwischen ihnen.
Es gibt zwei grundlegende Möglichkeiten, um zwischen diesen beiden Seiten zu wechseln:
- Teilen, wobei Master- und Detailseite nebeneinander angeordnet werden.
- Popover, wobei die Detailseite die Masterseite vollständig oder teilweise verdeckt.
Es gibt mehrere Varianten des Popover-Ansatzes (gleiten, überlappen und tauschen), aber diese sind in der Regel plattformabhängig. Sie können die MasterDetailBehavior-Eigenschaft von MasterDetailPage auf einen Member der MasterBehavior-Enumeration festlegen:
Diese Eigenschaft wirkt sich jedoch nicht auf Telefone aus. Smartphones weisen immer ein Popover-Verhalten auf. Nur Tablets und Desktopfenster können geteilt werden.
Untersuchen der Verhalten
Mit dem MasterDetailBehaviors-Beispiel können Sie mit dem Standardverhalten auf verschiedenen Geräten experimentieren. Das Programm enthält zwei separate ContentPage-Ableitungen für die Master- und Detailseite (wobei für beide eine Title-Eigenschaft festgelegt ist) und eine weitere Klasse, die von MasterDetailPage abgeleitet wird, in der sie kombiniert werden. Die Detailseite ist in einer NavigationPage enthalten, da das UWP-Programm ohne dies nicht funktionieren würde.
Die Windows 8.1- und Windows Phone 8.1-Plattformen erfordern, dass eine Bitmap auf die Icon-Eigenschaft der Masterseite festgelegt wird.
Schulanfang
Das SchoolAndDetail-Beispiel verfolgt einen etwas anderen Ansatz zur Erstellung des Programms, um Kursteilnehmer aus der SchoolOfFineArt-Bibliothek anzuzeigen.
Die Eigenschaften Master und Detail sind mit visuellen Strukturen in der Datei SchoolAndDetailPage.xaml definiert, die von MasterDetailPage abgeleitet wird. Diese Einrichtung ermöglicht die Festlegung von Datenbindungen zwischen den Master- und Detailseiten.
Diese XAML-Datei legt außerdem die IsPresented-Eigenschaft von MasterDetailPage auf True fest. Dies bewirkt, dass beim Start die Masterseite angezeigt wird. Standardmäßig wird die Detailseite angezeigt. Die SchoolAndDetailPage.xaml.cs-Datei legt IsPresented auf false fest, wenn ein Element aus der ListView auf der Masterseite ausgewählt wird. Die Detailseite wird dann angezeigt:
Ihre eigene Benutzeroberfläche
Obwohl Xamarin.Forms eine Benutzeroberfläche zum Wechseln zwischen Master- und Detailansicht bereitstellt, können Sie Ihre eigene bereitstellen. Dazu gehen Sie wie folgt vor:
- Legen Sie die
IsGestureEnabled-Eigenschaft auffalsefest, um Wischen zu deaktivieren. - Setzen Sie die
ShouldShowToolbarButton-Methode außer Kraft, und geben Siefalsezurück, um die Schaltflächen der Symbolleiste unter Windows 8.1 und Windows Phone 8.1 auszublenden.
Anschließend müssen Sie eine Methode bereitstellen, um zwischen den Master- und Detailseiten zu wechseln, wie im Beispiel ColorsDetail veranschaulicht.
Im MasterDetailTaps-Beispiel wird ein anderer Ansatz veranschaulicht, der einen TapGestureRecognizer auf den Master- und Detailseiten verwendet.
TabbedPage
TabbedPage ist eine Sammlung von Seiten, zwischen denen Sie mithilfe von Registerkarten wechseln können. Sie wird von MultiPage<Page> abgeleitet und definiert keine eigenen öffentlichen Eigenschaften oder Methoden. MultiPage<T> definiert jedoch eine Eigenschaft:
Children-Eigenschaft vom TypIList<T>.
Diese Children-Sammlung füllen Sie mit Seitenobjekten.
Ein anderer Ansatz erlaubt es Ihnen, die untergeordneten Elemente von TabbedPage ganz ähnlich wie eine ListView zu definieren, indem Sie diese beiden Eigenschaften verwenden, die die Registerkartenseiten automatisch erstellen:
ItemsSourcevom TypIEnumerableItemTemplatevom TypDataTemplate
Dieser Ansatz funktioniert jedoch nicht gut unter iOS, wenn die Sammlung mehr als ein paar Elemente enthält.
MultiPage<T> definiert zwei weitere Eigenschaften, mit denen Sie nachverfolgen können, welche Seite zurzeit angezeigt wird:
CurrentPagevom TypT, die auf die Seite verweist.SelectedItemvom TypObject, das auf das Objekt in derItemsSource-Sammlung verweist.
MultiPage<T> definiert auch zwei Ereignisse:
PagesChanged, wenn sich dieItemsSource-Sammlung ändert.CurrentPageChanged, wenn sich die angezeigte Seite ändert.
Diskrete Registerkartenseiten
Das DiscreteTabbedColors-Beispiel besteht aus drei Registerkartenseiten, auf denen Farben auf drei unterschiedliche Weisen angezeigt werden. Jede Registerkarte ist eine ContentPage-Ableitung, und die TabbedPage-Ableitung DiscreteTabbedColorsPage.xaml kombiniert dann die drei Seiten.
Für jede Seite, die auf einer TabbedPage angezeigt wird, ist die Title-Eigenschaft erforderlich, um den Text auf der Registerkarte anzugeben, und der Apple Store erfordert, dass außerdem ein Symbol verwendet wird, sodass die Icon-Eigenschaft für iOS festgelegt ist:
Das StudentNotes-Beispiel besitzt eine Startseite, auf der alle Kursteilnehmer aufgeführt werden. Wenn Sie auf einen Kursteilnehmer tippen, erfolgt die Navigation zu einer TabbedPage-Ableitung, StudentNotesDataPage, die drei ContentPage-Objekte in ihrer visuellen Struktur enthält, von denen eins die Eingabe von Notizen zu diesem Schüler/Studenten ermöglicht.
Verwenden einer „ItemTemplate“
Das Beispiel MultiTabbedColor verwendet die NamedColor-Klasse in der Bibliothek Xamarin.FormsBook.Toolkit. Die Datei MultiTabbedColorsPage.xaml legt die DataTemplate-Eigenschaft der TabbedPage auf eine visuelle Struktur fest, beginnend mit ContentPage, die Bindungen zu Eigenschaften von NamedColor enthält (einschließlich einer Bindung an die Title-Eigenschaft).
Dies ist unter iOS jedoch problematisch. Nur ein paar dieser Elemente können angezeigt werden, und es gibt keine gute Möglichkeit, um ihnen Symbole zuzuordnen.