Join Scott Peterson for an in-depth discussion in this video Controls in action, part of Developing UWP Apps: 2 Basic Controls and Patterns.
- [Instructor] Okay, we're over in Visual Studio 2017 to take a look at some of the basic and more common controls used in Universal Windows Platform applications. I've opened up the tagger solution that we created in part one of our mastering Universal Windows Platform series layout and navigation, and I've kind of done a little bit of cleanup on this solution since the last session, cleaned up some of the menus, cleaned up some of the structure, if we just run our tagger solution, we can see that we have essentially the same structure and navigation in place, the same adaptive UI, but now I've added some friendly labels here, home, groups, tools, and tips, and these are going to map back to page 1, page 2, and page 3, just like they did in our layout and navigation sessions, really this cleanup is just for me, remember the final result of this entire series is going to be this real cool application we're creating called Tagger that does image analysis and cognitive services evaluation against images and videos.
So right now that's all just visual, we don't care that much, let's just get in and look at some of the more common controls we may use in a Universal Windows Platform app. So we'll go ahead and close that there, and we'll open up that first page, which is just Main Page, we'll start adding some controls in here, so let's go ahead and say that we'll add a button. Couple of things I want you to notice here on a button, when I add a button, not only do we see it in the Designer, but we also have it in our XAML, and we can edit it in either panel, so you'll notice that it changed this margin there, I'll just change this margin, say width 248, the button control, like most controls in the Universal Windows Platform, can take a content property that is much better than a text property.
So in older development, a button would've had a text property, and that text would've been like 'click me,' but instead we can say content click me, and we'll talk about why that's a big deal in a little bit, having this content property instead of a text property. But let's say we want to put those in a stack panel, we could just very easily select both of those, and I could say group into, stack panel, and it's going to automatically see that I have those horizontally and say orientation horizontal, I can change this to vertical, we'll just get rid of that margin there, get rid of some of those properties on the button and the text box, we'll get rid of some of that content there, now we've got a stack panel that's got two controls in it.
A button, and a text block. Just for fun, we'll say vertical alignment: center, and horizontal alignment: center so that we can have that nicely in the middle. Okay, great, but let's take a look at that button. In fact, I'd like to move that button down below, So again, we could stretch this button all we want, we could resize it, stretch it, we could also go to the properties panel, and change it here. So if I select the button, we change the content here directly, that could just be text, but again, this content, as we'll see in a minute, can be anything, but there's a bunch of things that we can change on it directly from the panel, so we could say you know what, I want that font to be stencil, and I want the font size then to be 18, and we can also change things like the background beyond just a color, so we could say you know what, I want that to be a tile brush for the background, we could select that here, and select an image, or, as with all controls in the Universal Windows Platform, we can just add the properties on inside the XAML of the controls, so here I could say background, and I could say image brush, and for the image brush, I could go ahead and select a source, so I could say image source, and we'll make that image source be image 1.
Notice how we have this nice image now as a background, which is combined with the button content, so I could say foreground, foreground=white to have that show up a little better, we could bump that font size up to 40, and obviously this is kind of ugly, but the point is that we could, with almost all of the controls, we can nest the properties within the XAML itself and get very specific on what we want to show up for the content of those controls, way better than just the text property there.
But we could also add content to that button programmatically, so if we were to go back over to the main page, first let me give this a name, we'll call this myButton since I'm so clever we'll just call that myButton, and we'll go over here and in our loaded event we'll say myButton.content, and I could throw any control in here, I could say content=new(TextBlock), and have a TextBlock text value be UWP ROCKS! And so now whatever's been created in the designer would be overridden at runtime with this textblock, which says UWP ROCKS! Let's take a look at that, and there we go.
So it maintains everything but the items that we've changed, you can see that we've got some visualizations on mouseover and different visual states related to that, but in general, you get the point. Let's add a couple more controls into that. Let's go ahead and drag and drop a checkbox, and we'll add a toggle switch, let's talk about the differences here.
So checkbox is kind of an old-fashioned control, in fact, it's actually recommended that you don't use a checkbox. I've found situations where a checkbox just makes sense visually, but typically in UWP development you'll want to have a toggle switch, which is essentially an on/off, just like a checkbox. But if we look at the checkbox, notice how we have content here, and I could say check me, and that's going to show up similar to a label. But if I go to the toggle switch, notice how I don't have a content, and I don't have a text.
The toggle switch is designed to have templated content that uses an on and off property. And so if you want to have a label on something that's templated in this scenario, you would instead use a header, so in a header I could say toggle me, we'll bump up that designer just a little bit so you can see, so now you see how the header is toggle me, and we just have this off content, how would I change that label there? For most of these boolean templated controls, we actually have off content, and I could say no way, and I could say on content=way.
And so that's kind of cool, we could go ahead and add a picker in here, we could do a time picker, and let's go ahead and add a date picker in there as well, let's load that up and see how they render visually, and the important thing here is that these are going to render visually in a way that makes sense on the desktop, but since we've got the adaptive UWP platform, they might render slightly differently on an Xbox, for example, or on a HoloLens. So on the time picker we can easily select the time, on a date picker we can select the date easily, we can also use a calendar, there's all kinds of controls for date and times that are in there, notice if we toggle that, we go from way to no way, obviously with the checkbox we can do the same thing.
But let's connect these controls. We have this concept of being able to connect and bind control values to each other, so let's say we wanted to have an actual text box here, so the difference in UWP is that a text block is similar to a label, a text box is a standard text box, an entry, an input. So a text box, since it's designed as an input, will have a header, so we can say first name as the header, and so this turns very much like an input label, which makes it really convenient when we're creating input forms, we could just say header first name and then the content would be first name, in fact, this one will have a text because it's a text box, and we'll say Jimmy Page, but all of these input controls In Universal Windows Platform also have a watermark property that's called placeholder text, so I could say enter your name.
Let's take a look at what happens there, so now we've got that header and we've got that input box, but if we cleared that out and notice that we've got this nice placeholder watermark there, but one of the cool things about Visual Studio 2017 with UWP is we can actually change these values without running anything, it's a runtime XAML edit and continue, so I could go ahead and say select there, we'll select that, we'll go to the visual editor there, what if we want to change on content to yes way, and what if we want to change the placeholder name to enter your first name, and the checkbox to check me now? Now if we switch over to our app, notice how realtime, we didn't even have to stop and restart, we've got check me now, no way, let's take that off there, we've got yes way, and no way, and we've got enter your first name.
All happening realtime, this makes it really easy to adjust our controls without having to stop, restart. So we've got the designer that helps us, which is great, but when we actually want to see this realtime, what this is going to look like, we can just edit it without having to start or stop our projects. So I mentioned that we were going to look at connecting controls as well. Let's say I only wanted this text box to be enabled, if that toggle switch was on, so I could say for the header use first name, and that would be yes way or no way, but let's say I want to change the text box enabled to be connected to that toggle switch, I could say binding, element name, we'll give this an element name real quick, we'll call this toggle switch myToggle, because again I'm so clever, so we'll bind it to the element myToggle, and the path will be IsOn.
So what we're saying is this text box will only be enabled if that toggle is on, and this makes it really easy to have these fill-in input forms where we may want something hidden, or we want a different state, we want something enabled or disabled based on selections above. This is super-common for setting, super-common for fillout forms or data entry. Let's go ahead and take a look at that runtime, and you'll see how when we toggle that toggle button, we have enabled and disabled states there.
Super-easy to manage, and most of the controls are going to work this exact same way. Most controls can be connected to other controls, most controls can be nested in other controls most controls, as we'll see later in the session, can be overridden, and can work in combinations, and can really follow this patterning concept, but let's look at a couple more controls that are really combinations of controls themselves. Let's get rid of that whole thing there, and let's add a grid view. Now, you may have used a grid view in other platforms, or you may have used a platform in UWP, the grid view is one of the most powerful controls available for collection and data.
So if we have that grid view there, and we say items, we can just add some items here, and for fun I'll just add a bunch of images, we'll just give all of these a width of 200, and a height of 200, and we'll set the source on that, we'll say the source of that is image 1, and we'll say 2, 4, 5, 6, notice how we have that visually in the designer without any problem, so one of the cool things that we're going to look at a little bit later, which is why I wanted to bring it up now with the grid view is that the grid view, not only is it designed for data and collections, you know, we just added a bunch of images here, which you typically wouldn't want to do, we'd typically want to bring that from a data source or some kind of binding on the back end, but since the grid view is and item panel-based control, it's a conglomeration of a number of controls that are exposed as a grid view, which means that we can override these templates very, very easily, so let's say we wanted to have these aligned differently, or we wanted the scrolling to happen differently, or we wanted every one of these images just to have a label on with some kind of animation, or more data, or imaging like a Facebook or Twitter timeline where every one of these items in the timeline was from a grid view, but we might have a status update, and a user, and a timestamp, and a nested list with mentions or things like that.
The grid view is perfect for this. But also, the grid view is going to render adaptively no matter what we do, let's rid of that, my button content there, so this is going to look and expand and adapt, again, no matter what screen resolution, screen size, or device we're on. So if we just make that real skinny here and squish it over you see how the grid view automatically wraps itself and adjust without having to add a scroll bar, without having to add any wrapping logic, it just does what you'd expect it to do.
Okay, one more control in these control groups I want to look at is one that I think is heavily underused, but is really a cool one, and that is the actual web view. So for all intents and purposes, you could actually create your own fully-functioning web viewer with UWP with the web view. The latest version of the web view is so powerful, you really can override or do whatever you want. So for the web view, let's say that we were just going to put a source, and we'll just say http://www.liquiddaffodil.com, but we'll spell that right.
Notice one thing, this is one of the few controls that does not render at design time, notice how we've just got this box here that says this is only enabled when the application is running, the rendering that happens with web view is very heavy, in fact the web view is actually, again, the conglomeration of a number of controls that are pulling off, depending on your version of IE or Edge browser engine in the background. So let's just load that up, and notice how cool that is, that we've got a full web browser experience running right there within our frame window, and of course we could absolutely add back buttons, history, favorites, view zooms, we could trap content that comes through to get history, we can really do whatever we want with this web view.
So another really great control that we're going to look at, again, a little bit later in this series to see how we can extend that web view. Okay, so there we go, that's kind of a quick overview for a number of more common controls that we use in UWP, we didn't look at variations of these, like there are radio buttons, just like there are checkboxes, there are combo boxes and lists, but they're all really just variations of each other. What I wanted to cover in this session were items that fell within those different groups, and especially, show how we can manage the properties through the designer, through the properties window, and programmatically on the backend, so let's flip back over the slide deck and see what we can do next in the area of basic controls and patterns.
Note: This course was created by Wintellect. We are pleased to host this training in our library.