Windows 10 For Developers 3 of N: New Controls & App Deployment

Article

Here it is, the third article in the series about Windows 10 new features for developers. First the index of articles:

Windows 10 for developers 1 of N: An introduction
Windows 10 for developers 2 of N: Adaptative UI
Windows 10 for developers 3 of N: New Controls
Windows 10 for developers 4 of N: Upgrading to Visual Studio 2015RC

First, the bonus track: Windows 10 for phones build 10051

Good news, with latest Windows 10 for phones build 10051, now you can deploy apps from Visual Studio to your device directly.

You only need to register your phone for development using the Windows Phone Developer Registration tool (10), located in the Windows Phone SDK 8.2 folder in your start menu:

You only need to have your phone connected via USB, screen unlocked and with internet connectivity. Then just hit "Register" button. the app will ask you for your LiveID account and the phone will be registered for development.

And that's all, now you can deploy your apps to your device simply by selecting "Device" from the target dropdown when running from Visual Studio.

Relative Panel

Now let's start with the new controls!

The first one is the RelativePanel. In the second article in this series we talked about how to adapt your UI to various resolutions using Adaptative Visual States. The RelativePanel is directly related to that, since it will ease a lot of the work needed to build true adaptative UI.

RelativePanel is a container control just like the classic XAML Grid, but the elements it contains can be positioned relatively to the container itself or between the elements.

This offers much flexibility for the creation of responsive and adaptive layouts. Let's start with a simple layout, two elements inside a RelativePanel:

<RelativePanel>
<Rectangle Fill="Purple" Width="250" Height="200"/>
<Ellipse Fill="Yellow" Width="350" Height="350"/>
</RelativePanel>

Both elements are positioned by default in the RelativePanel, this means they are in the top/left corner of the panel:

Now, you can modify the above XAML to use some new attached properties exposed by RelativePanel. For example you can make the ellipse to move to the bottom/right corner of the RelativePanel:

<RelativePanel>
<Rectangle Fill="Purple" Width="250" Height="200"/>
<Ellipse Fill="Yellow" Width="350" Height="350"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

And this is the result:

Now, if you change the resolution (size) of the page or the orientation, both elements will preserve their relative position. But the RelativePanel also allows you to define the element's position relative to each other, using RelativePanel attached properties AlignTopWith, AlignBottomWith, AlignRightWith and AlignLeftWith:

<RelativePanel>
<Ellipse x:Name="yellowEllipse" Fill="Yellow"
Width="350" Height="350"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
<Rectangle Fill="Purple" Width="250" Height="200"
RelativePanel.AlignTopWith="yellowEllipse"
RelativePanel.AlignLeftWith="eyellowEllipse"/>
</RelativePanel>

So the result is now:

In the above capture, you can see the elements aligned in the top and left border of each one. But there are more attached property options to use:

Below: allows you to position the element below the target element.
Above: allows you to position the element above the target element.
LeftOf: allows you to position the element left of the target element.
RightOf: allows you to position the element right of the target element.

This way, you can make a full relative and adaptive layout:

<RelativePanel>
<Ellipse x:Name="yellowEllipse" Fill="Yellow"
Width="350" Height="350"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
<Rectangle x:Name="purpleRectangle" Fill="Purple"
Width="250" Height="200"
RelativePanel.Above="yellowEllipse"
RelativePanel.AlignLeftWith="yellowEllipse"/>
<Rectangle Fill="Orange"
Width="225" Height="300"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.LeftOf="purpleRectangle"/>
</RelativePanel>

SplitView

SplitView is another new kid for Windows but an old friend if you come from iOS or Android development. SplitView is the Windows SDK name to something many of you know as the Hamburger menu, the lateral swipe menu used in iOS and Android:

The SplitView control is a new revolution in Windows platform UI design. In the mobile device family we are accustomed to a different interaction pattern from the old days of Windows Phone 7. Historically in Windows Phone, the interaction pattern put elements in the bottom side of the screen.

Now you need to change this to use the top side of the screen.

Basically, the SplitView control allow us to define an option panel that could be opened and closed to create a lateral swiping panel. To start, you can create a simple layout like this:

<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="RoyalBlue">
<ToggleButton x:Name="BurguerToggle"
Background="Transparent"
IsChecked="False">
<FontIcon x:Name="Hamburger"
FontFamily="Segoe MDL2 Assets"
Foreground="LightCyan"
Glyph="" />
</ToggleButton>
</Grid>
<SplitView Grid.Row="1" PanePlacement="Left"
CompactPaneLength="50"
OpenPaneLength="320"
IsPaneOpen="{Binding IsChecked,
ElementName=BurguerToggle}"
PaneBackground="RoyalBlue"
DisplayMode="CompactInline">
<SplitView.Pane>
<RelativePanel/>
</SplitView.Pane>
</SplitView>
</Grid>

In the above XAML code, you define a ToggleButton control in the grid's first row to act as the Hamburger button to open/close our SplitView. You can usa a FontIcon with the new Segoe MDL2 Assets included in Windows 10 to define the burger icon.

Then, in the SplitView control you can look at the following several useful properties:

PanePlacement: Were to position the pane in the container: Left or Right.
DisplayMode: The way the SplitView pane will be shown:

CompactInline: compact, leaving a vertical hint visible and inline with the content. On opening, the content at the side of the SplitView will be redimensioned.
CompactOverlay: compact, leaving a vertical hint visible and over the page content. On opening, the content at the side of the SplitView is not modified.
Inline: the same as CompactInline above, but with no visual hint shown when the SplitView is closed.
Overlay: the same as CompactOverlay above, but with no visual hint shown when the SplitView is closed.

CompactPaneLength: Allows you to define the width of the visual hint shown on the panel closed and DisplayMode is compact.
OpenPaneLength: Allows you to define the width of the full opened content panel of the SplitView.
IsPaneOpen: Set this property to true to open the pane, false to close. This property allows data binding as you can see in the code above, so you can bind it for example to the IsChecked property of a ToggleButton, just like the example we use.

The result in tablet and phone:

In the mobile device family, it is not a good idea to show the Compact mode visual hint since it is stealing much real estate from the screen. You can use Adaptative Visual States to change this based on resolution.

Not a good bye, is more like a see you soon...

And with this ends the third entry in this Windows 10 series. This is not the final one. I'm will attend //Build 2015 next week so expect a new article at the end of the week, with a summary of what I see and can say in the conference. But for the moment you can play with the code for this third entry, downloading it from my GitHub account for Windows 10 development.

Happy Coding!