Universal Windows Platform provides you 3 different kind of layouts:
  1. Fluid Layout
  2. Tailored Layout
  3. Responsive Layout
Out of these three, responsive layout is more optimized to use in UWP apps. In this layout, we use visual states to tweak our UI depending upon size of screen i.e. desktop, phone, etc.
In this article, we'll see how to setup visual states and develop a very basic responsive UWP app.
You should have Windows 10, Visual Studio 15 and UWP tools installed in your machine. I'll assume that you know the basics of VS 2015 and Windows app development.
Lets get started.
  • Create a new blank universal windows app.
  • Open "MainPage.xaml" from solution explorer. 
  • Select "6" Phone (1920 x 1080) 250% scale" for preview from designer window.
  • Put the following code inside your main grid in your xaml code. Here I've simply created 4 buttons inside a StackPanel with horizontal and vertical alignment centered.
  • Now play with visual states. Put the following code right above your StackPanel. Here I've created a visual state inside a visual state group using a visual state manager. Focus on Line 14-19 where we've defined state triggers and setters. What we've stated here is quite simple, if the width of app windows exceeds 900 then change the layout of the StackPanel to horizontal. Always put your condition inside <VisualState.StateTriggers> and actions to be performed should go inside <VisualState.Setters>.
  • Build the project and test in your local machine.

We've covered the basics of visual states. You can do a lot of stuff with this such as changing background colors, repositioning the elements, etc. Sky is the limit. Do some create stuff and share with us.
If you've any questions, please don't hesitate to ask in comments.