Controls for Responsive Design in XAML based Universal Apps

Tags: WinRt Xaml

In this post I want to show how I realized responsive design, the buzzword coming from the web technologies, in my app World Places. Thought my app is developed in C# using XAML, responsive design is also importand in the case you are not using web technologies. Espacially in universal apps you now have to take into account the many different form factors your app can run on. XAML based apps can now target smartphones, phablets, tablets, desktop and TV. If you want your app to run on all form factors your app has to support screen sizes starting from around 4 inches to the biggest TV screens available.

In my app World Places, I used a combination of the Hub control with the GridView control inside each of the Hub sections. I think this is the easiest way to make your app responsive to different screen sizes for differen form factors. This is also the way many project templates work. Have a look at the following screenshots to see what is the outcome of the combination of this two controls.

The following screenshot shows the app in fullscreen mode on a big tablet or on a desktop pc.

In this screenshot the contents of the hub sections (Webcam, Weather, Webcam Details, etc.) are positioned with the help of a grid view as mentioned. Have a look to the next screenshot to see what happens if the screen size gets smaller. The next screenshot is taken on Windows 10 running the app in the new window mode.

In this screenshot you can see the grid view automatically changed the layout of the contents of the hub sections. The contents are now side by side. The same would also happen if you would run the app on a device with a smaller screen in fullscreen mode.

On the next two screenshots you can see what happens if you run the app on a Windows Phone.

         

On a Windows Phone a hub section has a fixed width. Therefore the grid view inside the hub section can not layout the contents side by side. But on the other hand the hight of a hub section is unlimited on Windows Phone. A hub section gets automatically scroll bars if the conents do not fit on the screen. This is the reason why the grid view inside the hub section positions the contents on top of each other. Also notice that the back button is missing on the Windows Pone version of the app. To read more about this have a look at my previous post.

Hope it helps!

No Comments

Add a Comment