Windows 10 Development: Small and Big Screens

Met de komst van Windows 10 en het feit dat deze op alle devices aanwezig is, is de Universal app zoals we die kennen in Windows 8.1 weg. Dat maakt het weer een stuk eenvoudiger, maar gelijktijdig ook lastiger.

image image

Voorheen had je een project voor Windows Phone en de schermen van je applicatie in dit project waren alleen voor mobile devices. Als alles in een project zit, dan moet je daar toch anders mee omgaan.

Gelukkig biedt het Windows 10 development SDK een aantal krachtige middelen. Zoals bijvoorbeeld een RelativePanel. Op een RelativePanel kun je van controls vertellen wat hun relatieve positie is ten opzichte van andere controls. Veel handiger dan voorheen, daar zat je te knoeien met margins of absolute posities. Waardoor je raar gedrag kreeg bij andere schermen etc.

image

Nog een mooie is een SplitView, waarbij je een Content en een Pane gedeelte hebt. Tenslotte hebben we al gauw een menu en een detail gedeelte op het scherm staan.

image

Maar hier heb je allemaal niets aan, als er niet een eenvoudige manier is om ze te manipuleren. Tenslotte is het in de XAML / MVVM wereld niet meer gebruikelijk dat je Events afvangt in Code. Daar is dan ook een mooie oplossing voor.

De VisualStateManager, die bestaat uit VisualStates met een StateTrigger en StateSetters.

image

Van de VisualState geef je dan aan wat de MinimalWidth of Height is en met de Setters geef je aan wat er dan moet gebeuren.

image

In mijn SDN evaluatie app voorbeeld ziet dat er dan als volgt uit. De eerste is bij een minimale breedte van 720 en de tweede is het alternatief. Dit werkt ook zo op een Windows Phone met Windows 10, waarbij het toestel in landscape of portrait gehouden wordt.

image  image

Zoals je ziet hebt ik een hamburger menu toegevoegd, wat ik jammer vind dat dit geen control is. Het is een toggle button met een Font (Segoe MDL2 Assets) en een Glyph.

image

Het werkt wel aardig en ik hoop dat ze het nog iets mooier maken.

Leuke sessie op Ignite: BRK2310 From the Small Screen to the Big Screen: Building Universal App Experiences with XAML

(disclaimer ik ben geen XAML goeroe, ik kan er een beetje mee omgaan)

Leave a Reply

Your email address will not be published. Required fields are marked *