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,

<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>
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"
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. 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;
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

 

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been 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, Microsoft MVP and Telerik 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. So the air traffic recordings were faked too I guess

  2. Dale says:

    Image Source = “Assets/Earth.jpg” with opening and closing brackets!

  3. Dale says:

    I have corrected the xaml with respect to the Earth image source

  4. Dale says:

    Correction in xaml :

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

Leave a Reply

Your email address will not be published.