3. Reacting to Save Button Events
Continuing the walkthrough,
let's now add an event handler to the Save button of the Application
Bar. You'll write code so that the user clicks the Save button, and the
application will hide the text box and change the text of the textblock
to thank the user for entering a name.
Locate MainPage.xaml in the Solution Explorer, and 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 does not fit within the textblock we created, you can increase
both the width and the height of the textblock by setting the TextWrapping property of the textblock to "Wrap."
Now you're ready to enhance the Application Bar even further by writing code for your menu items to do some meaningful work.
4. Reacting to Menu Events
The code you write to react to
menu click events is almost identical to code for Application Bar
button events, with the "glue code" attached to the menu item instead of
the Application Bar button. The block of code shown here displays a
simple text message when the user clicks on the first menu item in the
Application Bar that you created previously. Note that only a portion of
the MainPage() constructor is shown, since the rest of it remains unchanged from the prior walkthrough.
menuItem1.Click+=new EventHandler(menuItem1_Click);
}
void menuItem1_Click(object sender, EventArgs e)
{
textBlock1.Visibility = Visibility.Visible;
textBlock1.Text = "You just clicked on Menu Item 1";
}
Press F5 to run the
application now. You should see an Application Bar appear with an
ellipsis in the right corner. If you press the ellipsis, two menu items
become visible. Once clicked, the text on the phone screen changes to
reflect the name of the menu item clicked.
In the real application,
you will certainly want to do something more meaningful than what we
have done. For instance, you may have menu items for "Help" and "About."
If the user clicks Help, a Web Browser control (discussed in the next
section) could be programmed to display a set of application Help files.
If the "About" menu item is clicked, you can use the Web Browser
control again to show your company's web page, or to simply display
basic contact information.
One final thing we need to look at before leaving this article is using XAML to link event handling code to XAML elements.
5. Adding Event Handlers with XAML
It is also possible to
write the necessary code that attaches (or "glues") a certain event to a
managed code in XAML. For code readability and understandability
purposes, this approach may be preferable to the managed code approach
that we have already discussed. Imagine that you are trying to maintain
an application that someone else wrote—it would be easier for you to
understand and trace application behavior by starting with the XAML
design elements and following their "glue code" into the event handlers.
The steps you follow to wire up events in XAML are pretty
straightforward, as illustrated here.
Locate MainPage.xaml in the Solution Explorer and double-click that file to bring up XAML designer.
If
only 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-6.
Paste the following XAML in MainPage.xaml (it is identical to XAML from the "Adding a Local Application Bar Using XAML"):
<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:ApplicationBarIconButtonIconUri="/Images/appbar.add.rest.jpg" Text="add"> statement in XAML and add "Click" to the end of that statement, so that it resembles the code here:
<shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.jpg" Text="add" Click=">
Note how Visual
Studio automatically shows a choice of "New Event Handler" right after
the double quotes. If you press the Tab key now, the skeleton code for
the "worker function" will be automatically inserted in the MainPage.xaml.cs file and it will have a default name of ApplicationBarMenuItem_Click. To add functionality to the Application Bar button click event, open MainPage.xaml.cs (by right-clicking the MainPage.xaml file and selecting View Code) and edit that function in a way similar to the preceding button click event function.
