Settings-Flyout mit Callisto

Im einem der letzten Beiträge habe ich bereits das Callisto-Paket von Tim Heuer vorgestellt. In diesem Beitrag möchte ich nun zeigen, wie man mit der Hilfe dieses Toolkits ganz leicht ein eigenes Settings-Flyout erstellen kann. Dieses kann zum Anzeigen der Datenschutzerklärung oder des Impressums verwendet werden und beschreibt ein Flyout von der rechten Seite.

Zunächst muss Callisto in das bestehende ‚Windows 8‘-Projekt integriert werden. Dazu klickt ihr auf ToolsLibrary Package ManagerPackage Manager Console und es öffnet sich im unteren Bereich von Visual Studio ein kleines Fenster mit einem Eingabe-Prompt.

Die 'Package Manager Console' nach dem Aufrufen.

Die ‚Package Manager Console‘ nach dem Aufrufen.

Nun gebt ihr einfach den Befehl Install-Package Callisto in die Konsole ein und bestätigt durch das Drücken der Enter-Taste, um die Installation von Callisto zu starten.

Callisto wurde installiert und integriert.

Callisto wurde installiert und integriert.

Nun habt ihr bereits Zugriff auf das gesamte Paket ‚Callisto‘ und wir können beginnen das Settings-Flyout in unsere App zu integrieren. Dazu öffnen wir zunächst die MainPage.xaml.cs-Datei. Nun fügen wir die folgenden zwei Methoden innerhalb der MainPage-Klasse hinzu:

Sollte es die beiden Methoden oder eine der Methoden bereits in eurer MainPage.xaml.cs-Datei erhalten sein, so braucht ihr nur jeweils die erste Zeile in diese Methode zu integrieren. Denn mit diesen beiden Befehlen wir der Settings-Charm angesprochen und ein Event initialisiert, welches dafür sorgt, dass wir durch die Implementierung von MainPage_CommandsRequested unsere eigene ‚Seite‘ erstellen können. Um nun ein Setting-Flyout zu implementieren, benötigt man einfach nur die folgende Methode:

Somit steht jetzt bereits ein Flyout zur Verfügung, wenn man natürlich ein UserControl mit dem Namen SettingsContent angelegt hat, denn sonst kommt es an dieser Stelle zu einer entsprechenden Fehlermeldung.  Hier zu kann man zum Beispiel im Code-Behind ein StackPanel erstellen, welches dann Elemente wie Text-Felder oder Buttons enthält. Diesen Vorgang wiederholt man nun für alle seine Seite.

Anschließend wird jetzt beim Starten der App im Settings-Charm der entsprechende Eintrag anzeigt. Auf die gleiche Weise lassen sich nun verschiedene Einträge in dem Setting-Charm implementieren.

You may also like...

2 Responses

  1. Malte sagt:

    Ewig im Netz danach gesucht – danke für die klare Anleitung! :)

  2. Mmenter sagt:

    Works like a Charm :) Danke für die übersichtliche Anleitung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *