ItemsControl Customization

One of the cool things about ItemsControls is that you get to separate the data binding and item control logic from the layout logic by specifying the Panel that you want to lay items out.

There are two ways of specifying a Panel for an ItemsControl. One of them is to use the ItemsPanel property, which allows you to specify an ItemsPanelTemplate that is used to instantiate the Panel of choice.

The other method is to have a Panel in the Template for the ItemsControl, and set IsItemsHost to true. This will tell the ItemsControl that this Panel is the one who is hosting the Items for the ItemsControl and laying them out.

The reason why this is so cool is because it allows the application developer to separate out many aspects of a control into separate reusable pieces, each of which is not too tightly bound to the other. For example, the WPF ListBox does not have to stack items vertically, or have every item the same size. It can use any Panel to lay out the items, because what makes it a ListBox does not involve the item layout. Try setting the Panel of a ListBox to a WrapPanel (or some other panel that lays out items automatically) to see this in action.

Comments (3)

  1. Anonymous says:

    That is nice, but I had PAIN trying to make (in XAML) the Items inside an ItemsControl (like menuItem or listbox) show up in more then one Panel (or having mutiple ItemsPresenter in the templ.) or even dynamicly switching between two Panels (with IsItemsHost = true/false trigger setting)…Neither binding nor complicated ControlTemplates with triggers worked 🙁 🙁 🙁

    If have you any suggestions please talk about it or poit me in the right direction! I failded to find anything…



    Sorry for my English!

  2. Anonymous says:

    Nice blog btw!

    One question,  I need a control that shows a collection of picture.  Much like a list box but the items needs to be organized in a page way.  For instance if I have 50 items and I can fit 10 per pages, I need to show 10 on each page.  Along with that I need to not have a scroll bar and I need to have this below the items control:  (<< Showing x-y of z >>).  When user click the << I got previous and when the user click >> I show next.

    Now I think I did part of it correctly.  Here is what I did.

    • I have a my own panel.  It derives from Panel and implements IScrollInfo.  I do nothing on lineleft or line right and on page left and right I move the correct size.  My panel also have 3 properties (Showing from, showingto, totalcount).
    • I have a derived listbox that also have the same 3 property as my panel.  The reason is to have the property available to the user of the control.

    • In my xaml code, I use the derived listbox.  I also define the listbox template to use my panel in a scroll viewer. I also have a border that contains my text (<< showing x – y of z >>).

    • In my c# code that uses the custom list box, on next page and prev page I call the viewer api and that works fine.

    The only thing I hate about this is the property propagation across the custom listbox.

    Is there a better way to do this?



  3. Anonymous says:


    Not sure if its the right place for this – but it is about UI.

    I just acquired a WM5 device (the Treo 750) and the problem is that I can’t read the default fonts (since I use reading glasses ). Although I have WM set up to max font sizes (with ClearType on), when I type in a name and it gives me a choice of phone numbers – I can’t read those options due to the font sizes

    • anyway to customize this???



    PS: Pls reply to