AppBar Tutorial [Metro Apps]

Visual Basic tutorials for UWP apps.
1 post Page 1 of 1
Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

AppBar Tutorial [Metro Apps]
smashapps
Hello, in this tutorial I am going to show you how to create an App bar for Windows Store apps.

The App bar is the bar you see when you right-click, Press Control + Z or swipe the edge of the screen and the bar resides on the top and bottom of the screen, top or the bottom.

Required Knowledge:
  • Know how to create a new project
    Basic understanding of XAML
    Know how to navigate around the Visual Studio environment
I was going to do this tutorial as my first tutorial but I thought I would show people how to style controls first.

Create a new project in Visual Studio and then open the page you’re adding the App bar to. If you have a Blank page you should see the following XAML code:
Code: Select all
<Page
    x:Class="Appbar_tutorial.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Appbar_tutorial"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <!-- We're adding our App bar here -->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>
Take note of where I have added a comment. This is important, if you add your App bar else where you will likely have errors and the page will be unhappy with you.

We’ll now create a Top App bar.
Code: Select all
<Page
    x:Class="Appbar_tutorial.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Appbar_tutorial"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>
The first line of code we added was
Code: Select all
<Page.TopAppBar>
This is the TopAppBar property, when the Appbar is added to this the App bar will be displayed on the top of the screen. Microsoft suggests using the TopAppBar for navigation and the bottom bar for commands and tools though it is entirely up to you what you add to your App bars.

Next is
Code: Select all
<AppBar>
Fairly straightforward. We just created the Appbar control.
Code: Select all
<Grid>
The grid is a flexible area that has rows and columns and holds child elements.
Code: Select all
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
The StackPanel arranges the child elements in a line so they can orientated horizontally or vertically. Everything we add in this particular StackPanel will be on the left and horizontal (flat instead of up and down).

Add a control to your StackPanel.
Code: Select all
<Button x:Name="btnHello" Content="Hello" />
I've just created a button, set its name to btnHello and the text of the button to “Hello”.

Full code:
Code: Select all
<Page
    x:Class="Appbar_tutorial.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Appbar_tutorial"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnHello" Content="Hello" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>
Press F5 to debug the app and then bring up the App bar.

Image


When you right-click or do the actions mentioned above the Top App bar is displayed like shown above. Easy right?

Let’s create a Bottom App bar now
Code: Select all
<Page.BottomAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnBye" Content="Bye" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
This is the exact same as the Top App bar except the first line is
Code: Select all
<Page.BottomAppBar>
And the button has a different name and different content.

Debug.

Image


As you can see when you right-click both App bars are displayed.

Full code:
Code: Select all
<Page
    x:Class="Appbar_tutorial.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Appbar_tutorial"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnHello" Content="Hello" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnBye" Content="Bye" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>
We will now make our Top App bar shown when we first run the app. When you open the app the App bar will be shown, but it will close when you make a gesture.

To do this when we create the App bar change:
Code: Select all
<AppBar>
To
Code: Select all
<AppBar IsOpen="True">
We now want our App bar to be sticky. When an App bar is sticky it will stay open when you make gestures, to close it you have to right-click again or Control + Z or swipe the top or bottom edge of the screen.

Alter
Code: Select all
<AppBar>
To
Code: Select all
<AppBar IsSticky="True">
All we’re doing is setting the AppBar’s IsSticky property to True.

This is it for my App bar tutorial if you need any help feel free to ask questions and if you've liked it remember to +rep, thanks.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
1 post Page 1 of 1
Return to “Visual Basic”