DevStudent

If you are using a flat navigation system for your windows store app then the best way to provide navigation to user is through navigation bar. Navigation bar is an app bar which is present at the top the app with multiple tabs. Every tab is used to navigate to a specific page from the present page where user is present.

XAML code to create a navigation bar is as follows:

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="SampleApp1.Favorites"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp1"
    xmlns:common="using:SampleApp1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <common:LayoutAwarePage.TopAppBar>
        <AppBar   Height="140">
            <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal" >
                <Button x:Name="AppBtnProfile" 
     Style="{StaticResource PreviewLinkAppBarButtonStyle}" Click="AppBtnProfile_Click"/>

                <Button x:Name="AppBtnFriends" 
     Style="{StaticResource PhonebookAppBarButtonStyle}" Click="AppBtnFriends_Click"/>

                <Button x:Name="AppBtnFavorites" 
     Style="{StaticResource SolidStarAppBarButtonStyle}" Click="AppBtnFavorites_Click"/>

                <Button x:Name="AppBtnChats" 
     Style="{StaticResource CommentAppBarButtonStyle}" Click="AppBtnChats_Click"/>
                <Button x:Name="AppBtnNotifications" 
     Style="{StaticResource AddFriendAppBarButtonStyle}" Click="AppBtnChats_Click"/>

            </StackPanel>
        </AppBar>
    </common:LayoutAwarePage.TopAppBar>
    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- Back button and page title -->
        <Grid Style="{StaticResource AppHeader}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="140"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Connect" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>
        <Image x:Name="ImgLogo" Grid.Row="2" Grid.Column="1" Width="200" Height="200"  Source="Assets/ConnectLogo.png" HorizontalAlignment="Center" />
        <!--<Button x:Name="BtnNavigate" Grid.Row="2" Content="Navigate" Background="Aqua"  Grid.Column="1" Width="200" Height="200"  HorizontalAlignment="Center" Click="BtnNavigate_Click" />-->
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>
                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>


    </Grid>

</common:LayoutAwarePage>