Join Scott Peterson for an in-depth discussion in this video Advanced controls, part of Developing UWP Apps: 3 Custom and Advanced Controls.
- [Instructor] We're over in Visual Studio 2017 to take a look at implementing some of the more advanced controls in the Universal Windows Platform, and as with every session in this series we're going to be building this really cool tagger UWP application that's going to be designed to do analysis on images for automatic captioning and tagging and different types of analysis based on images. And just to review, we load that app up, you recall that we left off the last session on basic controls and patterning with this app structure that gives us layout navigation using the split view and we can just navigate through pages, we got nice back and forward functionality and in the main area of our content we've got this layout that's got these basic image controls and a little caption that shows on every item.
And I was thinking since this app could potentially have hundreds or thousands of images it might be nice to be able to search across these images after they get captioned and tagged, so I thought we could add a nice little autosuggest search bar up here in the top right corner using the autosuggest advanced control. So let's go ahead and close that up. That page is actually the main page that holds all the navigation for our app and since we want this to be available everywhere within the app we're going to go ahead and add that autosuggest into this page.
So we'll go down, this is the top border we've got this stack panel that's in column one, we've got the second column that's got no content in it, let's just drag in this autosuggest control and talk about what this exposes a little bit. First of all with an autosuggest we have the ability to add a query icon, we can say, what icon do you want available for users to execute a search? In this one we're just going to select the find icon, you'll notice up here we've got the find icon that shows up.
We're saying we want a width of 200, we're going to stick it over in that column, give a little bit of a margin, some alignment. On this one we're going to bind it to our model against the suggestions object. You don't have to pay much attention to this since we haven't got into our model and data binding session yet. Let's look at these three custom control events that we have on the autosuggest. We have QuerySubmitted, TextChanged, and SuggestionChosen. Here's what the functionality is in general for these. A QuerySubmitted means basically that someone has selected that icon.
So they've selected something and then they select that icon or they've entered text and selected that icon. TextChanged is just like a text change event for a text box or entry, when that text changes that event's going to be triggered and SuggestionChosen would mean that a list of suggestions will drop down and a user actually selects that. So for this demonstration we've populated the OnTextChange event, so let me just right click and say go to definition. And this OnTextChange is going to pass us the sender and the changed event arguments.
One thing that you should note working with any of the controls in Visual Studio is that you could just right click over an event and if it doesn't exist you can just go to definition and it'll just automatically create that event, so there we have the OnQuerySubmitted that gets created, and OnSuggestionsChosen event. So let's add a little code to this OnTextChange.
So I populated in the model a list of all of the values that show up in a caption, like boat or grandma or skateboard. And I'm essentially saying in the view model suggestion just clear that out, the suggestions as you recall is the item source for this autosuggest box and then every time somebody types something in I'm simply just evaluating what they've typed in and I'm only pulling up the values that are found based on that match and then I'm adding them to the suggestions.
So I'm clearing it out and then I'm adding those suggestions. The reason why we're not re-instantiating that model every time is because then we'd have to rebind it. With an observable collection like suggestions, we can just add or remove and have them just show up and have the UI refresh automatically. So let's put a break point there, put a break point there and let's take a look at how this autosuggest box could now work. We'll load up the tagger app, so now you'll see that we have these captions, nice house, race car, sailboat, man on skateboard, et cetera et cetera.
If I start typing in the letter G, it's going to go to our OnTextChanged it's going to show us that we have this list of titles, these 15 terms from titles and it's going to add group and grandmother. So if we take that break point off there, notice when we start typing we're going to get this nice little autosuggest. Though so in a real world implementation of this we may want to have the back end pull from for example Azure Search, we're have this really fast, very performant search experience.
But the cool thing about UWP is now we have that control for the front end and this control may look different depending on the device and the hardware that you're on so it could look a little bit different on an Xbox versus a phone, it's going to adapt automatically based on the adaptive UI concepts in UWP. So if I were to select grandmother for example, our OnSuggestion shows and will get sent and we can take a look at the args, and see that the selected item was grandmother. So that's pretty cool.
So now we got really the beginnings of a nice search experience, a global search experience everywhere. But let's add something else, let's use another advanced control. One thing that I was thinking is that this app, it's really helpful to be able to automatically caption images but what if we wanted to automatically thumbnail and capture videos as well? So right now we're just loading up six images, let me change the model behind and load up a couple of videos as well.
So I've got these two videos that are from Channel 9 that we're going to load up. That's going to load up these videos but you know we don't really have any functionality for that. I see that it's a thumbnail here it says it's an Azure batch video, an Azure functions introduction video, it would be nice if I could actually view the video from here. See with these images that's great 'cause this image we know is going to look like this, but if it was an animated gif or an mp4 or something, we can't really take a look it.
So let's add code here that would do a few things. Let's go to our main page and let's add code that will give us a little button that we can click that could play that video and have it pop up in a fly out control and have media player transport controls with it. Now that sounds like a lot of stuff, but let's look at how easy that is using some of these advanced controls. So if I just take that grid out there and add my media controls code, let's just take a look at what I added.
So we still have this text block that's showing the title here, but now what I've added is this AppBarButton, and the AppBarButton, I've given it a play icon, I've attached a fly out now this fly out's a really cool control in UWP that's basically like a pop-up, it's not exactly like a pop-up but I'm just essentially creating this little fly out and I'm saying in this little fly out stick a media element, and then the media element all I have to say is AreTransportContorlsEnabled True, Autoplay True, and now I'm binding the source of that video to that video URL.
One other thing I'm doing here is I'm saying change the visibility if it's not a video, it this is video content, show up. But if it's not a video, don't show this button, we don't want people to have a button there to play it if it's not a video. So, just a very small amount of code there and let's take a look at that UI change. There we go, now you'll notice that these images do not show a play button but these show a play button.
Now watch how easy it is just to get videos playing with full control over the video content. So if I click play, Let's go head and take a look at some of those new technology I just described, I'd like to invite Mark Reussinovich on stage, - [Instructor] So we've got video playing, I can pause it without any problem, I could change the aspect ratio if I wanted to, I could cast it to a device, now I want you to really pay attention to this, I could cast this to a device right from my little popup fly out in this advanced control, I could even go full screen and I can just do whatever I want in this entire video.
So that's pretty crazy if you think about it, how easy that is to get multimedia support into your app. Let's do one more thing, I thought as people are loading up these images and these videos, they may want to actually write on them, what if they wanted to create a meme or they want to put other content or they want to put some kind of a markup using a pen or some type of inking. Well the great thing about the Universal Windows Platform is full inking canvas support and controls are included by default.
So let's do one thing, let's actually add an event here on the grid view, first I'm going to say is ItemClickEnabled I'll say True, and this event is going to be global for the grid view so that if any item in the grid view gets clicked it's saying yes, we'll accept that. And then I'm saying ItemClick equals OnItemClick, and course it's just going to create that for us over here. And so on the ItemClick what I'm going to do is say this.DataContext, which is that start view model, as StartViewModel.SelectedImage = e.ClickedItem as ImageInfo using the class that we created in the earlier session.
So we are going to say whichever one they click, set that as the selected image in our model, and then we can just use our same navigation pattern, I can say Common.Navigation, NavigationService, NavigateToPage, and we can just say TypeOf and I've got this inking page created. K, so just to confirm, the user's going to click on an item in the grid view, it's going to pass this item click event, we're going to say that selected image is whatever image gets clicked on, and then we're just going to navigate to this inking page.
Let's go over to that inking page and take a look at that. So on the inking page what we've got is just the standard grid that comes in a page, I've got an image that's being loaded up, that's going to be connected to that selected image, I've got an inking canvas that's going to lay on top of it, and then I've got an ink toolbar that's going to lay on top of that and have an alignment of top left. Now if you're working in Visual Studio 2017 Released Candidate, every once in a while you may see some errors with some of these newer controls like ElementNotFound, don't worry about it, still going to function if you're using this code it's still going to function.
The other thing I'm going to do on the code behind is when this page loads up I'm going to say for that ink canvas, accept the input device types of mouse or pen. So this'll give us the ability to say, hey, somebody's using a mouse let 'em use the mouse, if they're not, they're on a Surface or something like that, use the pen. So, if we've added all the correct code, let's go head and run this and see if that's going to work. So there we go, we could just say click on that image and there we have, the image gets loaded up in a page, notice that we have this inking toolbar here.
So the first thing we could do is say you know what, I want to draw something in this, just in this lime green, we just draw some squiggles in there, we can adjust the size of that, go all the way up there, mess with that there. We can do various strokes, types of strokes so we've got this is more of a brush, we were to make this big we could see that we've got the brush, sort of a spray paint thing in there, we could also do some highlighting in there that's just going to do a big swath over things if we just wanted to highlight something, but you know, that's ugly, so let's just erase it, we could just erase all the ink there.
One cool thing that's built in to the inking control and inking toolbar is this cool ruler. And so I just love this, if I'm on a tablet I can just position this with my fingers, if I'm using a mouse for example on a desktop, I can just use the scroll button change this however I want, so this is really cool. So imaging that you're doing any kind of CAD things or drawings, you're trying to line things up and then all we have to do here is just select what we want, we'll make that sort of medium/large there and watch how easy that is, as I just draw along that ruler and I can just change that ruler however I want.
So this makes it really easy, we could have this image that gets loaded up and we could just say, you know, I don't like this door so we could do that and then say, X through that door we could write a little note here that says "No door", obviously my writing is terrible with the mouse, but we could say no door, but so hopefully you get the gist here and you know, all of this ss you've seen has been enabled just by putting a couple of these advanced controls together.
We're able to have all of this rich functionality, now as a note, I could actually save this entire image. I could save it to disk, I could save it as another image, a different format, I could have even captured all of my strokes and made a little animated gif or video out of that process, but still extremely easy to implement this kind of rich inking functionality, so that's pretty cool. And again this is just the beginning, let's flip back over now that we've added media playback, we've added autosuggest in search as well as inking and inking on top of images let's flip back over to the slide deck and see what we can do to enhance the control experience in our UWP app.
Note: This course was created by Wintellect. We are pleased to host this training in our library.