Working With Split View Control In Universal Windows Application

Before reading this article, please go through the following article to get some knowledge about Windows 10 UWP application.

• Introduction to Universal Windows Platform (UWP)

A split view control is an expandable panel that contains the content area. Therefore, split view is always visible. A split view can be added to the both sides, right side as well as left side. Split view contains four-panel modes.

• Overlay
• Inline
• CompactOverlay
• CompactInline

The following are some of the requirements needed to complete this article.

• Visual Studio 2015 Update 3
• Windows 10 SDK

If you don't have a Visual Studio and Windows 10 SDK, download those from here.

Let’s get started.

Open Visual Studio 2015.

Create a new blank Windows app (File >> New >> Project >> select Visual C# >> Windows >> Universal), provide a suitable name for your Windows application, and click OK.

 

 

 

It takes some time to create a Windows application. Once the project creation is successful, you will be redirected to App.Xaml.cs.

 

Go ahead and open MainPage.Xaml from Solution Explorer. Now, switch code page into the designer page.

The general syntax for adding split view is given below.

<SplitView>
        <SplitView.Pane>
              //Add your menu here
        </SplitView.Pane>
        <SplitView.Content>
            //Add your content here
        </SplitView.Content>
    </SplitView>

Now, add the following code to create a split view. Add the following code under the Grid tag.

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False"
               CompactPaneLength="50" OpenPaneLength="250">
        <SplitView.Pane>
            <StackPanel Background="Bisque">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
                    Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="C# Corner" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
                        Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Contact" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
                        Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Back" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </SplitView.Content>
    </SplitView>

 

Once the designer completes, add the code behind for making an application fully functional.

Open MainPage.Xaml.cs and add the following code in Hamburger button method, as shown below.

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
       {
          MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
       }

Congrats ! Finally, we have created a simple application using Split View component. Click F5 button to run the application. Here, I am deploying the app on Local Machine.

 

Finally, the output is projected, as shown below.

 

 

 

 

Summary

 

In this article, we learned about creating and working with split view in Windows 10 Universal applications.