Windows 8: Adding An AppBar to Conference Buddy

In an earlier postings I described the project that I’ll be creating with Phil Japikse and Michael Crump, code-named Conference Buddy.  In the most recent posting, we looked at a wire-frame that illustrated some of the data we’ll be collecting. DataCollection The user fills in the fields, but then how does the user indicate Save or Cancel? 

It would be tempting to add buttons right beneath the data entry form, but the design guidelines call for keeping Chrome, including such buttons, out of sight.

Saving Data Entry With the App Bar

As you’ve guessed, the answer is to add an AppBar to the application.   We can take advantage of some of the button styles described in Common/StandardStyles.xaml to create the two buttons we need.

Creating an AppBar is extremely simple. We declare the AppBar at the top of MainPage’s XAML,

<AppBar x:Name="BottomAppBar1"
AutomationProperties.Name="Bottom App Bar">

AppBars can be made to appear at the top of the page, at the bottom or both. Ours will appear at the bottom.

One of the most common ways to populate an AppBar is with a Grid, divided into two equal columns,

<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
This will allow us to add controls to either the left or right side of the AppBar.  In our case, we’ll add a StackPanel to the left side (Grid column 0) and within that StackPanel we’ll place our two buttons,
<StackPanel x:Name="LeftPanel"
<Button x:Name="Save"
Style="{StaticResource SaveAppBarButtonStyle}"
<Button x:Name="Cancel"
Style="{StaticResource DeleteAppBarButtonStyle}"

Notice that the Styles are set using the common resources found in Common/StandardStyles.xaml. GatheringData Note that some sections of StandardStyles.xaml are commented out. Simply open the file in Visual Studio, find the Button Styles you need and uncomment them.

(Click on the image to see full size)

The buttons we’ve added are just common household buttons; you are free to declare event handlers, as we have done here.  For simplicity we’ll implement the event handlers in the code behind,

private void Save_Click( object sender, RoutedEventArgs e )
Customer cust = new Customer();
cust.Company = Company.Text;
cust.Email = Email.Text;
cust.FirstName = FirstName.Text;
cust.LastName = LastName.Text;
cust.PhoneNumber = PhoneNumber.Text;
cust.Title = Title.Text;

private void StoreData()
throw new NotImplementedException();

private void ClearFields()
Company.Text = String.Empty;
Email.Text = String.Empty;
FirstName.Text = String.Empty;
LastName.Text = String.Empty;
PhoneNumber.Text = String.Empty;
Title.Text = String.Empty;
public void Cancel_Click( object sender, RoutedEventArgs e )

For now, we’ve just stubbed out the method that will actually store the data.  Key, however, is that the AppBar will appear when you swipe up from the bottom or down from the top (or press Windows-Z), and will let you Save or Cancel.


Download the source code


About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Mini-Tutorial, Patterns & Skills, Windows 8 and tagged . Bookmark the permalink.

5 Responses to Windows 8: Adding An AppBar to Conference Buddy

  1. Pingback: Windows Store Developer Links – 2012-12-13 | Dan Rigby

Comments are closed.