How to create Hamburger Application

In this tutorial I will show how to create Hamburger application  user interface: using row, stackpanel , splitview and grid.

Hamburger Application user interface:

Bellow shows the full code that i used to create this application within the mainpage.xaml

Mainpage.xaml 

<Page

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:RemoveUnwantedFilesfromMp3Folders"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:RemoveUnwantedFilesfromMp3Folders.Models"
    xmlns:Universal="using:Microsoft.AdMediator.Universal"
    x:Class="RemoveUnwantedFilesfromMp3Folders.MainPage"
    mc:Ignorable="d">
    <ScrollViewer ViewChanged="ScrollViewer_ViewChanged">
        <Grid Background="White" BorderBrush="Aqua">

            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="90"/>
            </Grid.RowDefinitions>
            <StackPanel>
                <Button x:Name="HamburgerButton"
                  FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                  FontSize="36" Click="HamburgerButton_Click"/>
            </StackPanel>
            <SplitView x:Name="MySplitView" Grid.Row="1"
             DisplayMode="CompactOverlay"
             OpenPaneLength="200"
           CompactPaneLength="56"
             HorizontalAlignment="Left">
                <SplitView.Pane>
                    <ListBox SelectionMode="Single"
             x:Name="LoadUpPicture"
               SelectionChanged="LoadUpPicture_SelectionChanged">
                        <ListBoxItem x:Name="RandomlyPictureLoader" IsSelected="false" >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontFamily="Segoe MDL2 Assets"
                                  FontSize="24" Text="&#xE72D;" />
                                <TextBlock x:Name="RandomPicloaderTextBlock"
                               Text="PictureLoader" FontSize="24"Margin="20,0,0,0"/>
                            </StackPanel>
                        </ListBoxItem>
                        <ListBoxItem x:Name="Clear" IsTapEnabled="True" >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontFamily="Segoe MDL2 Assets"
                                 FontSize="24" Text="&#xE814;" Foreground="Red"/>
                             <TextBlock x:Name="ClearTextBlock" Text="Clear"                                                                              FontSize="24"Margin="20,0,0,0"/>
                            </StackPanel>
                        </ListBoxItem>
                    </ListBox>
                </SplitView.Pane>
                <SplitView.Content>
                    <StackPanel  Orientation="Vertical" Margin="10">
                   <GridView  x:Name="SongGridView" ItemsSource="{x:Bind obserfiles}"
                             IsItemClickEnabled="True" ItemClick="SongGridView_ItemClick" >
                     <GridView.ItemTemplate>
                                <DataTemplate x:DataType="data:MyFile">
                                    <Grid>
                                        <Image x:Name="AlbumArtImage"  Stretch="Uniform"
                                          Height="100"
                                          Width="100"
                                          Source="{x:Bind Images}"/>
                                    </Grid>

                                </DataTemplate>
                            </GridView.ItemTemplate>

                        </GridView>

                        <StackPanel Orientation="Vertical" >

                            <TextBlock x:Name="dateTakenTextBlock"/>
                            <TextBlock x:Name="cameralManufactureTextBlock"/>
                            <TextBlock x:Name="cameralModelTextBlock"/>
                            <TextBlock x:Name="pictureNameTextBlock"/>

                        </StackPanel>
                    </StackPanel>
                </SplitView.Content>
            </SplitView>

            <!-- </StackPanel>-->
           <StackPanel Grid.Column="1" Margin="60,10,10,0">
            <ProgressBar x:Name ="MyProgressBar"
            Minimum="0"
            Maximum="100"
              Value="100"
             Height="20"
             Foreground="Blue"/>
                <TextBlock x:Name="InstructionTextBlock"
             Text="" Foreground="Blue"
             HorizontalAlignment="Center"/>

             <MediaElement x:Name="MyMediaElement"
              AutoPlay="True"/>

            </StackPanel>

            <Grid Grid.Row="1">
                <ProgressRing x:Name="startupProgresssRing"
              HorizontalAlignment="Center"
             VerticalAlignment="Center" Width="100"
              Height="100" Foreground="Gray"/>

            </Grid>

            <RelativePanel >
                <TextBlock x:Name="Developer"  RelativePanel.AlignBottomWithPanel="True"/>
            </RelativePanel>
           <!-- way to add microsoft advertisement-->
            <Universal:AdMediatorControl x:Name="AdMediator_7EFCE1"
                HorizontalAlignment="Left"
                Height="90"
                Id="AdMediator-Id-BBC8CABD-4FAB-41B6-A901-0BA519CA5929"
                Grid.Row="2"
                VerticalAlignment="Top"
                Width="728"/>
                <!--<Button Content="copyfile" Name="CopyUnwantedFiles"                                                              Click="CopyUnwantedFiles_Click"></Button>-->

        </Grid>
    </ScrollViewer>

</Page>