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. 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,

<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar1"
            Padding="10,0,10,0"
            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,

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>

<StackPanel x:Name="LeftPanel"
            Orientation="Horizontal"
            Grid.Column="0"
            HorizontalAlignment="Left">
    <Button x:Name="Save"
            Style="{StaticResource SaveAppBarButtonStyle}"
            Tag="Save"
            Click="Save_Click"/>
    <Button x:Name="Cancel"
            Style="{StaticResource DeleteAppBarButtonStyle}"
            Tag="Delete" 
            Click="Cancel_Click"/>
</StackPanel>

Notice that the Styles are set using the common resources found in Common/StandardStyles.xaml. 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;
    StoreData();
    ClearFields();
}

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 )
{
   ClearFields(); 
}

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