Action bars and app bars (Android versus Windows Store apps)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Here's how to move from the action bar in Android apps to the app bar in Windows Store apps for Windows 8.

In Android apps, you can use the action bar: a set of bars at the top of an activity (or both the top and bottom by using a split action bar), which contain controls that users can interact with to do context-sensitive actions or to navigate among activities.

Windows Store apps use the app bar, which serves much the same function as the Android action bar. App bars can be put at the top or bottom of a page or both. App bars are hidden by default and can be shown with simple user actions such as swiping from the top or bottom edge, right-clicking a mouse, or by pressing Windows+Z. You can also show or hide app bars through code.

Let's compare action bars in Android to app bars in Windows 8. Then you'll learn how to build a sample Windows Store app that uses the app bar.

Comparing action bar coding steps for Android to app bar coding steps for Windows Store apps

If you have been using the action bar in Android apps, you will find that similar functionality is provided by the app bar control in Windows Store apps. Here is how the process compares between platforms.

Steps	Android	Windows 8
Create the action bar or app bar and add necessary controls.	Set the project to use API level 11 (Android 3.0 Honeycomb) or higher as its minimum required SDK or target SDK. (To use a split action bar, use API level 14 or higher.) Then call the activity's onCreateOptionsMenu method. This method calls a menu resource that you've defined to get the list of menu items.	Use the app bar control and add various controls (such as buttons, check boxes, and radio buttons) to the app bar. For more info, see Guidelines for command bars, Quickstart: adding app bars andQuickstart: Adding controls and handling events.
Optional: Define the look and feel of the action bar or app bar.	Include style references that you've defined, such as android:actionBarStyle and android:actionBarSplitStyle, in your activity's theme.	Set the styles of the layout panel used in the app bar. Various styling properties such as Background may be used to set the look and feel. See Quickstart: Defining layouts.
Optional: Define the look and feel of the menu items in the action bar or controls in the app bar.	Include style references that you've defined, such as android:actionButtonStyle, android:actionMenuTextColor, and android:actionMenuTextAppearance, in your activity's theme.	Various properties such as Foreground, BorderThickness and FontSize may be used for custom look and feel. See Quickstart: styling controls and Quickstart: Styling app bar buttons.
Handle events in the action bar or app bar.	Declare the android:onClick value for the menu item in the menu resource file. Define the corresponding method in the activity's code file.	Implement an event handler with the void method(object sender, RoutedEventArgs e) signature in the code-behind file and set that method as the Click property of the corresponding control. For handling control events, see Quickstart: Adding controls and handling events.

 

Top

App bar example app

Here is an example that shows how to build a Windows Store app that uses the app bar.

Note  Windows 8.1 updates the way you define app bars. Please see the blog posting What's New for the AppBar in Windows 8.1 for more details.

 

1. Create the app: in this example, we are going to create our app using the C# Blank App template.

   1. Open Microsoft Visual Studio, and create a new Microsoft Visual C# > Windows App > Blank App (XAML) project.

   2. Open the MainPage.xaml file from the Solution Explorer window. If the XAML view is not already showing, click on the horizontal split button to show it.

   3. In the MainPage.xaml file, between the opening <Grid ...> and closing </Grid> elements, add this Extensible Application Markup Language (XAML) code.

      // Windows 8
      <Grid.RowDefinitions>
          <RowDefinition Height="70"/>
          <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <TextBlock Text="App bar sample" Style="{StaticResource PageHeaderTextStyle}" Grid.Row="0" Margin="20,0,0,10"/>
      
      // Windows 8.1
      <Grid.RowDefinitions>
              <RowDefinition Height="70"/>
              <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
      <TextBlock Text="Appbar Sample" Style="{StaticResource HeaderTextBlockStyle}"  Grid.Row="0" Margin="20,0,0,10"/>
      

2. Add an app bar control to the page, and then add Button controls to the app bar.

   1. In the MainPage.xaml file, just before the closing </Grid> and closing </Page> elements, add the following code.

      // Windows 8
      <Page.BottomAppBar>
          <AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="Gray">
              <Grid>
                  <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                      <Button Style="{StaticResource EditAppBarButtonStyle}" />
                      <Button Style="{StaticResource RemoveAppBarButtonStyle}" />
                      <Button Style="{StaticResource AddAppBarButtonStyle}" />
                  </StackPanel>
              </Grid>
          </AppBar>
      </Page.BottomAppBar>
      
      // Windows 8.1 
       <Page.BottomAppBar>
              <CommandBar>
                  <CommandBar.PrimaryCommands>
                      <AppBarButton Icon="Edit" Label="Edit"/>
                      <AppBarButton Icon="Remove" Label="Remove"/>
                      <AppBarButton Icon="Add" Label="Add" />
                  </CommandBar.PrimaryCommands>
              </CommandBar>
          </Page.BottomAppBar>
      

   2. If developing for Windows 8, you will need to open Common > StandardStyles.xaml. Search for "EditAppBarButtonStyle", "RemoveAppBarButtonStyle", or "AddAppBarButtonStyle" and uncomment the section in which they are defined. Remove <!-- and --> surrounding the section in which they are defined. This step is not required for Windows 8.1 apps.

   3. Click Debug > Start Debugging or press F5 to run the app. To show the app bar, swipe from the top or bottom edge of the screen, right-click the mouse, or press Windows+Z.

3. Handle app bar button events: in Visual Studio, stop the app by clicking Debug > Stop Debugging (or press Shift+F5).

   1. In MainPage.xaml, update

      // Windows 8
      <Button Style="{StaticResource EditAppBarButtonStyle}" />
      // Windows 8.1
      <AppBarButton Icon="Edit" Label="Edit"/>
      

      with the following XAML code

      // Windows 8
      <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click" />
      // Windows 8.1
      <AppBarButton Icon="Edit" Label="Edit" Click="EditButton_Click" />
      

      This specifies that EditButton_Click event handler will be called when the app bar Edit button is clicked.

   2. Add the following code at the top of the MainPage.xaml.cs file: using Windows.UI.Popups;.

   3. Add the following code just before the closing bracket of the MainPage class definition.

      private async void EditButton_Click(object sender, RoutedEventArgs e)
      {
          MessageDialog dlg = new MessageDialog("Edit clicked");
          await dlg.ShowAsync();
      }
      

   4. Click Debug > Start Debugging or press F5 to run the app again. Show the app bar again, and then click the Edit button. The message "Edit clicked" appears.

Top

Related topics

Quickstart: adding app bars

Quickstart: Styling app bar buttons

Quickstart: Adding controls and handling events

What's New for the AppBar in Windows 8.1