Windows Phone 8 – Dynamic AppBars for Conference Buddy

Introduction

Welcome back again to the series on “Conference Buddy” an app being written in Windows Phone 8 as well as Windows 8, in this blog post we will continue our journey with the Windows Phone 8 version. Let’s take a look at what we have covered so far and what is coming up:

• Speech Recognition – Is a powerful way for your end-users to navigate and interact with your app using their voice.
• MultiResolutionImage –Makes it easy for Windows Phone 8 developers to support images in the various screen resolutions supported in Windows Phone 8.
• DataForm (Part 1) – Was discussed earlier and this new component allows you to automatically generate the UI for your input forms, with support for validation and custom layouts.
• DataForm (Part 2) – We expanded on what we learned earlier about the DataForm and show you how to persist data to isolated storage using our control with the very popular Json.net.
• Dynamic AppBars for Conference Buddy – In this blog post, we will discuss how to implement dynamic Application Bars as your user navigates between pages.

Initial Setup

Just like last time, I’m going to assume your development environment is setup and RadControls for Windows Phone 8 is installed. If you don’t have them yet, you can download them from your account. The completed source code for the section can be found here.

Dynamic AppBars for Conference Buddy in Windows Phone 8.

We can see from the contact details page that we have been working with in the past two parts that our application will contain several pages of data as shown in Figure 1 (click to enlarge it).

Figure 1: Contact Collect Detail Screen Design

This part of the application has four “screens” or PivotItems of data. If we take a look at the application bar (in green at the bottom), then we will quickly notice the following:

• Contact Details – Contains a cancel and next button.
• Interest – Contains a previous, cancel and next button.
• Subscriptions – Contains the same thing as interest.
• Request Follow Up – Contains previous, cancel, save and close and save and add new.

We will quickly see that our standard application bar will not work and that we will need to dynamically load a new application bar as the user swipes to the next page.

Taking a look first at MainPage.xaml

At this point, we will need to take our existing RadDataForm and place it into the Pivot control. An example of how to do this is shown below.

   1: <!--LayoutRoot is the root grid where all page content is placed-->

   2: <Grid x:Name="LayoutRoot" Background="Transparent">

   3: <phone:Pivot x:Name="pvt" Title="CONTACT COLLECTOR" SelectionChanged="pvt_SelectionChanged_1">

   4: <!--Pivot item one-->

   5: <phone:PivotItem Header="contact details">

   6: <ScrollViewer>

   7: <telerikInput:RadDataForm

   8: EditorCreationMode="CreateByDefault"

   9: DataFieldCreated="radDataForm_DataFieldCreated_1"

  10: x:Name="radDataForm"/>

  11: </ScrollViewer>

  12: </phone:PivotItem>

  13:  

  14: <!--Pivot item two-->

  15: <phone:PivotItem Header="interest">

  16: <ScrollViewer>

  17: 

  18: </ScrollViewer>

  19: </phone:PivotItem>

  20:  

  21: </phone:Pivot>

  22: </Grid>

We first make use of the Pivot Control and give it a Name, a Title and a SelectionChanged event, which we will tie in later. Then we declare our two PivotItems (contact details and interest). Note: We can add in subscriptions and request, but I just want you to understand the concept.

From here, we will make use of the PhoneApplicationPage.Resources and declare an appbar for both the Contact Details and Interest and assign them a name. You may put this at the top of the page before the Grid.

   1: <phone:PhoneApplicationPage.Resources>

   2: <shell:ApplicationBar x:Key="appbarContactDetails">

   3: <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/cancel.png" Text="Cancel"/>

   4: <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/next.png" Text="Next"/>

   5: </shell:ApplicationBar>

   6:  

   7: <shell:ApplicationBar x:Key="appbarInterest">

   8: <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/previous.png" Text="Cancel"/>

   9: <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/cancel.png" Text="Cancel"/>

  10: <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/next.png" Text="Next"/>

  11: 

  12: <shell:ApplicationBar.MenuItems>

  13: <shell:ApplicationBarIconButton Text="Options" />

  14: <shell:ApplicationBarIconButton Text="About" /> 

  15: </shell:ApplicationBar.MenuItems>

  16: </shell:ApplicationBar>

  17: </phone:PhoneApplicationPage.Resources>

Note: If you don’t have the images, then simply download my project or add them through Blend. From here we can see the declarations for both ApplicationBars that will be shown dynamically as the user navigates through the different screens. I’ve added a MenuItem to the second one just to show you that you are not limited to IconButtons.

Switching back to our MainPage.xaml.cs File.

The only changes that I’m going to make it here is adding in the click event handlers for the “SelectionChanged” event on the Pivot.

   1: public void pvt_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

   2: {

   3: switch (pvt.SelectedIndex)

   4:     {

   5: case 0:

   6:             ApplicationBar = Resources["appbarContactDetails"] as ApplicationBar;

   7: break;

   8: case 1:

   9:             ApplicationBar = Resources["appbarInterest"] as ApplicationBar;

  10: break;

  11:     }

  12: }

We can see very quickly here that as the currently selected Pivotitem changes that this event will fire and check to see which index we are on and display the appropriate ApplicationBar.

We can now see this in action with the video integrated below:

Conclusion

In this article, we took a look at adding application bars dynamically in your Windows Phone 8 application. This is crucial to our Conference Buddy application as it is used in more than just the Contact Details page, but several others. You may also need this functionality in your own Windows Phone 8 app and I hope this helped show how easy it is to implement.

As always, the source code to this project is available here and if you have any questions, then just let me know.

I know I remind you every single post, but the Nokia premium developer program allows you to get RadControls for Windows Phone for free and they have a lot of additional resources to help you get started.

-Michael Crump (@mbcrump)