Windows 10 Application Bar

Create new Windows 10 project

The App bar is designed to expose application commands to the user. There are two types of app bar you can use.

• TopAppBar
• BottomAppBar

You can put any control that you like into the app bar.

<Page.TopAppBar>
    <AppBar>
        <StackPanel Orientation="Horizontal">
            <AppBarButton Name="Button3" Icon="Add" Label="Add"></AppBarButton>
            <AppBarButton Name="Button4" Icon="Remove" Label="Remove"></AppBarButton>
        </StackPanel>
    </AppBar>
</Page.TopAppBar>

Application Bar for Bottom

<Page.BottomAppBar>
    <AppBar IsOpen="True" IsSticky="True">
        <StackPanel Orientation="Horizontal">
            <AppBarButton Name="Button1" Icon="Add" Label="Add"></AppBarButton>
            <AppBarButton Name="Button2" Icon="Remove" Label="Remove"></AppBarButton>
        </StackPanel>
    </AppBar>
</Page.BottomAppBar

Here's the complete source code,

<Page x:Class="AppBarDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AppBarDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar>
            <StackPanel Orientation="Horizontal">
                <AppBarButton Name="Button3" Icon="Add" Label="Add"></AppBarButton>
                <AppBarButton Name="Button4" Icon="Remove" Label="Remove"></AppBarButton>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <AppBar IsOpen="True" IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <AppBarButton Name="Button1" Icon="Add" Label="Add"></AppBarButton>
                <AppBarButton Name="Button2" Icon="Remove" Label="Remove"></AppBarButton>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> </Grid>
</Page>

The app bar should be outside the grid control.

You can minimize and maximize the app bar by default using the IsOpen="True" IsSticky="True".

To minimize the app bar set IsOpen property to false, by default it will be false.

You can create the App Bar using C# code also using the following code:

AppBar myAppBar = new AppBar();
myAppBar.IsOpen = true;
var content = new StackPanel { Orientation = Orientation.Horizontal };
content.Children.Add(new Button { Content = "Button1"});
content.Children.Add(new Button { Content = "Button2" });
myAppBar.Content = content;
this.BottomAppBar = myAppBar;

Application Bar are placed in the following screen in only Bottom or Top and both.

If you are developing app for Windows 10 mobile place the app bar in bottom to find out easily.



Now run the app and see the following output,