Windows 10: Top 3 XAML/UI changes from 8.1 (Relative Panel)

Hey Everybody!

I’m taking a little detour from my usual Unity Gaming Tutorial Series, to give you the top 3 most important changes/updates (in my opinion) that have happened for the Universal Windows Platform (UWP).

  1. Relative Panel
  2. Split View
  3. State Triggers

TL;DR: Code is all on my GitHub, here http://bit.ly/UWP-UI-github

Relative Panel

Now this is a super cool new feature that really comes in handy with Microsoft’s new UWP style of development. What do I mean by this? UWP allows for one build to run immediately on phone and desktop! But by doing this developers have to consider adaptive UI that can change for different views/devices (phones, Xbox, desktops, tablets, HoloLens).

So what is Relative Panel. Well it’s “a style of layout that is defined by the relationships between its child elements” – (read more here). When implementing this style of layout, normally there will be a child object acting as an anchor for the other children derive their location.

Getting Started

So I’m using the new Visual Studio 2015 RC. Interesting fact: You Do NOT need Windows 10 to build for Windows 10!

When you open Visual Studio you should see this interface.

uwp0

If you are familiar with Visual Studio not much has changed.

Create a new UWP project.

uwp1

A new project should be generated.

uwp2

If you look at the Solution Explorer you should notice that there is no longer a shared folder, or two separate projects in the same solution for phone and store apps, like in 8.1.

Relative Panel Dev

Now I’m going to show you how Relative Panels work. Double click the Main.xaml file if it’s not already open.

uwp3

I’ve circle two important things to notice when designing your app. The orientation and the screen that you are dev-ing on at the moment. Also notice the Grid tag? This is where most of our XAML code will be written. Let’s continue.

First: Add a Relative Panel to your Grid

<RelativePanel Width="300" Margin="0,100,0,0" VerticalAlignment="Top"></RelativePanel>

Second: Lets add some content to this panel this will act as our anchor object, aka Square 1.

<Rectangle x:Name="Square1" Fill="Red" Height="50" Width="50"/>

Third: The following squares will now be placed in the Panel relative to that initial Square. Let’s also make sure that we can still view everything though when the width changes. We can do this with adaptive triggers, which I’ll talk about later, but for now let’s add a scroller.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" IsEnabled="True">

Fourth: Run the Code

Now this is where the new Universal Windows Platform really shines!
Click the run on local machine.

uwp4

The code runs in a Windows 10 Window much like we would suspect.

LOCAL MACHINE:

relaitvePanel1

Now, click the arrow next to local machine. You should see a list of emulators you can build on.

uwp4-1

uwp4-2

Select one of the phones. **Caveat – To have this work you need to download the mobile SDK if you didn’t when you downloaded Visual Studio. **

Now run again. The emulator will start and run the app!

EMULATOR:

relaitvePanel2

 

WHAT!? No changes in code or anything! I’m sorry. I’m just really excited about this, and if you do cross platform development you probably share my enthusiasm.

Next I’ll show you the new Split View in XAML

Happy Coding!

-TheNappingKat


2 thoughts on “Windows 10: Top 3 XAML/UI changes from 8.1 (Relative Panel)”

  1. It seems like you forgot a chunk from the middle; you mention adding additional squares but not how to do it. You mention adaptive triggers but never discuss them.

Leave a Reply

Your email address will not be published. Required fields are marked *