WPF: The ItemsPanelTemplate - controlling how ListBox/ComboBox etc. render their children
This post is in continuation to an explanation on WPF Templates. 1. ControlTemplate - You use this, when you want to completely redefine the visual appearance of any control. Say, you don‘t want a radiobutton to look like a radiobutton - you want it to look like a smiley instead. Smiling means Checked, and Frowning means Unchecked. You could easily acheive this using ControlTemplate. 2. ItemsPanelTemplate - Is a rather simple kind of template, it lets you control the appearance of the "ItemsPanel" property defined by "ItemsControl" on elements such as ListBox or ComboBox. 3. DataTemplate - is probably the most common kind of template you will use. It lets you change how "Content" is rendered on any control. So if you have an object called "Customer" and you want to define a standard look and feel for "Customer" - you‘d use DataTemplate.
I have been talking about WPF Templates for a while now. First, I talked about what WPF Templates are. Then I demonstrated what a ControlTemplate is, it lets you render out completely custom UI for a control. As an example, I took a bare "Control", and databound it with "System.DateTime", and I got a UI that looked like this -
The above was defined as a completely custom ControlTemplate. Next, I defined a custom business object that was a collection of "LocalTime". LocalTime had two public properties - String (Place) and Time (DateTime). The idea being, using a DataTemplate that used the above Clock ControlTemplate, I was able to convert a UI that looked like this -
.. into a UI that looked like this -
How exactly I did that, can be found here. The final thing I wanted to talk about as far as templates go is, "How to make those clocks appear horizontally?" Okay, so the DataTemplate lets me control an individual ListItem‘s looks. But if I wanted to control the ItemsPanel that renders all of the ListItems, I‘d have to use a ItemsPanelTemplate. This is so darned simple to do, barely 2 steps involved - a) Define the ItemsPanelTemplate in the resources. <ItemsPanelTemplate x:Key="HorizontalClocks"> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> b) Specify that the ListBox should use this ItemsPanel instead - <ListBox ItemsSource="{Binding Source={StaticResource localTimes}}" ItemTemplate="{StaticResource ShowTime}" ItemsPanel="{StaticResource HorizontalClocks}" > </ListBox> Thats it! Run the application, here is how it looks now -
Great, now put that in your Hotel, and you have your very own multi million $ hotel attracting international travellers ready. |
|
|
