Universal Windows 10 Application with tailored design – part 2

Universal Windows 10 Application with tailored design – part 2

tailored2Design1

Short introduction

Windows 10 is released and as you know for sure there is new opportunity for creating apps that run on every Windows device.

Universal Windows Applications – create once, run everywhere – that is true but do not forget about user experience and responsive design of your application. Of course it is possible to create one app and run it on Mobile or as a Desktop app, but real developer should remember about the user.

In this second article I will try to show how easily you can create an application that looks nice on Mobile and Desktop – tailored design is still very important!

In previous part I showed adaptive triggers. This article describes orientation handling.

 

What do I need to start?

1) Windows 10 operating system – can be neither Education edition or Enterprise

2) Visual Studio 2015 Comminity (for free) or higher

 

Let’s start

 1) Launch Visual Studio 2015:

tailored2Design2

2) From “File” menu select “New” and then “Project”. Give it the name – “TailoredApp”:

tailored2Design3

3) New Universal Windows Application is ready:

tailored2Design4

4) Open “MainPage.xaml” visible on the right side:

tailored2Design5

5) Now its time to create our layout for different orientation changes (portrait and landscape):

Right click on MainPage.xaml file and select “Design in Blend”.

Blend is extended tool for creating design for Universal Windows Applications and has some more features than Designer in Visual Studio.

tailored2Design6

6) You should see the opened Blend with “MainPage” Page ready for editing:

tailored2Design7

7) Click on the button shown below “Add state group” and rename it to: “Orientation State Group”:

tailored2Design8

tailored2Design9

8) Now add new state and name it “PortraitState” as shown below:

After that click “Edit adaptive triggers” as shown on the screenshots below.

tailored2Design10

tailored2Design11

tailored2Design12

Select “Other type” from dropdown and add “State Trigger”:

tailored2Design13

9) Add the second state and name it “LandscapeState”:

Do the same process with “State Triggers” as in above point.

tailored2Design14

10) Keep “Portraitstate” marked and select “Assets” on the left sidebar, select “Controls” and “TextBlock”:

Add this Textblock control to your layout (just drag it on the layout).

tailored2Design15

On the right side you can see the code for the XAML UI. Summary code should be like below:

<grid background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    
<visualstatemanager.visualstategroups>    
<visualstategroup x:name="OrientationStateGroup">    
<visualstate x:name="PortraitState">    
<visualstate.setters>    
<setter target="textBlock.(UIElement.Opacity)" value="1">    
<setter target="textBlock.(TextBlock.FontWeight)">    
<setter.value>    
<fontweight>Bold</fontweight>    
</setter.value>    
</setter>    
</setter></visualstate.setters>    
<visualstate.statetriggers>    
<statetrigger>    
</statetrigger></visualstate.statetriggers>    
</visualstate>    
<visualstate x:name="LandScapeState">    
</visualstate></visualstategroup>    
</visualstatemanager.visualstategroups>    
<textblock x:name="textBlock" opacity="0" textwrapping="Wrap" text="Portrait" verticalalignment="Center" horizontalalignment="Center">    
</textblock></grid> 

 

Now do the same for “LandScapeState”. Firstly rotate layout as shown below and drag TextBlock control on the layout and change it:

tailored2Design16

Code at the end should be like this:

<grid background="”{ThemeResource" applicationpagebackgroundthemebrush}”="">  
<visualstatemanager.visualstategroups>  
<visualstategroup x:name="”OrientationStateGroup”">  
<visualstate x:name="”PortraitState”">  
<visualstate.setters>  
<setter target="”textBlock.(UIElement.Opacity)”" value="”1″/">  
<setter target="”textBlock.(TextBlock.FontWeight)”">  
<setter.value>  
<fontweight>Bold</fontweight>  
</setter.value>  
</setter>  
</setter></visualstate.setters>  
<visualstate.statetriggers>  
<statetrigger>  
</statetrigger></visualstate.statetriggers>  
</visualstate>  
<visualstate x:name="”LandScapeState”">  
<visualstate.setters>  
<setter target="”textBlock1.(UIElement.Opacity)”" value="”1″/">  
<setter target="”textBlock1.(FrameworkElement.VerticalAlignment)”" value="”Top”/">  
</setter></setter></visualstate.setters>  
</visualstate>  
</visualstategroup>  
</visualstatemanager.visualstategroups>  
<textblock x:name="”textBlock”" opacity="”0″" textwrapping="”Wrap”" text="”Portrait”" verticalalignment="”Center”" horizontalalignment="”Center”/">  
<textblock x:name="”textBlock1″" horizontalalignment="”Center”" opacity="”0″" textwrapping="”Wrap”" text="”Landscape”" verticalalignment="”Top”/">  
</textblock></textblock></grid> 

 

11) Now click cntrl + s on keyboard and go back to Visual Studio:

There you must also save all changes applied.

tailored2Design17

12) Last point – reaction for orientation changes:

Open “MainPage.xaml” file.

tailored2Design18

Class should be like below:

tailored2Design19

But how does it work?!

VisualStateManager class is responsible for changing the appropriate layout if there is rotation. We retrieving window properties and checking if width is smaller that height. If yes it means that Portrait state should be applied.

 

13) Test our application:

Launch the application using Mobile emulator and rotate it, you will see the effect!

tailored2Design20

tailored2Design21

Sum up

This second part of article shows how to use Visual State Manager and handle rotation to create tailored design of Universal Windows Application and provide the best user experience to user.

Advertisements