ItemsControl, ItemsPanel and ItemsPresenter (Silverlight, XAML)

Question

I'm utterly confused by these 3 terms, when to use which? What's the relationship and they are children of which controls?

Is it correct to say this is the tree:

ItemsControl > ItemsPresenter > ItemsPanel

Norling

Answer 1

ItemsControl is conceptually a control that houses items. Try to simply think of this control as a holder for zero or more objects.

ItemsPresenter is a bit tougher to explain, but this is part of the ItemsControl template that will define where the items are placed within it. Your ItemsControl's template can be anything you like, say a Grid with some pretty pictures around it, inside this template, you would place the ItemsPresenter where ever you want your items to be, say right in the middle of your grid. (this example is taken from msdn and simplified for ease of reading)

<Style TargetType="HeaderedItemsControl">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
          <Grid>
            <Rectangle Stroke="Black" Fill="Red"/>
            <ItemsPresenter Margin="2,0,0,0"/>
          </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The ItemsPanel is the panel (or container) that controls the layout of the items in your ItemsControl. So if you want your items that you have added to your ItemsControl to display in a horizotal way, then yor items panel could simply be a StackPanel with its Orientation property set to Horizontal.

This all make sense?

Scotticism

If you could give an example of all 3 in use.. will be great. The msdn example which I came across before is not that great (ie it bloody sucks) So I think the itemspresenter is shifting the ControlTemplate which can contain a ItemsPanel for containing more items within the ControlTemplate? – Norling

is this a conceptual question or are you having trouble trying to create your own ItemsControl? – Scotticism

conceptual, but would just like to understand it well. – Norling

Ok, so the ControlTemplate will define the look of your ItemsControl as it is a template for a control. Inside the ControlTemplate is where you place the ItemsPresenter this is a place holder control that will insert (or "replace at runtime") the ItemsPanel which maybe a StackPanel, Grid (or whatever) that holds your items. The thing to remember about SL is that its built to be "lookless" which basically means that its all about behavior and not a locked down look and feel. – Scotticism

...sorry didnt mean to hit enter... Essentially, all the control classes like a Button or an ItemsControl are defined as having behavior, not tied to a specific look (for example, a Button is "something you Click", not "a thing that looks like this that you Click"). This means, however, that there must be plenty of different template hooks in place to build up the eventual look of whatever you are creating, such as a listbox, which is what leads to the common confusion around the massive amounts of templates and presenters. – Scotticism

Answer 2

I think that this pretty much explains how the things are done by Silverlight: ItemsPanelTemplate Class: Specifies the panel that the ItemsPresenter creates for the layout of the items of an ItemsControl. ItemsPanelTemplate Class

 <Style TargetType="local:myItemsControl">
     <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Setter.Value>
     </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:myItemsControl">
              ....
               <ItemsPresenter />
              ....

Basically, the ItemPresenter (specified in the Template) will be replaced with whatever is specified in the ItemsPanelTemplate.

So, the Template can be extended to include a header and all child will be placed under this header:

<Grid> <TextBlock Text="Header"/>   <ItemsPresenter /> </Grid>

Mental