Introduction

The App bar is designed to expose application commands to the user. There are two types of app bar you can use.
You can put any control that you like in the app bar.
  1. <Page.TopAppBar>
  2. <AppBar>
  3. <StackPanel Orientation="Horizontal">
  4. <AppBarButton Name="Button3" Icon="Add" Label="Add"></AppBarButton>
  5. <AppBarButton Name="Button4" Icon="Remove" Label="Remove"></AppBarButton>
  6. </StackPanel>
  7. </AppBar>
  8. </Page.TopAppBar>
Application Bar for Bottom
  1. <Page.BottomAppBar>
  2. <AppBar IsOpen="True" IsSticky="True">
  3. <StackPanel Orientation="Horizontal">
  4. <AppBarButton Name="Button1" Icon="Add" Label="Add"></AppBarButton>
  5. <AppBarButton Name="Button2" Icon="Remove" Label="Remove"></AppBarButton>
  6. </StackPanel>
  7. </AppBar>
  8. </Page.BottomAppBar
Here's the complete source code,
  1. <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">
  2. <Page.TopAppBar>
  3. <AppBar>
  4. <StackPanel Orientation="Horizontal">
  5. <AppBarButton Name="Button3" Icon="Add" Label="Add"></AppBarButton>
  6. <AppBarButton Name="Button4" Icon="Remove" Label="Remove"></AppBarButton>
  7. </StackPanel>
  8. </AppBar>
  9. </Page.TopAppBar>
  10. <Page.BottomAppBar>
  11. <AppBar IsOpen="True" IsSticky="True">
  12. <StackPanel Orientation="Horizontal">
  13. <AppBarButton Name="Button1" Icon="Add" Label="Add"></AppBarButton>
  14. <AppBarButton Name="Button2" Icon="Remove" Label="Remove"></AppBarButton>
  15. </StackPanel>
  16. </AppBar>
  17. </Page.BottomAppBar>
  18. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> </Grid>
  19. </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:
  1. AppBar myAppBar = new AppBar();
  2. myAppBar.IsOpen = true;
  3. var content = new StackPanel { OrientationOrientation = Orientation.Horizontal };
  4. content.Children.Add(new Button { Content = "Button1"});
  5. content.Children.Add(new Button { Content = "Button2" });
  6. myAppBar.Content = content;
  7. this.BottomAppBar = myAppBar;
Application Bar is 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.
view
Now run the app and see the following output,
run the app
run

Summary

In this article, we learned about Windows 10 application bar.