Donnerstag, den 19. Mai 2016 – Hamburger Challenge

Die Grundnavigation für meine App ist fertig und heute zerlege ich mal das Hamburger Button Menü. Wer Lust hat kann sich am Ende des Beitrag noch ein Video von Channel 9 eingefügt. Die hier vorgestellte Lösung habe ich als Basis für meine Anwendung verwendet. Allerdings schreibe ich mein kleines Tool nicht in C# sondern Visual Basic.

2016-05-19 19_46_15-RechnungEasyApp

Gestern konnte ich das Grundgerüst für meine RechnungEasyApp fertigstellen. Heute konnte ich dann schon damit beginnen die einzelnen Unterseiten grafisch zu gestalten und mit dem Grundgerüst an Code auszustatten. Angefangen habe ich mit den Stammdaten und hier mit der wichtigsten Seite, den Firmendaten. Dazu gibt es später in diesem Blog mehr dazu – also nicht hier und heute.

Das Grundgerüst für die Hauptseite besteht aus dem Kopfbereich mit dem Hamburger Button, dem Back Button, dem Titel und dem Suchformular (was wohl wieder verschwinden wird!). Auf der linken Seite ist dann die Menüleiste mit den den 5 Hauptmenüpunkten untergebracht. Mein MainPage.xaml hat damit den folgenden Grundaufbau:

Mit Grid.RowDefinition werden zwei Zeilen definiert und in die obere Zeile in ein RelativePanal eingebettet die ganzen Elemente für den Kopf der Anwendung inklusive des Hamburger Buttons untergebracht. In Zeile sorgt ein SplitView Steuerelement, das der Bildschirm geteilt wird. Unter SplitView.Pane befindet sich das eigentliche Menü in Form einer Liste und in SplitView.Content ist der Frame untergebracht, um die weiteren Seiten anzuzeigen. Die schönen Buttons werden über die Schriftart Segoe MDL2 Assests erzeugt.

Die Herausforderung war jetzt Leben in die Bude zu bringen und das ohne störende Käfer als Show-Stopper. Dazu musste ein wenig Code in der MainPage.xaml.vb hinterlegt werden. Damit das Menü so schön auf und zuklappt müssen wir den Status des SplitView Steuerelementes mit jedem Klick ändern. Dazu rufen wir die IsPaneOpen Eigenschaft ab. Mit MySplitView.IsPaneOpen = Not (MySplitview.IsPaneOpen) erledigen wir das.

Kommen wir zum letzten Akt, der mir die meisten Kopfschmerzen gemacht hat. Wie springen wir jetzt von Seite zu Seite und wenn wir auf den Backbutton klicken landen wir wieder auf der Startseite. Dümmlicher Weise wird beim Erstellen der MainPage.xaml, im Gegensatz zu C#, keine Methode für die Initialisierung hinterlegt. Da ist nur gähnende Leere. Mit Public Sub New() müssen wir erst mal diese Methode anlegen und dort den Code für die Initialisierung hinterlegen.

Im ersten Schritt setze ich hier den Text für meinen TitleTextBlock fest. Anschließend rufe ich die Rechnungsliste über MyFrame.Navigate auf. Da ich hier den Back Button nicht sehen will, setze ich seine Visibility auf Collapsed und zum Schluss (ganz wichtig!) wird die IsSelected Eigenschaft des ListBox-Eintrages HomeListBoxItem auf True gesetzt. Im nächsten Schritt muss ich nur noch den SelectionChanged Event meiner Listbox abfragen und über eine If Then ElseIf Abfrage auswerten. Hier wird dann auf die einzelnen Unterseiten meiner App navigiert, der TitleTextBlock angepasst und der Back Button aus, bzw. eingeblendet.

Und jetzt wünsche ich viel Spaß mit dem Video

 

Schreibe einen Kommentar

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