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>

No comments:

Post a Comment

Note: only a member of this blog may post a comment.

New Post

TSQL-Working With Date And Time

Here you will learn how to work with the date and time in SQL Server. select  GETDATE() as dateNow This returns the current date and time. s...