Universal Windows Platform | Adaptive Design

2015-10-08 13:16:09来源:作者:人点击

Universal Windows Platform | Adaptive Design

With the Universal Windows Platform in Windows 10, your apps will now run on a number of device families and automatically scale across the different screen and window sizes, supported by the platform controls. Unlike previous versions of Windows, you don’t have to make application different devices, also not for all device specific platform like, Windows (Desktop) App, Windows Phone, IoT, Consols or for Holo Lens. One application will run on different devices.

Figure: Windows 10 device family.

Rather, you can use responsive techniques you can use to optimize your user interface for different device families. For the full description, check out the Guide to Universal Windows Platform (UWP) apps on MSDN.

When designing your app, it’s important to consider the device families it could be used on. You can use several techniques like, Device Specific View, State Trigger, Relative Panel and so on. Even you can wrap the whole content of your application so that it can be used on different platforms. It basically compressed the UI element to fit into the window.

Visual State ManagerThe VisualStateManager class in Windows 10 has been expanded with two mechanisms to implement a responsive design in your XAML-based apps. The new VisualState.StateTriggers and VisualState.Setters APIs allow you to define visual states that correspond to certain conditions. Using the built-inAdaptiveTrigger as the VisualState’s StateTrigger with a MinWindowHeight and/or MinWindowWidth property, visual states can change based on app window height/width. You can also extend Windows.UI.Xaml.StateTriggerBase to create your own triggers, for instance triggering on device family or input type. Take a look at the following example:

<VisualStateManager.VisualStateGroups><VisualStateGroup><VisualState x:Name="WideState"><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth="600" /></VisualState.StateTriggers><VisualState.Setters><Setter Target="LayoutRoot.Background"Value="SteelBlue" /><Setter Target="FirstNameText.(RelativePanel.RightOf)"Value="FirstNameLabel" /><Setter Target="MyButton.(RelativePanel.RightOf)"Value="FirstNameLabel" /><Setter Target="MyButton.(RelativePanel.Below)"Value="FirstNameText" /></VisualState.Setters></VisualState><VisualState x:Name="NarrowState"><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth="0" /></VisualState.StateTriggers><VisualState.Setters><Setter Target="LayoutRoot.Background"Value="SteelBlue" /><Setter Target="FirstNameText.(RelativePanel.Below)"Value="FirstNameLabel" /><Setter Target="MyButton.(RelativePanel.Below)"Value="FirstNameText" /></VisualState.Setters></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups>

Listing: 1

In this example, there is TextBlock and a TextBox named. A Button is at the below of the TextBox. In desktop devices, TextBlock and TextBox are aligned side by side, but in mobile device they are stacked on top of each other in its default state. Moreover, the Button changes its position relatively on TextBox and it just under of it.

Figure 2: When the width of the grid is below 600 px.

Increasing the windows size automatically adapt the design with the help of Visual State Manager.

Figure 3: When the width of the grid is greater than 600 px.

If we see the Windows Phone application of same design, it will look like this.

Figure: 4

It’s one kind of techniques to make your design responsive. But this may not helpful with a lots of UI elements. You can make it by the help of Relative Panel layout.

Relative PanelA StateTrigger is used to change the Orientation property of another control. You can use it for Grid, StackPanel and so on. While the many container elements in XAML allow you to use StateTriggers to manipulate your user interface in a large number of ways, they don’t offer a way to easily create complex responsive UI where elements are laid out relative to each other. That’s where the new RelativePanel comes in. You can use a RelativePanel to lay out your elements by expressing spatial relationships between elements. Here’s an example:

<RelativePanel HorizontalAlignment="Stretch" Margin="20"> <TextBlock Text="First name" x:Name="FirstNameLabel" Foreground="White" Margin="0,5,10,5"/> <TextBox x:Name="FirstNameText" Width="300" Foreground="White"/> <Button Content="Click Me" Background="SeaGreen" Foreground="White" x:Name="MyButton" Click="Button_Click" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0,10,0,0" /></RelativePanel>

Listing: 2

As you can see, Relative Panel makes the control relatively behave on size changed. This means that you can easily use the RelativePanel together with AdaptiveTriggers to create a responsive user interface where you move elements based on available screen space.

Device FamilyIf you want to do major differences in your UI, that’s probably not the most efficient way. Windows 10 comes with a nice trick to use completely different XAML files based on the device family you’re running on.

They simplest way is to add a new folder named “DeviceFamily-Mobile” or “DeviceFamily-Desktop” or both in your project. In our sample application, we are going to add only “DeviceFamily-Mobile” for mobile specific design and use the default MainPage.xaml for the desktop specific design.

Let’s first create a new blank UAP project, and add the following XAML to the main on MainPage.xaml.

<Grid Background="SteelBlue"> <Button x:Name="button" Content="Click Me" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="button_Click" Background="SeaGreen" Foreground="White"/> <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,60,0,0" TextWrapping="Wrap" Text="Hi! I am Windows Desktop." VerticalAlignment="Top" Height="35" Width="340" FontSize="21.333" Foreground="White"/></Grid>

Listing: 3

And in MainPage.xaml.cs file, create an event handler of the button control.

private void button_Click(object sender, RoutedEventArgs e){ textBlock.Text = "Proudly running on Windows 10.";}

Listing: 4

If you run the application on both desktop and mobile, it only show “Hi! I am Windows Desktop.”.

Figure: 5

Surprisingly we can change the view of the mobile application by adding a Xaml View inside the DeviceFamily-[family] folder. First create a new folder called DeviceFamily-[family] where [family] is “Mobile”.

Figure: 6

Right-click this folder and choose “Add new item”

Figure: 7

Pick “Xaml View” and change the name to “MainPage.xaml” This page is similar to a blank page; but is for overriding specific XAML pages – i.e., it doesn’t include the code behind, which you already have. Now, add the following XAML to the main in your overridden XAML page.

<Grid Background="SteelBlue"> <Button x:Name="button" Content="Click Me" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="button_Click" Background="SeaGreen" Foreground="White"/> <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,60,0,0" TextWrapping="Wrap" Text="Hi! I am Windows Phone." VerticalAlignment="Top" Height="35" Width="340" FontSize="21.333" Foreground="White"/></Grid>

Listing: 5If you notice, we do not have any code behind file for the new Xaml View page. Moreover, we have the same XAML code, we have used before our default MainPage.xaml. The only change is the TextBlock’s text. Also, we have an event handler for the Button control. Surprisingly, it will work fine because, the button click event is already defined in the default MainPage.xaml.cs. So, we just change the view of the mobile device, nothing else.

If you run the Windows Phone app, it will look like this.

Figure: 8

If you click the “Click Me” button, it will the change the text of the TextBlock in the same way as desktop, because it has a single event handler for both desktop and mobile specific design.

Figure: 9 & 10

So this method enables you to completely override the UI and adapt for the device family and maintain the same code-behind.

These techniques are really useful to make a responsive design of you Universal Windows Platform Application development. Best practice makes your application more acceptable for your customer. You have to decide what changes you may need according to your customer needs and your target device types.

It’s better to use separate device type design rather than State Trigger. Because when you have lots of UI element and dynamic contents, this technique may not suitable for you. Although, you can use separately on those device types.

Hopefully, this article gives an overall idea about Adaptive Design in Universal Windows Platform. Make you app look great on any devices. Happy coding!

Download the full source code: http://1drv.ms/1QZcz7g