WPF - ItemTemplate not acting as expected

Question

I have a UserControl which I'm using to display a list of UIElements. The control consists of a single ItemsControl with it's ItemPanelTemplate switched for a horizontal StackPanel, its ItemsSource bound to a DependencyProperty exposed by the UserControl and its ItemTemplate set in the UserControl.Resources.

Everything works fine except the ItemTemplate never get's applied and I can't see why. The full source is below.

UserControl.xaml -

<UserControl x:Name="UC" x:FieldModifier="private" x:Class="ContentSliderControl.ContentSlider"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>

    <DataTemplate x:Key="pageTemplate">
        <Border CornerRadius="10" Padding="5" Height="200" Width="200" Background="#333">
            <ContentControl Content="{Binding}"/>
        </Border>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="template">
        <StackPanel IsItemsHost="True"
            Orientation="Horizontal"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
    </ItemsPanelTemplate>
</UserControl.Resources>

<ItemsControl ItemsPanel="{StaticResource template}" 
              ItemTemplate="{StaticResource pageTemplate}" 
              ItemsSource="{Binding ElementName=UC,Path=Pages}"/>

UserControl.xaml.cs -

[ContentProperty("Pages")]
public partial class ContentSlider : UserControl
{


    public List<UIElement> Pages
    {
        get { return (List<UIElement>)GetValue(PagesProperty); }
        //set { SetValue(PagesProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Pages.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty PagesProperty =
        DependencyProperty.Register("Pages", typeof(List<UIElement>), typeof(ContentSlider), new UIPropertyMetadata(null));



    public ContentSlider()
    {
        InitializeComponent();
    }
}

}

I consume the control in my main window like this -

    <slider:ContentSlider >
    <slider:ContentSlider.Pages>
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
        <Button>4</Button>
    </slider:ContentSlider.Pages>
</slider:ContentSlider>

The buttons appear fine but not inside the 200px square border.

Any help would be greatlly appriciated. Thanks.

score 6 · Answer 1 · answered Mar 19 '09 at 18:24

Nir is correct, ItemsControl will add item directly to its Panel if they are UIElements. I couldn't find any mention of this behavior in MSDN, but Dr. WPF mentions it in his article on item containers:

If a UIElement is added to the Items collection of an explicit ItemsControl instance (as opposed to an instance of a derived class like ListBox), it will become a direct child of the items panel. If a non-UIElement is added, it will be wrapped within a ContentPresenter.

Your solution is probably to use a ListBox instead, and set ItemContainerStyle to a new Style for ListBoxItem, and in that style, use a ControlTemplate with your Border in it.

Well isn't that some crazy behavior. Thanks for that Robert, I'll give Nir the correct answer then and vote you up. Shame you can't have more than one correct answer eh? — EightyOne Unite, Mar 20 '09 at 08:53

score 4 · Answer 2 · answered Aug 11 '09 at 03:37

Nir is right, this custom ItemsControl implementation will solve the issue and let use your own ItemTemplate:

public class ItemsControlForUIElement : ItemsControl
{
   protected override DependencyObject GetContainerForItemOverride()
   {
       return new ContentPresenter();
   }
   protected override bool IsItemItsOwnContainerOverride(object item)
   {
       return false;
   }
}

score 4 · Accepted Answer · answered Mar 19 '09 at 11:41

4

It's because it's a list of UIElement, the item template is only applied if the items can't be displayed directly.

answered Mar 19 '09 at 11:41

Nir

29,306
10
67
103

Also, if i swap the ItemsControl for a Listbox then they render as expected so I'm not sure you're right there – EightyOne Unite Mar 19 '09 at 11:53
Seems I have to eat my words! Thanks Nir. – EightyOne Unite Mar 20 '09 at 08:54

score 2 · Answer 4 · edited May 29 '11 at 17:05

2

Robert Macnee nailed the reason on the head. His solution involves using the control template which might be overkill for a given scenario. Alternatively, use a ListBox - set the ItemContainerStyle to a new Style for ListBoxItem, and in that style, set the ContentTemplate to the DataTemplate that you wanted to use in the ListBox ItemTemplate.

edited May 29 '11 at 17:05

axel22

32,045
9
125
137

answered May 28 '11 at 22:46

Brian

21
1

score -1 · Answer 5 · edited May 29 '11 at 17:05

-1

If you set the DataType property on the DataTemplate it would start working.

edited May 29 '11 at 17:05

axel22

32,045
9
125
137

answered Mar 20 '09 at 17:51

Steven

4,826
3
35
44

WPF - ItemTemplate not acting as expected

5 Answers5

Linked