AppBar Tutorial [Metro Apps]
Posted: Mon Apr 29, 2013 2:06 pm
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:
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:
We’ll now create a Top App bar.
Next is
Add a control to your StackPanel.
Full code:
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
Debug.
As you can see when you right-click both App bars are displayed.
Full code:
To do this when we create the App bar change:
Alter
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.
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
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
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. <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>
We’ll now create a Top App bar.
Code: Select all
The first line of code we added was<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>
Code: Select all
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. <Page.TopAppBar>
Next is
Code: Select all
Fairly straightforward. We just created the Appbar control. <AppBar>
Code: Select all
The grid is a flexible area that has rows and columns and holds child elements. <Grid>
Code: Select all
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). <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
Add a control to your StackPanel.
Code: Select all
I've just created a button, set its name to btnHello and the text of the button to “Hello”. <Button x:Name="btnHello" Content="Hello" />
Full code:
Code: Select all
Press F5 to debug the app and then bring up the App bar. <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>
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
This is the exact same as the Top App bar except the first line is <Page.BottomAppBar>
<AppBar>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button x:Name="btnBye" Content="Bye" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Code: Select all
And the button has a different name and different content. <Page.BottomAppBar>
Debug.
As you can see when you right-click both App bars are displayed.
Full code:
Code: Select all
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. <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>
To do this when we create the App bar change:
Code: Select all
To<AppBar>
Code: Select all
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. <AppBar IsOpen="True">
Alter
Code: Select all
To<AppBar>
Code: Select all
All we’re doing is setting the AppBar’s IsSticky property to True. <AppBar IsSticky="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.