Once a template is defined, use the StaticResource markup extension to apply the template to the bound data.
- [Host] I've defined a data template for my list box. You'll see it here on line 12. I set the item template and I've defined this data template. And it's not a bad looking data template. It's got a stack panel, it's got an image and a text box. But my finished UI for this application is much more sophisticated than that. I need a tour stop, I need a checkbox, I need multiple text blocks and I need to arrange them in a more artful fashion on this screen. What I can do is pick somebody on our team that's got a good design sense, and have them build a data template.
We might even be lucky enough to have a designer on our team that can build this template for us. Now, instead of taking the template and putting it here inside the list box, we should build this template in a reusable fashion. You know how when you're writing code if you find yourself writing the same code more than one place? You want to refactor it and put in a common method. Well, it's the same in XAML. If you use the same data template on three different list boxes in three different areas of your application, you can move those into a centralized resource and then reuse that resource from multiple spots.
That's what I'm going to do here. I moved the template into a global area. First step is to delete the item template here and tour stops view. Now I'm just back to having a list box. Then I have to decide at what level I want to define a resource. I could define it up here at the user control but then it would only be useable within the user control. So the place I'm going to put it is at the application level here in App.xaml. There it is. On line six I have a section called Application.Resources, inside that are all the different resources I've defined.
In this case, there's only one. There's about 90 lines of XAML in here that are defining the data template. And one of the roles of resources is that this is really a resource dictionary. And if you know anything about dictionaries you that when you put an item in a dictionary you always have to provide a key. That's what I'm doing on line seven. The key is TourTemplate. Now I'll go back to TourStopsView, find the item template property, and I'll be able to apply all 90 lines of that XAML in that template, with a single line here inside my UserControl.
Next step is to tell WPF to find that resource. So I know the key - I'll use a markup extension called a StaticResource markup extension to find that resource. Visual Studio looks through all of the defined resources - there's only one in this project - and it shows me the list here. So I'll choose this from this drop-down, and that's it, that's all the text I have to have here in my XAML. And with that one change, I get a much more sophisticated-looking UI.
So now I've got a number here with a circle around it. I've got my image. I've got a headline and the details. I've got several buttons over here - one for mapping, one for calling the tour stop and I have a checkbox down here for the customer to add the tours. So let's go take a look at the template. Back to App.xaml. You see, on line seven I've defined the data template. Then I created a grid. Inside of the grid I created a number of columns, four columns, and I created four rows.
And then down here, we're just using binding principles. I've defined a text block and set a bunch of properties on it. Told it which rows and which columns to put in the grid, and set a margin. And then the key thing, of course for us is line 23, the text from that is coming from the stop number. Down here, I'm drawing ellipse. None of the properties in this ellipse are data-bound. Then there's my image. My text block - that's the same as what I used in the stack panel earlier. Then down here are the rest of my text blocks.
There's one here, there's a stack panel, there's the buttons - you see that I'm binding the content property of this button to the phone number. And then finally, I have a check box down here. And you'll see that that's not bound. It should be bound to the boolean property inside my view, but binding the booleans and checkboxes is a little bit complex. So we'll save that discussion for another day.
- Recognize the pluses of choosing Windows Presentation Foundations over other Microsoft UI frameworks.
- Evaluate the different options available with Windows Presentation Foundation project types.
- Devise a Windows Presentation Foundation project in Visual Studio.
- Break down the assemblies and parts of Windows Presentation Foundations.
- Use XAML editor and editor settings.
- Selecting data binding to present data.
- Compiling interaction code for an application.
- Use control templates, 3D parts, and effects in Windows Presentation Foundations.