WPF: The ItemsPanelTemplate - controlling how ListBox/ComboBox etc. render their children

Posted on 3/5/2007 @ 1:21 AM in #Silverlight and WPF by | Feedback | 25539 views


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.

Sound off but keep it civil:

Older comments..


On 5/24/2008 5:18:27 PM Shadow said ..
Hi, Could you tell me how to change ListBox.ItemsPanel from code way, many many thanks.


On 7/8/2008 4:38:52 AM DarkDuck said ..
New York, Chicago, Denver and Los Angeles are all US and therefore _not_ international ;-)


On 7/8/2008 7:09:42 AM Sahil Malik said ..
LOL Dark Duck, that depends on where you are too huh? If you're not in the US, then the above 4 are international. No? :)


On 12/20/2012 8:50:29 AM ido said ..
Hi,


Thanks for the information.


I am trying to do one step than that. I will appreciate if you can help me.


I want that if the list that goes horizontal is in the width of the window, than the next item will be shown under the first one and will add second line. (like a thumbnail grid).

Any idea,


Thanks, Ido