Universal Windows 10 Application with tailored design – part 1

Universal Windows 10 Application with tailored design – part 1

tailoredDesign1

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 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!

 

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

tailoredDesign2

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

tailoredDesign3

3) New Universal Windows Application is ready:

tailoredDesign4

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

tailoredDesign5

5) Now its time to add some controls to our layout:

We will add “image” control, and “textblock” control. After that we will be able to plan the design of our application.

Please note that this is not sophisticated example – it is simple just to show how the main idea.

 

6) Open “toolbox” on the left side and find “image control”:

tailoredDesign6

7) Place the “image” control in the layout on the top and center of it:

Rember to remove margins shown below.

The whole code for “image” control should be like this:

<img x:name="”image”" horizontalalignment="”Center”" verticalalignment="”Top”" height="”100″" width="”100″/">  

 

Please also do  not worry that image is transparent. Later we will add graphic to it.

tailoredDesign7

8) Secondly we must add some text to our layout:

Please select “textblock” control from the toolbox and place it below the “image: control:

The code for it should looks like this:

<textblock x:name="”textBlock1″" horizontalalignment="”Center”" textwrapping="”Wrap”" text="”This" is="" sample="" for="" beautiful="" universal="" windows="" application!”="" verticalalignment="”Center”/">  
</textblock> 

Done. Now we can tailor our layout for Desktop and Mobile.

1) Right click on the “MainPage.xaml” file in the “Solution Explorer” (on the right side) 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.

tailoredDesign9

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

tailoredDesign10

3) Let’s create some “Adaptive Triggers”:

Adaptive Triggers – new feature in Universal Windows Platform. This is a declarative rule that applies different visual states based on Window properties (in short: Adaptive Triggers are responsible for changing the arrangement of elements in layout with reference to the device that actually run the application).

Select “States” on the right panel and add “Visual State Group” (give it default name) as you can see below:

tailoredDesign11

tailoredDesign12

4) Add “Desktop” state to the “VisualStateGroup” as it is shown below:

tailoredDesign13

Now we must add the trigger for this state. After setting “MinWindowWidth” to 1024 click”OK” button. Please see the screenshot below:

tailoredDesign14

5) Add “Mobile” state to the “VisualStateGroup” as it is shown below:

tailoredDesign15

Now we must add the trigger for this state. After setting “MinWindowWidth” to 320 click”OK” button. Please see the screenshot below:

tailoredDesign16

Great, but what gives me that I have added these triggers…?

Every time your application is launched, adaptive triggers will check the width of the device and select appropriate layout for the application to display.

If width is at least 1024? If yes there will be Desktop Visual State applied. On the phone this will be also check. 1024 width is not for mobile. There will be Mobile state applied because next check is for width 320.

 

Let’s preprare the layout  changes with reference to Mobile and Desktop.

 

1) Select “DesktopState” and change scaling for desktop:

tailoredDesign17

2) Select “image” control and set its “HorizontalAligement” to “left”:

Also download the Windows image from my here and add it to “Assets” folder (just drag it to the “Assets” folder).

tailoredDesign18

tailoredDesign19

Now we should set the image. The result should be like this:

tailoredDesign20

3) Now select “MobileState” and change scaling for mobile:

Please notice that image is in the center of the layou again. That is because this state is for Mobile – we didn’t change anything to that.

We only changed “Desktop” visual state.

tailoredDesign21

4) Select “textblock” control and set its “VerticalAligement” to “bottom” (like on the screenshot below):

tailoredDesign22

Click cntrl + s to save changes and get back to Visual Studio:

There will be displayed information about changes made outside the Visual Studio so click “Yes to all”.

tailoredDesign23

tailoredDesign24

Now you can close Blend.

We must check if the changed are made and our visual state triggers will react.

From the ribbon select “23′ Desktop”. See the result. After that select “5′ Phone” and check what happen.

As you can see below our visual state triggers reacting for changes:

tailoredDesign25

tailoredDesign26

Now we will launch the application on the Mobile emulator and on Local machine at one time:

Visual state triggers react. On the mobile device image is center top and text is on the bottom. On desktop image is right top and text is on the center of layout.

tailoredDesign27

 Sum up

This first part of article shows how to use Visual State Triggers to create tailored design of Universal Windows Application and provide the best user experience to user.

In the next part I will show another method for creating tailored design of application on different Windows 10 devices.

Enjoy. J

Advertisements