Universal Applications: be ready for Windows 10 (part 2)

In the previous post we started to discuss features and approaches to build Universal Applications. I am going to show that already today you may build applications which will be ready for Windows 10. And today we are going to discuss XAML.

Full Screen and Snap mode

When Microsoft introduced Windows 8, Windows Runtime and Modern UI patterns, there were three things which developers needed to know about applications: all Modern UI applications work in full screen mode; 1024x768 is minimal supported resolution for Windows 8 devices; for resolutions 1360x768 and more Windows 8 allows to show applications in Snap mode with fixed width in 320 pixels. Based on these assumptions many developers designed interfaces for their applications in 1024x768 resolution using these parameters like minimal amount of available space for application. In case of Snap mode, many developers ignored it and tried to avoid to design something for 320x768 resolution. Frankly speaking I didn’t like Snap mode as well. Usually I showed a message like this: “Application doesn’t work in Snap mode. Please, move the application to Full screen mode to continue”. This messages helped me to pass certification.

But everything is changing and Windows 8.1 added some more pixels to Snap mode. Today, default width of Snap mode for Windows 8.1 is 500 pixels. This amount is harder to ignore and that’s more important – Windows 10 allows to run Modern UI applications in window mode like legacy desktop applications.   

So, if you are going to create the best UX in your application you should think about different resolutions in advance. Windows 8.1 already doesn’t support events which let the user see that application is in Snap mode, instead, Windows proposes the SizeChanged event. This event is related to Page and you can easy get access to page width and height in order to understand the current size and change layout according to it. The event handler can look like this:

 void Page_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
 if (e.NewSize.Width <= 500) 
 { 
 . . . . 
 } 
 else if (e.NewSize.Width < 1024) 
 { 
 . . . . 
 } 
 else 
 { 
 . . . . 
 } 
} 

So in order to guarantee the best UX in Windows 10 you should think about smaller resolutions. But there is a trick: if you already implement application’s layouts for small resolutions, can you apply it for Windows Phone application – I believe, so.

Therefore, in case of XAML and layouts you can think about resolutions only because both platforms support almost the same set of controls.

ViewState manager

Right now, we are ready to change layouts depending on width of the window. So, it’s time to think how to make it.

The best way to change layouts is using ViewStateManager there. You can use it in XAML to define different visual state groups. Each group can contain Storyboard with animations inside. You can use these animations to hide or show some controls, change ItemTemplate, change controls’ properties etc. It’s easy to declare several groups for different resolutions and, thanks to animations, specify different look for each layout.

<VisualStateManager.VisualStateGroups>

            <VisualStateGroup>

                <VisualState x:Name="DefaultLayout">

                . . . .  

                </VisualState>

                <VisualState x:Name="Layout500">

                . . . .

                </VisualState>

                <VisualState x:Name="Layout1024">

                . . . .

                </VisualState>

      </VisualStateGroup>

 </VisualStateManager.VisualStateGroups>

As I mentioned before, you can change Visability properties, assign new ItemTemplate value etc.

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
 Storyboard.TargetProperty="Visibility">
 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
 Storyboard.TargetProperty="ItemTemplate">
 <DiscreteObjectKeyFrame KeyTime="0" 
 Value="{StaticResource smallItemTemplate}"/>
</ObjectAnimationUsingKeyFrames>

Onc, you defined all needed visual states, you can implement code, which allows to change visual state based on windows size. You can do it in SizeChanged event handler using this line of code:

 VisualStateManager.GoToState(this, "Layout500", true);

I believe that we can finish for today but I am going to continue the series and next time we will discuss DPIs and images.