Join Doug Winnie for an in-depth discussion in this video Building event handlers for components, part of Up and Running with Windows Phone 8 Development.
In order for applications to respond to user events, we need to tell the app which user events we're going to respond to. In this video, we'll add event listeners to our XAML components that will trigger functionality in our code behind file, when specific user events take place. When we're done with this project, we will add tap events to each of our tip percentage buttons, and make sure they all respond to user events. To get started, if you're coming from the previous video, you can keep working with the project you currently have open. If not, open the Start project for this video. We'll be working with the MainPage.xaml file, so let's go ahead and open that up.
Adding listeners to events sounds complicated, but it actually is quite easy, Visual Studio handles a lot of the grunt work for you. Let's start with one and see how it works. In Design view or Code view, select or navigate to the 5% Button, named Percent5. In the Button tag, navigate to the end of the tag. We're going to add a Tap event listener. This will listen for the Tap event, and then execute a named block of code. So, to add this, we're going to go again to the end of our Button tag, and then add in Tap. And, you'll see that Visual Studio will show something that says New Event Handler. This is the code hinting support in Visual Studio asking if you want a New Event Handler, or named block of code, to be created for you to tie into this event.
By default, the name of the event handler is named the same as the object, and underscore (_), then event type, and then a sequential number. So, if I press Tab, you'll see it comes up as Percants5_Tap_1. So, we have created a listener, but what about the code behind file? All right, let's go ahead and take a look. So, open up the xaml.cs file, and let's scroll down to line 22. You'll see that the code was created for you. Now, this code doesn't actually do anything, but the overall framework is now here for you to start building from.
Now, we want to test that everything is working correctly. So, let's add some code into the Event Handler that will alter the text in the tip amount: textblock. If you remember, the textblock was a xaml object that we created. And, we discussed before, XAML objects are just classes. And, attributes we access in <xaml> tags, we can also access using dot notation as object properties in C#. So, if there is a text attribute in XAML for the tip amount textblock, there is then also a text property that we can access in code.
So, let's go ahead and try it. So, inside of my code block here, between the two braces on line 24, I'm going access TipAmount. You'll see that Visual Studio will recognize that we already have an object called TipAmount. I can press Tab to complete the line. Then, I'm going to use the period (.) to access the attributes or properties of this object, and then access Text. Again, the code hinting support will show that this is a recognized property when I can press Tab. We're going to set this = "5%." And, with C#, you need to end all of your lines with a semi colon (;).
There. So, let's go ahead and try this now in the simulator, and see how this works. Now, although we're using the mouse, the simulator is translating the mouse clicks to taps. So, when we click on the 5%, it registers the event, triggers the event handler, and executes the code we created. So, now that we got this one working, let's go ahead and create the other four. So, I am going to go Stop this, and then we're going to go back into our xaml file. And, we're going to replicate the same process that we did with this Tap event, and we're going to apply that to the other four.
We're going to create Tap event, and we're going to create a New Event Handler. So, now we have all five of our XAML event listeners, and now we can go back into our code behind file, and finish out the code. As you can see, again, all the different code blocks have been created for us. We now just have to access the text property of the TipAmount, and make the value appropriate for the percentage that we have clipped. tipamount.text=10%. Go to the 15%, tipamount.text=15%. tipamount.text=20%. And, the last one. TipMmount.text = "25%"; there.
So, let's go ahead and save this, and try it again in the emulator, and see how it works. We can try it 5, 10, 15, 20, and 25. Great. So, now all the tip percentage buttons are now responding to the user events. So, to recap, in this video, we created an event listener for a XAML component that would kick in whenever a specific event took place on the object. When that happened, an event handler is then executed. When we created the listener in code, Visual Studio created an empty handler for us. In addition, we also accessed properties or components in C#, instead of XAML, to make changes based on user input.
In C#, we have worked with object properties of the instance name, which we defined using x:Name attribute in XAML.
- Installing Visual Studio for Windows Phone
- Exploring the evolution of Windows Phone
- Laying out interface components with the StackPanel
- Adding buttons and text inputs
- Changing fonts and colors
- Building the application logic
- Testing in the simulator
- Adding design assets
- Deploying to the Windows Store