Start off by creating a new Visual Studio Project and naming it ApplicationBarSample.

Next, organize the project for easier readability by creating a folder for the icon images you'll use in the ApplicationBarSample project. Right-click the project name in the Solution Explorer, select Add

Next, copy the icon images to the newly created folder within your project. Using Windows Explorer, copy the image files you need from there to the Images folder of your project. In the example that follows, you will be using the images located in the dark subfolder of the icon archive. Make sure to copy the *.png files only, without any folder structure.

Now the images are copied, but Visual Studio still needs to make them a part of the project. Right-click Solution Explorer, then select Add

Finally, you need to instruct Visual Studio to include new images in every build of an application. For each image, right-click the image in the Solution Explorer and choose Properties (you can also press F4 to bring up the Properties dialog). In the Properties dialog box, set the Build action to Content and set the Copy to Output property to Copy Always, as shown in Figure 7-3.

In Solution Explorer, right-click the App.xaml file for the ApplicationBarSample project and select Open. This action causes Visual Studio to display the XAML code for the application's resource and configuration page.

Next, paste the complete XAML definition of the Application Bar with three icons and two menu items into the Application Resources section. Locate the <Application.Resources> section of the App.xaml and paste the following code within that section. Note that setting the Text property for each control is required.

<shell:ApplicationBar x:Key="GlobalAppMenuBar" Opacity="1" IsVisible="True"
IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png"
Text="add">
                </shell:ApplicationBarIconButton>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
Text="save">
                </shell:ApplicationBarIconButton>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"
Text="delete">
                </shell:ApplicationBarIconButton>
            </shell:ApplicationBar.Buttons>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
                <shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

With the global Application Bar defined, you are ready to add it to the pages within your application. Open MainPage.xaml and add the following attribute within the <phone:PhoneApplicationPage> node:

ApplicationBar="{StaticResource GlobalAppMenuBar}"

Press F5 to run the application. You should see an Application Bar identical to the one shown in Figure 7-2. Note that if you see grey "x" symbols instead of expected Application Bar icons, the application can't locate the image files to use inside its Application Bar. Make sure the names and paths to those files are spelled correctly and that the Build action of the images is set to Content and the Copy to Output property is set to Copy Always, as shown in Figure 7-3.

n Solution Explorer, right-click the MainPage.xaml and select Open. This action causes Visual Studio to display the XAML code for the application's main page. Make sure you have removed the global Application Bar reference from the MainPage.xaml, as mentioned at the end of the previous section.

You must define a PhoneNavigation element within XAML before adding a local Application Bar. To accomplish that, inside the phone:PhoneApplicationPage, add a phone:PhoneApplicationPage.ApplicationBar element. Notice how this element is automatically available for selection via Visual Studio IntelliSense once you start typing the first few characters—an excellent way to ensure that there are no spelling errors.

<phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

It is now time to add the Application Bar XAML to the page. Inside the phone:PhoneApplicationPage.ApplicationBar element, add a shell:ApplicationBar element. Set the IsVisible and the IsMenuEnabled properties to True, and set the Opacity property to 1, like so:

<shell:ApplicationBar Opacity="1" IsVisible="True" IsMenuEnabled="True">
    </shell:ApplicationBar>

Now that you have defined an Application Bar in XAML, you are ready to create buttons for it. The buttons you add are a part of the shell:ApplicationBar.Buttons element, so go ahead and add that element now inside the shell:ApplicationBar element.

<shell:ApplicationBar.Buttons
</shell:ApplicationBar.Buttons>

Inside the shell:ApplicationBar element, you will create three shell:ApplicationBarIconButton XAML elements to add three button definitions: one each for Add, Save, and Delete. These buttons will show up with images you will define for them. If you had any text-based menu items to add to the Application Bar, the ellipsis in the right corner of the Application Bar would be created automatically for you by Windows Phone 7. The ellipsis is not counted as one of the buttons on the Application Bar; therefore you could have a maximum of four buttons plus an ellipsis. The XAML markup to add three buttons is shown here:

<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="add">
        </shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png" Text="save">
        </shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"

Text="delete">
        </shell:ApplicationBarIconButton>

Note that the IconUri properties in this code snippet refer to the default names of the images that come as part of the Windows Phone 7 Tools installation. If you have changed default names of those images, make sure to properly edit the reference used in IconUri as well. Also note the Text element—it's a required element and it can't be an empty string. This text will be visible if you click the ellipsis in the right corner of the Application Bar, as shown in Figure 7-2.

At this point, you are done creating Icon buttons and should make sure that the shell:ApplicationBar.Buttons element is properly closed. Press F5 to view the results of your work—you should see the Application Bar containing three items at the bottom of the phone screen.

All menu items are a part of shell:ApplicationBar.MenuItems element, so add that element now inside the shell:ApplicationBar element.

<shell:ApplicationBar.MenuItems>
</shell:ApplicationBar.MenuItems>

Finally, you will define MenuItems themselves by adding shell:ApplicationBarMenuItems inside the shell:ApplicationBar.MenuItems element.

<shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
</shell:ApplicationBarMenuItem>
<shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
</shell:ApplicationBarMenuItem>

You will be editing the MainPage code of your application. To accomplish this, locate the MainPage.xaml.cs file by expanding the MainPage.xaml file in the Solution Explorer. Right-click MainPage.xaml.cs and select View Code.

For easier reference to an Application Bar component inside the Microsoft.Phone assembly (i.e., to avoid typing Microsoft.Phone.Shell.ApplicationBar before each component name), add the following using directive to the top of the MainPage.xaml.cs file:

using Microsoft.Phone.Shell;

Inside the constructor for the page (i.e., inside the public MainPage() code block), right after InitializeComponent(), initialize the Application Bar and set its IsVisible and IsMenuEnabled properties, as shown in the following code:

ApplicationBar = new ApplicationBar();
ApplicationBar.IsVisible = true;
ApplicationBar.IsMenuEnabled = true;

Initialize Application Bar buttons, providing the relative URI to the image that will be used for each button. Note that you must set the Text property of each button; otherwise you will cause an exception.

ApplicationBarIconButton btnAdd = new ApplicationBarIconButton(new
Uri("/Images/appbar.add.rest.png", UriKind.Relative));xs
btnAdd.Text = "add";
ApplicationBarIconButton btnSave = new ApplicationBarIconButton(new
Uri("/Images/appbar.save.rest.png", UriKind.Relative));
btnSave.Text = "save";
ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new
        Uri("/Images/appbar.delete.rest.png", UriKind.Relative));
btnDelete.Text = "delete";

Add the buttons to the Application Bar via the following code:

ApplicationBar.Buttons.Add(btnAdd);
ApplicationBar.Buttons.Add(btnSave);
ApplicationBar.Buttons.Add(btnDelete);

Next, you will create two menu items that will appear as text when the ellipsis button is clicked in the Application Bar. Very similar to adding icons, there are initialization and addition steps for each menu item. The initialization code for the menu items looks like this:

ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem("Menu Item 1");
ApplicationBarMenuItem menuItem2 = new ApplicationBarMenuItem("Menu Item 2");

The strings "Menu Item 1" and "Menu Item 2" are the text for the two menu items; in your application, you will certainly change that text to something much more meaningful and fun.

Add menu items to the Application Bar.

ApplicationBar.MenuItems.Add(menuItem1);
ApplicationBar.MenuItems.Add(menuItem2);

Finally, you are ready to test the Application Bar. Save your work and press F5 to start debugging the application using Windows Phone 7 emulator. You should see an Application Bar identical to the one shown in Figure 7-1. If you click the ellipsis to the right of the icons, the Application Bar slides up, revealing two menu items, identical to Figure 7-2.

Once again, you will be editing the code of the MainPage of your application. To accomplish this, locate the MainPage.xaml.cs file by expanding the MainPage.xaml file in the Solution Explorer. Right-click MainPage.xaml.cs and select View Code.

At the very end of the MainPage() constructor, type the following code:

btnAdd.Click+=

Notice the appearance of a small pop-up window to the right of the = sign as you type it. You should see the following message:

new EventHandler(btnAdd_Click); (Press TAB to insert)

Press the Tab key and notice how a line of code is automatically added after the = sign. This one line of code is the glue code you need to tie together user interaction with the Add button.

btnAdd.Click+=new EventHandler(btnAdd_Click);

Now press the Tab key again, and Visual Studio automatically creates a skeleton for the worker function for you. This may not seem like a big deal at first, but it's usually a challenge to remember exactly what parameter types this worker function must have. This shortcut is just one example of how Visual Studio really enhances developer productivity.

The worker code that Visual Studio adds to your application looks like this:

void btnAdd_Click(object sender, EventArgs e)
{
                throw new NotImplementedException();
}

Locate MainPage.xaml in the Solution Explorer and double-click that file to bring up XAML designer. Click the View menu

Figure 7.4. Click the Collapse button to hide the XAML.

Figure 7.5. Click the Expand button to show the XAML for the current page.

From the Toolbox, click and drag the text box to the Windows Phone 7 design surface, as shown in Figure 7-6. Right-click the Text item, and select Properties to show the Properties window in the right corner of the screen.

Set the Text property to blank and set the Visibility property to Collapsed.

Figure 7.6. Adding a text box to the application

In the Toolbox, click and drag the TextBlock to the Windows Phone 7 design surface and place it right underneath the text box. Right-click the TextBlock and select Properties to show the Properties window in the right corner of the screen.

Set the Text property to "Please enter your name" and set the Visibility property to Collapsed.

Now edit the worker function that was created for you by Visual Studio 2010 in the previous section. Right-click the MainPage.xaml.cs file and select View Code. Remove the following line from the btnAdd_Click function:

throw new NotImplementedException();

Edit the btnAdd_Click function to match the following code:

void btnAdd_Click (object sender, EventArgs e)
{
  textBox1.Visibility = Visibility.Visible;
  textBlock1.Visibility = Visibility.Visible;
}

Press F5 to view the results of your work.

Locate MainPage.xaml in the Solution Explorer, right-click and select View Code. Add the following line of code to the MainPage() constructor code. Don't forget to use the Tab+Tab trick to let Visual Studio automatically generate skeleton code for you (described in the previous section).

btnSave.Click += new EventHandler(btnSave_Click);

Add the following code to the btnSave_Click function:

void btnSave_Click(object sender, EventArgs e)
        {
        textBlock1.Text = "Thank you, "+ textBox1.Text;

        textBox1.Visibility = Visibility.Collapsed;
        }

Press F5 to see the results of your work. When you click the + icon, you will be prompted to enter your name. Once you enter your name and press the Save button on the Application Bar, the application displays a simple thank-you message. If, for some reason, the full text of the message doesn't fit within the textblock you created, you can increase both the width and the height of the textblock by setting the TextWrapping property of the textblock to Wrap.

Locate MainPage.xaml in the Solution Explorer and double-click that file to bring up XAML designer.

If only the Windows Phone 7 design surface is shown and no XAML code is visible, click the Expand Pane (<<) button in the lower right portion of the screen, as shown in Figure 7-5.

Paste the following XAML in MainPage.xaml (it's identical to XAML from the "Adding a Local Application Bar Using XAML" section of this chapter):

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png"
Text="add">
                </shell:ApplicationBarIconButton>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png"
Text="save">
                </shell:ApplicationBarIconButton>
                <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png"
Text="delete">
                </shell:ApplicationBarIconButton>
            </shell:ApplicationBar.Buttons>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Menu Item 1" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
                <shell:ApplicationBarMenuItem Text="Menu Item 2" IsEnabled="True">
                </shell:ApplicationBarMenuItem>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

Locate the <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="add"> statement in XAML and add Click=" to the end of that statement, so that it resembles the code here: