WPF use a template system to define UI for controls and data. When a custom template is available, WPF replaces the default UI with the templated interface. This tutorial shows how to add a define a template for the ListBox data.
- [Instructor] Another power feature of WPF is a template. The idea behind a template is that you define an alternate UI in ZAML. It's like a subset of ZAML, and then you can apply that template to other parts of UI. So there are different kinds of templates in WPF. There's a control template. The idea here is that you create a control, and then when you create the control, you define what's known as the default template, and that's what shown in the control. You can then go and define an alternate template, this would be a control template, and then you tell WPF to use your template not the default template, so every time it renders that control, it'll use this alternate UI.
I'll show you how to do this in the last chapter in this course. The template I'll look at in this video is called a data template. Here I'll be applying the template to a date source. You remember that my list box is bound to a list of T. There's one row in the list box for each row inside my data source. So now what I'll do is I'll define a data template, and then I'll tell WPF about it, and then every time a row is generated inside the list box, it will apply my data template, and this allow me to do really rich UI, and define it any way I want.
The list box is responsible for the scroll bars. The list box is responsible for letting me select the items, or letting the user select the items. Then I can be responsible for filling a fancy or pretty UI for my data. First thing I'll do is add an end tag for my list box, and then I'll type in Listbox.ItemTemplate. Now this is a special syntax in WPF called a property element. And then inside this property element, I'll define another element, the data template element.
So let's take a look at what we have so far. This is specifying that there is a new set of UI for each item in the list box, the item template, and then inside here, I define the data template itself, and then on line 13, I define any valid WPF ZAML. In this case, I'll use a stack panel. Then inside the stack panel, I'll create an image and a text block. Next I need to tell the binding engine to retrieve the information from my data source.
Let's review what I have. We'll go over to the tour stop class, and I would like to bind the text block to the name property, and I'd like to bind the image source to the image URI property. So now I'm ready to do the binding, and bindings are implemented in ZAML using some nicel to markup extension. Markup extension starts with a curly brace here, and that's telling WPF that it needs to look up a markup extension which is a (mumbles) class, and then run that class at run time to get the results.
So the binding engine will get the results, and put it in this image source. So you use the word binding, that's the binding markup extension, and then here you provide different parameters to the binding markup extension. The parameter I need, which is the 12 parameter is the name of the property I'm binding to, the data source property. And for the text block, I'll do the same. I'll hold down the space bar and drag my UI into view.
And see that nothing is showing up in here yet. Remember that the binding extension is going to happen at run time, so I need to actually run the application to see my results. There's each row. You'll see that the list box is doing what list box do. It allows me to select items, and I get a mouse hover effect when I'm hovering over the row, and I can select it. And then you can see my image in my text. There's some problems with the way this looks though. It looks a little sloppy. These pictures aren't the same size, the text is too close to the picture, so let's go fix that.
I'll set the min width property to 300, and then I'll also set the stretch property to uniform to fill. And then for the text block, I'll do a vertical alignment of center. Let's see how that looks. I'll press F5 to run the application. That's better. The text is centered, the pictures are all one consistent size now. I do want to move the text away from the edge of the image though, and I can do that with a margin property.
This will set a 20 pixel margin on the left top right and bottom. That looks much nicer. You're probably thinking to yourself, it's a shame that I have to keep running the application every time I want to view this. That's a limitation of the way I'm doing my binding. I'm setting the binding in my code, and then I'm setting my data template in my ZAML. There are ways around this. I can use a ZAML only data source, and I can use what's called design time data, but it's a topic that will have to wait for another day.
- Why choose Windows Presentation Foundation?
- Exploring the project types
- Creating a WPF project in Visual Studio
- Exploring assemblies and parts
- Using the XAML editor
- Creating the UI, including tabs, details, and controls
- Using data binding
- Adding styles
- Writing interaction code
- Using control templates, 3D parts, and effects