There are two parts to writing code that reacts to Application Bar events:
a small snippet of "glue code" that links Application Bar button or
menu item click to the function that does all the processing (the
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:
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)
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
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.
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;
Press F5 to view the results of your work.
Now, when you click the "+" icon on the Application Bar, the text box is ready to accept user input.