Windows 10: Top 3 XAML/UI changes from 8.1 (Split View)

Continuing the countdown!

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

Last Post we learned about the new Visual Studio, and how to add in Relative Panels.

Okay so number two on my list is Split View. What is Split View you ask? Well, Split view is the Universal Windows Platform’s (UWP’s) “Hamburger” menus. There are four styles or DisplayModes that you can choose from:

  • Overlay – Panel Comes out over Content
  • Inline – Panel comes out an shifts content over
  • Compact Overlay – Behaves like Overlay, but when Panel retracts a portion of it (usually icons) is still visible
  • Compact Inline – Behaves like Inline, but when Panel retracts a portion of it (usually icons) is till visible

Here’s some more documentation on it from MSDN and here’s how you add it to your code.

Split View

The first part is to add a button that will trigger the panel to come into view.

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Name="SplitViewButton" Background="Transparent" Padding="0,-6" Margin="12" Click="SplitViewButton_Click">
        <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
     </Button>
     <TextBlock Style="{ThemeResource SubheaderTextBlockStyle}" Text="APP Title Goes Here"
                   RelativePanel.RightOf="SplitViewButton" />
</RelativePanel>

Next let’s add the Split View. In all Split views your items will exist in a SplitView.Pane xaml object.

<SplitView x:Name="MySplitView" DisplayMode="Inline"  PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}" OpenPaneLength="200"
                   RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.Below="SplitViewButton">
   <SplitView.Pane>
       <RelativePanel>
            <!-- Static Relativepanel, substitutes nested stackpanel or grid with rows/columns for this simple scenario -->
            <AppBarButton x:Name="BackgroundButton" Icon="Pictures"/>
                <TextBlock Text="Background"
                               RelativePanel.RightOf="BackgroundButton" />
                <AppBarButton x:Name="LockButton" Icon="SetLockScreen"
                                  RelativePanel.Below="BackgroundButton"/>
                <TextBlock Text="Lock screen"
                               RelativePanel.RightOf="LockButton" RelativePanel.Below="BackgroundButton"  />
                <AppBarButton x:Name="CameraButton" Icon="Camera"
                                  RelativePanel.Below="LockButton" />
                <TextBlock Text="Camera"
                               RelativePanel.RightOf="CameraButton" RelativePanel.Below="LockButton" />
                </RelativePanel>
    </SplitView.Pane>
</SplitView>

Now we need to move the Relative Panel we made before with the ScrollViewer into our SplitView, after the SplitView.Pane, so that they can be inline with each other. The code should look like this:

</SplitView.Pane>
     <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
         <RelativePanel Margin="50,38,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="300" Grid.Row="1">
             <Rectangle x:Name="Rectangle1" Fill="Red" Height="100" Width="100"/>
             <Rectangle x:Name="Rectangle2" Fill="Blue" Height="100" Width="100" RelativePanel.RightOf="Rectangle1" Margin="8,0,0,0"/>
             <Rectangle x:Name="Rectangle3" Fill="Green" Height="100" Width="100" RelativePanel.Below="Rectangle1" Margin="0,8,0,0"/>
             <Rectangle x:Name="Rectangle4" Fill="Yellow" Height="100" Width="100" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True" Margin="0,8,0,0"/>
          </RelativePanel>
     </ScrollViewer>
 </SplitView>
</RelativePanel>

The visual side of the code is now complete. To have it work we need to add the Button Functionality. In the Main.xaml.cs file add the following to the Class:

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

Now we Run the code again, and we can see the panel come out and retract.

PANEL OUT:

relaitvePanel3

PANEL IN:

relaitvePanel3-1

 

YAY!

The next post is the Third change out of the Three Most Important Changes – State Triggers

 

<h4>Happy Coding</h4>

-TheNappingKat


Leave a Reply

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