Universal Windows Platform Split View Control

Rahat Yasir
10y
37.3k
0
2

Article

Windows 10 brings a lot of new features in Universal Windows App Platform. One of the new control that is integrated in Visual Studio is Split View control. This control is nothing more than navigation affordance. It gives a whole new experience to navigate between pages, also back buttonservicebenefit. Moreover, Split View is not only for navigation but also you can customize it as your application need.

The split view control can be used to make a nav pane pattern. To build this pattern, add an expand/collapse button (the "hamburger" button) and a list view need to the split view control.

Examples

The split view control in its default form is a basic container. With a button and a list view added, the split view control is ready as a navigation menu. Here are examples of the split view as a navigation menu, in expanded and compact modes.

Figure 1

Creating a Project with Split View Control

Firstly, create a new project and in MainPage.xaml inside the Grid make a new SplitView control.

<SplitView x:Name="SplitView" OpenPaneLength="240" CompactPaneLength="48"
DisplayMode="CompactOverlay" IsPaneOpen="False" PaneBackground="DarkGray">
<SplitView.Pane>
<StackPanel x:Name="SplitViewPanePanel">
<RadioButton x:Name="BackRadioButton" Click="BackRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Background="Gray" Content="Back" GroupName="Back"/>
<RadioButton x:Name="HamburgerRadioButton" Click="HamburgerRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Menu" GroupName="Hamburger"/>
<RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Home" GroupName="Navigation"/>
<RadioButton x:Name="SettingsRadioButton" Click="SettingsRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Settings" GroupName="Navigation"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame">
</Frame>
</SplitView.Content>
</SplitView>

Listing 1

Here you can see that, in SplitView control there are two section, one is “SplitView.Pane” and another is “SplitView.Content”. “SplitView.Pane” holds all the list items of your navigation links, which you can see in Figure 1 and “SplitView.Content” is the main frame of your application, which you can populate with other controls and application data whatsoever. We have taken a Frame inside the “SplitView.Content” because we want to make the Split View fixed and load different pages as needed. So, the user will notice that a new frame will be loaded instead of a new page. That will give a great experience to your application.

Simple custom RadioButtonStyle

To set the icon of the “SplitView.Pane”, we have used a custom style of Radio Button. And in the Radio Button their is a Tag property which you can use the Character Map Icons.

Figure 2

We have put the style code outside the grid. The custom style code snippet is given below.

<Page.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="NavButtonPressedBackgroundBrush" Color="White" Opacity="0.3" />
<SolidColorBrush x:Key="NavButtonCheckedBackgroundBrush" Color="White" Opacity="0.2" />
<SolidColorBrush x:Key="NavButtonHoverBackgroundBrush" Color="White" Opacity="0.1" />
<Style x:Key="NavRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonHoverBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonPressedBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonCheckedBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Name="BackgroundGrid" Background="Transparent" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="34" Height="38" Text="{TemplateBinding Tag}" FontFamily="Segoe MDL2 Assets" Margin="5,8,5,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Page.Resources>

Listing 2

You can also create your custom styles using Blend. To do this, open a blank project in Blend or open your existing project like the following screenshot:

Design in blend

Figure 3

In main Grid, take a Radio Button control.

Figure 4

Right click on the control and select Edit Template and under Edit Template option select Edit a Copy.

Figure 5

Then you can customize the style according to your need.

After everything has been set, the MainPage.xaml will look like this.

Figure 6

Adding Extra Pages

Now, create two blank pages named Page1.xaml and Page2.xaml. In Page1.xaml, change the code like below.

<Grid Background="LightBlue">
<TextBlock FontSize="36" Text="Home Page" Margin="12,17,0,17"/>
</Grid>

Listing 3

Similarly, in Page2.xaml change the code like below:

<Grid Background="SteelBlue">
<TextBlock FontSize="36" Text="Settings Page" Margin="12,17,0,17"/>
</Grid>

Listing 4

Handle events in code-behind MainPage.xaml.cs

The event handlers of the Split View’s Radio Buttons are as follows.

public MainPage()
{
this.InitializeComponent();
MyFrame.Navigate(typeof(Page1));
}
private void BackRadioButton_Click(object sender, RoutedEventArgs e)
{
if (MyFrame.CanGoBack)
{
MyFrame.GoBack();
}
}
private void HamburgerRadioButton_Click(object sender, RoutedEventArgs e)
{
if (!this.SplitView.IsPaneOpen)
{
this.SplitView.IsPaneOpen = true;
}
else
{
this.SplitView.IsPaneOpen = false;
}
}
private void HomeRadioButton_Click(object sender, RoutedEventArgs e)
{
MyFrame.Navigate(typeof(Page1));
}
private void SettingsRadioButton_Click(object sender, RoutedEventArgs e)
{

Listing: 5

Here, we’ve load the Page1 inside the Frame name “MyFrame” in MainPage.xaml. In MainPage.xaml.cs we have navigated to Page1 in Constructor. So, when the application starts, it will open the Page1 under MyFrame control. Back Button event handler checks whether the frame can go back. If so it goes back to the previous page otherwise not. And Hamburger Button checks if the SplitView is open or not. If not open, it will open it and if it is open, then it will close it. Home and Settings Button do the basis navigation service.

Running the Application

If you run the application in local machine, look like this.

Local Machine:

Figure 7

And if you click the Settings button, it will navigate to the Settings page.

Figure 8

Running is the Windows Phone:

Setting page

Figure 9

Improve it a bit for Windows Phone

Sometimes your design may not fit for both desktop and mobile devices. We have implement a Back Button in our Split View control, as desktop application do not have a Back Button integrated. But mobile devices have their own hardware or OS (Operating System) integrated Back Button. So, by determining device type we can customize our application UI (User Interface). You can do this, by simply install a NuGet package named “WindowsStateTriggers”.

Figure 10

Install it and now put the reference in your MainPage.xam, inside the Page tag.

<Page
x:Class="SplitView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:triggers="using:WindowsStateTriggers">

Listing 6

We have named the reference “triggers”. Now, we can use it in our Xaml code. To determine the device type, we have to use State Trigger like below.

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="phone">
<VisualState.StateTriggers>
<triggers:DeviceFamilyStateTrigger DeviceFamily="Mobile" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BackRadioButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Listing 7

In this State Triggers we have set Device Family to “Mobile” and set the value of Back Button to Collapsed. We have to put this inside the main Grid. This will hide the Back Button when the application will run in mobile devices. If we run the application, it will look like this.

Homepage

Figure 10

You can learn further about Windows State Triggers at Windows State Triggers.

Important things to notice

In SplitView control several things, you need to consider. First of all, is Display Mode. There are four types of Display Mode, Compact Inline, Compact Overlay, Inline and Overlay. If you use Compact Inline the Split View Content will move right unlike using Compact Overlay.

Menu

Figure 11

OpenPaneLength determines the width of the SplitView Pane’s width and CompactPaneLength determines the iconic view’s width. You can also set Pane Background Color. We have set here Dark Gray. Moreover, the Tag property of Radio Button is to set the icon of the Radio Button. You can choose it from Character Map, shown in Figure 2. Radio Buttons have a Tag set to a certain character. The new character set is Segoe MDL2 Assets, and the characters used are from that set.

Conclusion

Split View is a very useful control that introduced in Windows 10 Universal App. It will give you the power to do whatever you want. You can use it instead of Bottom App Bar, but still you can use it alongside. Hope that you get the minimum understanding of using Split View control and can get started using in your application. Happy coding!

Download the full source code at, http://1drv.ms/1N1k1kn.