LinkedIn principal author Doug Winnie describes how to write code to respond to user interaction like clicking or tapping a Button component in a Universal Windows app for Windows 10. Using XAML and C#, event handlers can be attached to components and controls using XML-based attributes, and then behaviors are coded using class methods using Visual C#.
- [Voiceover] Inside of our code we need to define how the app will work. The includes what the app does when the user clicks on or uses something that is on the screen. Although they are in separate files, the XAML and the C sharp code behind files are linked. And they represent two sides of a single coin. So things in XAML can refer to things in C sharp and vice versa. In XAML we have a button called roll button. When the user clicks the button, we want the app to do something. We then need to add an attribute to the roll button that says when a specific event happens, in this case a click, that the app should do something specific.
Open up the mainpage.xaml file and find the button component in the XAML code. You can click the button in design view, and it'll highlight the code. We need to add an event handler. This will configure the button to listen for a specific action to take place. And when it does, execute a set of code. In XAML, an event handler is added using an attribute. The attribute is called click, and add that to the end of this line. As you finish typing it, you'll see a prompt that will ask for you to add a new event handler.
Click this prompt to continue. You'll see the attribute filled in with roll button, underscore, click. This is a new section of code that's been added to the C sharp code behind file, that will run when the button is clicked. Switch to the C sharp code behind file. At the bottom, you'll see a new section of code with the same name. This was created automatically for you by Visual Studio. And any code that you define inside of the curly braces will run when the button is clicked.
This section of code is called a method. It is the name section of code that can be executed when the section name is mentioned in code in the class. You'll see that it is private, meaning that it's not visible to the world but private to the class. The void statement and the contents within the parenthesis define input and output of the method. This method doesn't use those, so we can ignore those for now. To verify that the button was clicked and the method is executed, we can change the text in the text block on the page to display a message.
Inside the curly braces of the roll button, underscore, click method, we can add a line of C sharp code. We already had the XAML code run code on the C sharp code behind file, we can work in the opposite direction as well. We can add the C sharp code behind file, access things on the XAML page, and change properties. To do this we need to use the names we assigned to the components. For the text block, we use the X name property to name it die value text.
So we can access that by entering in the name. Visual Studio knows that the XAML and C sharp code behind files are linked. So it is able to give you a hint on the name of the text block. We then want to access an attribute of the text block. In XAML, we use the text attribute to define the text to display. In C sharp, we can also access that attribute but it is done a little differently. We use a period or a dot. And then access the property from there.
Visual Studio again helps us out by knowing the properties we can use with tool tips. We can now make the text attribute equal, to a string of text. And since this is a C sharp statement, we need to end it with a semicolon. So in XAML, we used tags to identify a component, and attributes are used to give it a name and to define properties. In C sharp, we used the name of the component, and using a dot can access attributes of that component and set their values.
So let's test this out. At the top of Visual Studio, there's a button with a play button. This should say local machine. This will build and run the app we have in Visual Studio on your computer. Press play and run the app. This might take a bit of time depending on your computer. At some point the app will run, and you'll see the button and text block on your screen. The button might be obscure partly by this text that's displayed here. This is diagnostic information that's showing things like frame rate for how many frames are shown on the screen.
These numbers are used for debugging of your application. But we can still access the button right below it. Go ahead and click the button. You'll see that the text block changes, just like the code did. Since we're done testing, we can go back to Visual Studio and press the stop button. This will shutdown the app and return us back where we left off. The build process takes all the code we write and converse it into a format that Windows 10 can run. But sometimes we make mistakes. On the line of code we just wrote, delete the semicolon.
Now try to run the app using the play button. You'll see the error list panel display. It is telling you that there's a problem with your code and it can't complete the build process. In this case, it is saying that a semicolon is missing. And it tells you where it thinks the problem is. If you go back to the code, you'll see red squiggly marks. These are markers that Visual Studio puts in your code when it detects a problem before you build it. If you hover your mouse over it, you'll see the same error.
Go ahead and fix the error, by putting back the semicolon. You'll see the red marks disappear, and the app will now build again correctly.
Finally, you'll experiment with your app to learn more about how Windows apps work, and then find out where to go next.
- Installing Visual Studio Community edition
- Working with C#, XAML, and the Windows SDK
- Getting a head start with starter templates
- Testing apps with device emulators
- Creating your first app
- Building interactions, game logic, and scoring
- Adding custom components
- Modifying design parameters in XAML
- Experimenting and updating the final app