Geräte spezifisches Layout mit Windows 10

Windows Universal Platform Apps können auf verschieden Gerätetypen laufen und sind somit cross Device fähig (ganz ohne JavaScript, das wäre cross Platform). Ein möglicher Ansatz für das UX Design, definiert verschiedene XAML Sichten (Views) pro Device Familie.

Diese UWP XAML Views werden in speziell benannten Ordnern des Visual Studio Universal Projekts angelegt

DeviceFamily-Mobile
DeviceFamily-Desktop
DeviceFamily-IoT
DeviceFamily-Team

Für’s erste reicht der mobile Ordner, weil sich das am schnellsten ausprobieren lässt. Im Projekt wird eine leere Seite mit zb de Namen BlankPage1.xaml angelegt. Dieser Page wird ein Button Control hinzugefügt.

image

Per Doppelclick kann der VB.NET Click Event Handler Code erzeugt werden. Fürs Feedback wird eine Windows 10 MessageBox genutzt.

   1:  Private Async Sub button_Click(sender As Object, e As RoutedEventArgs) Handles button.Click
   2:          Dim dialog = New MessageDialog("Click")
   3:          Await dialog.ShowAsync()
   4:  End Sub

Dann wird im Projekt ein Device Family Verzeichnis erzeugt in dem eine ident bezeichnete XAML Sicht hinzugefügt wird.

image

Auch diese Seite erhält einen Button, aber mit abweichender Beschriftung. Allerdings kann man hier keinen Event Code per Doppelclick erzeugen. Die Code Logik kommt aus der default XAML Seite von vorhin.

Für den Test im Desktop Modus oder Emulator muss noch die Startseite in der Code Datei von app.xaml.vb angepasst werden.

   1:   If rootFrame.Content Is Nothing Then
   2:              ' Wenn der Navigationsstapel nicht wiederhergestellt wird, zur ersten Seite navigieren
   3:              ' und die neue Seite konfigurieren, indem die erforderlichen Informationen als Navigationsparameter
   4:              ' übergeben werden
   5:              rootFrame.Navigate(GetType(BlankPage1), e.Arguments)
   6:   End If

Im Windows 10 Desktop

image

Auf dem Phone Emulator

image

Die Messagebox clickt auch

image

Kommentare sind geschlossen