Join Michael Lehman for an in-depth discussion in this video Create a UX with XAML, part of IoT Development with Windows 10 IoT Core 1: Installation and Basic Connection.
- [Instructor] Ready to roll up your sleeves and make somethin'? We're going to create a UX with XAML, and make a simple headed app for Windows 10 IoT Core. We're going to add a label, a TextBox, and a button. And then we're going to put some code behind them. Then we're going to run it on a raspberry pie. So to begin with, we're going to fire up VisualStudio. And we're going to click New Project, we're going to go to Windows, Universal, and pick Blank App. Now we're going to specify what target version do we want? We want Windows 10 Anniversary 14393, and for our minimum version, we also want Windows 10 Anniversary 14393.
So let's click OK. And let's just go ahead and run this on our raspberry pie. It shouldn't do anything, but it will give us the ability to know whether our raspberry pie is in fact functional with all the libraries and everything else we need. So, as you may remember from before, we come up here and we specify that we want to run in an ARM processor, that's the first thing we need to do. And then we'll come the Project, Properties, Debug. And specify the device as a remote machine and talk to our specific raspberry pie. Save that configuration, and we'll give it a whirl.
Drum roll, please. And now our app is running on the raspberry pie, and if everything worked correctly on your end, what you'll see is a nice blank white screen with some numbers at the top. That means we have our canvas, and we can now start adding controls to that canvas, but it means that we have a functional project that can build an app and deploy it to the raspberry pie for Windows 10 IoT Core. So let's stop this and add a couple of things. Before we get into everything, let's go to Tools, Options and change the way the XML is formatted so that we can see each attribute on a separate line, because it's easier to edit XAML when you can see them all lined up.
So we select Tools, Options, we come down here to Text Editor, scroll down to the bottom for XAML and under XAML Formatting, Spacing we select "Position each attribute on a separate line." And we click OK. And now we're going to go ahead and open up the mainpage.XAML. That's where all the UI gets designed. And this will open up the Microsoft XAML editor inside VisualStudio. By default, the editor shows up with the code at the bottom and the design at the top. I like to see it this way a bit more. And we'll close the Solution Explorer so we can get a bit more space on the screen here.
And then we'll come to our XAML and we'll reformat it EVA, and now you can see that we have our basic setup. So now let's go ahead and open up the Toolbox, and put on the label button and TextBox that we talked about earlier. We're going to go to Common XAML Controls, move this back here, we'll pick 4 inch IoT device, why not? Or 10 inch IoT device, there we go. So that gives us a sense of our scale, there's our 10 inch IoT device. Let's bring back our Toolbox, and we'll bring over a button, and put that button over here near the top, we'll bring over a TextBlock, static text, and finally, we'll bring over a TextBox.
Now we'll zoom in a bit and reconfigure these things. Go here to 200% so we can see what we're doin'. And we'll scroll up near the top here, there's our button. So we'll put our button up here, and over here we've got our TextBlock, we'll bring that over there. And finally, our TextBox. We'll put the TextBlock up here, we're going to make the TextBlock say, and we'll come over here now to the XAML side to start editing this.
We'll say "Sample IoT App". Okay, there we go. The TextBox is where we're going to put our output in. And then we're going to call our button Go. So we'll come down here and change the test of our button in the Content attribute, say, "GO". Now, just like with any other XAML environment, we can simply double-click on these controls and we'll automatically end up in the code behind. So now, in order to make our app do something, we'll do what we always do in a XAML editor, we'll just double-click on the button, and we'll get some code.
So now that we've got our button, let's put some code in there to generate a random number and put it in our TextBox. So, to generate a random number, we first create an instance of the random object, and then we ask it for a new value between zero and 255. I'll put it in the TextBox by saying, "textBox.text = rValue.ToString". That's it. So now when we click the button, we'll generate a new random number, and put it into that UI, and it'll show up on the screen.
- Reviewing Windows 10 IoT in action
- Selecting a hardware platform
- Choosing sensors and effectors
- Installing the IoT Core Dashboard and Windows 10 IoT
- Configuring Raspberry Pi hardware
- Installing Sense HAT, an add-on board for Raspberry Pi
- Creating a UX with XAML
- Prototyping a product