Windows Phone 7 Development : Wiring Up Events to an Application Bar ( part 1) - Reacting to Add Button Events

1/30/2011 10:05:04 AM

There are two parts to writing code that reacts to Application Bar events:

Writing a small snippet of "glue code" that links Application Bar button or menu item click to the function that does all the processing (the "worker" function).
Writing a "worker" function that performs all the heavy lifting—i.e., rearranging UI elements on the screen, saving data, prompting the user for input or anything else that the developer decides to do in response to the button or the menu item click event.

Let's start with the Add button, which you'll wire up in the next section.

1. Adding "Glue" Code and a "Worker Function" to the Add Button

Visual Studio has made adding both "glue code" and a "worker" function virtually a two-keystroke procedure. Let's see how easy it is to create an event handler for the "Add" button on our Application Bar using a couple of Visual Studio shortcuts. The walkthrough assumes that you have already created the Application Bar via managed code (not XAML, which we will talk about shortly) by following the steps in previous sections.

Once again, we will be editing the code of the MainPage of our application. To accomplish that, 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 sew the following message with the message
```
new EventHandler(btnAdd_Click); (Press TAB to insert)
```
Go ahead and 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();
}

Now you're ready to add a bit of interactivity to your Application Bar, which you'll do in the next section.

You are certainly not required to use the shortcut just described to generate event handler code for the Application Bar or for any other event for that matter. You can write all of the foregoing code by hand, but be very careful to pass the proper parameter types and the proper number of parameters to the event handler.

2. Reacting to Add Button Events

With a "worker" function in place for the Add button, let's expand it to accommodate a simplified real-world scenario: when a user clicks the Add button (the button with a "+" icon) on the Application Bar), we will show a text box on the screen that is ready and waiting for user input. We will also add functionality to the Save button (the button with a floppy disk icon) that will display the thank-you message and hide the text box. Of course, in the real world, you would want to store the values entered by the user and react on the user input in some fashion.

Follow these steps to add interactivity to the Application Bar events.

Locate MainPage.xaml in the Solution Explorer and double-click that file to bring up XAML designer. Click the View menu=>OtherWindows=>Toolbox. You should see XAML designer and a toolbox side-by-side, as shown in Figure 7-4 . If you see the toolbox, Windows Phone 7 design surface, and XAML code on the screen side-by-side as in Figure 7-5 , click the Collapse Pane (>> icon) in the area between the design surface and XAML to hide the XAML code, as illustrated in Figure 7-5.

If you do not see the XAML view, click the Expand Pane (<< icon) to bring that view back, as shown in Figure 3.
In the Toolbox, click and drag the text box to the Windows Phone 7 design surface, as shown in Figure 1. Right-click the text box, 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 1. To add a text box to the application, drag it from the Toolbox and drop it onto MainPage.xaml on the Windows Phone 7 design surface. Set the Visibility property to Collapsed, and delete all contents from the Text property.
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();
```
Figure 2. If the toolbox, Windows Phone 7 design surface, and XAML are present on one screen and that interferes with proper positioning of Toolbox elements, click the Collapse button to hide XAML.

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;
}