Welcome back. My name is Dante Gagne and I'm here to continue the Connect Learn series on Universal Windows Platform Application. If you've been following along at this point you've got Visual Studio installed on your machine and you've got your first project created. In this video we're going to start creating our actual application. I'm going to be working with the Design Surface in Blend to go ahead and create our first controls. I'm going to show you how we can modify those controls by editing the template and we're even going to go so far as to use the adaptive triggers to modify how your UI is going to look, whether you're working on a device or on a phone. For starters, let's go ahead and jump into Blend. Many of the things I show you here you could do either in Blend or in Visual Studio but I'm a Blend guide. That's where most of my experience comes from and you know I'm a little bit more comfortable here but you can choose whichever application you like. I'm looking at Blend and the first thing you're going to notice is that my Design Surface looks somewhat like a phone. I can change that just by modifying the value up here at the top left. I can choose, you know, I want to actually think I'm working with say a decent size desktop. I'll go ahead and select a different Design Surface and down here at the bottom change that to fit all. So just by changing that drop down I can change my Design Surface to whatever size that I want to use conceptually. Now later on when we get to adaptive triggers I'll show you how to actually deal with different device sizes. This is just working with my artboard. Now control creation is pretty simple. For this demo I'm just going to create a simple text block that is going to say, you know, hello world. That's what everybody likes to start with. In Blend you've got your controls just to the left of the artboard in Visual Studio they're located in a toolbox and I'll show you where that is in a moment. But all I'm going to do is select my text block and drop one out on the Design Surface. The default font is looks a little bit small here but realistically I'm kind of zoomed out because I have such a large design surface. But I'm going to start by changing my font size to be a little bit bigger so we can see it. Anti-pello world. Click anywhere outside the text block to finish your edit. So now I've got my traditional hello world application. I'm going to go ahead and deploy this to my local machine. All I need to do to do that is click the button up here. Congratulations we've created our first hello world application. Now let's take a look at what I can do to make my application a little bit more, you know, customized. So I'm going to close this and I'm going to create an OK button for myself. So let's create a button so I'm going to drag one out. I'm going to change the font size and I'm looking in the properties I don't remember exactly where that was. So I'm just going to do a search for it. There we go. Change the font. And buttons instead of using a text command, use a content command. The difference is a button can actually have graphics. It can have a whole wide range of controls inside it where a text box can only use text. So I'm going to set the content of my button to just say OK. This is what I would call kind of your default button. Now what happens if I want to change that? Let me show you how easy this is when you're working with the universal windows application. Now I'm going to go ahead and fit selection on my design surface so I can see what I'm doing a little bit more easily. I'm going to right click the button and just scroll down until I find edit template and edit a copy. I could choose create empty if I wanted to. That would create a completely blank button for me to work with. But in this case, I would like to have something to start with. Now I'm going to click OK. And now the object and timeline on the left is showing me my template. This is a template that can be used for any button anywhere in any application that I have. I've edited my template and what I'm doing now is I can modify the look. I'm going to select my root grid and I'm going to drop a rectangle down in that grid. I'm going to drag it behind the content presenter. The content presenter is the control that whatever I said is the content for the button, it shows that inside my template. And then on my rectangle, I'm just going to change the rounding. I'll just drag this adorn here and round it out a little bit. And for my root grid, you know, all of these are things that you can choose to do whatever you want to do to make it look your way. I'm going to take the background and reset it. So now my button looks like this fairly simple changes. But all I've done here is I've modified the way my OK button looks. Now I'm going to scope back to my main document. I'm going to do a fit all. And what makes this kind of cool is when I drag out another button, I can right click it, choose edit template, apply resource, and pick the button style that I just created. Now it'll go ahead and customize that control in exactly the same way. This allows me to give all of my controls a consistent look. Now the last thing I want to do here is I want to show you how you use adaptive triggers to modify the layout of my application, whether I'm working on a desktop or on a phone. So the first thing I need to do is I'm going to go to the states pane. I'm going to create a state group. It doesn't really matter what I name the group. I'm just going to be working here and adding a couple adaptive triggers. So the first one is going to be wide. The second one is going to be narrow. For each one of these, I'm going to edit an adaptive trigger. I'm going to add one. And I'm going to change the minimum window width to 1024. For the second one, I'm going to set its minimum width to 320. So what I've done here is I've told the system, take a look at the width of my application. If it's more than 1024, I want all of my controls to be in the places they are when the wide adaptive trigger is selected. If it's not greater than 1024, it will drop down to the next adaptive trigger in this case, narrow, and move everything to that location. Let me show you what I mean. I'm going to go ahead and drag both of these buttons over to the left. And just for fun, I'm going to rotate my Hello World label. If I hold down Shift, it'll do it by even increments. So what I've done now is I've informed the system that if I'm working with a wide application, something that full width of my screen, or actually 1024 pixels or wider, this is where I want all the controls. As soon as I go to a narrow form factor, this is where I want my controls. And let me show you how that behaves. I'm going to press play up here, deploy this to my local machine again. And by default, the size I'm going to get is going to be nice and large, so everything will give me the wide layout. The default width of this control is actually less than 1024, so it's using that narrow adaptive trigger. But as I make it wider, you'll notice as soon as I cross that 1024 threshold, everything moves to the wide position. Now this is a very simple example here, and you'll see that as you're working with a phone or something like that, the controls will move around exactly where you want them to move. But this gives you an idea of how you can use your adaptive triggers to change your overall UI, whether you're working on a phone, whether you're working on a laptop, or whatever device you happen to be working with. And that's all there is to it. Now you see how to use a design surface to start creating your UI and even modifying some of those templates. Now the states panel, the place where I was working with those adaptive triggers, that's only available inside a blend. If you want to work with adaptive triggers in Visual Studio, you can still do that, but you need to work at the code level, which means you're authoring the XAML by hand. The Intel sense will help you with all of that out, but it's just one of the differences between blended Visual Studio. In the next video, we're going to be diving a little bit further into debugging so we can deploy our application and we can take a look at getting the business logic behind the scenes right. I'll see you then.