To help understand the problem, here are the default templates (extracted using MS Blend) of the
ItemsControl
:
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
<Style x:Key="ItemsControlStyle1" TargetType="{x:Type ItemsControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The
ItemsPanel
must be a container control. By putting the
StackPanel
inside a
ScrollViewer
, the
ItemsControl
is attempting to put the
ItemsPresenter
content iside the
ScrollViewer
Content. The error that you are seeing is that more than one control is inside the
ScrollViewer
content where their is already a
StackPanel
- invalid.
So, to fix, you have two options:
1. Wrap the
ItemsControl
inside a
ScrollViewer
control:
<ScrollViewer>
<ItemsControl Name="ic1" Height="60" Width="300" Margin="80,70,412,249">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type Button}">
<Button Background="Red" Content="{Binding}" Margin="0,0,5,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<system:String>Item #1</system:String>
<system:String>Item #2</system:String>
<system:String>Item #3</system:String>
<system:String>Item #4</system:String>
<system:String>Item #5</system:String>
</ItemsControl>
</ScrollViewer>
** This is the solution that I mentioned earlier above.
2. Wrap the
ItemsPresenter
in the
ItemsControl
Style (body):
<Window.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
<Style x:Key="ItemsControlStyle1" TargetType="{x:Type ItemsControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ItemsControl ItemsPanel="{DynamicResource ItemsPanelTemplate1}" Style="{DynamicResource ItemsControlStyle1}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type Button}">
<Button Background="Red" Content="{Binding}" Margin="0,0,5,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<system:String>Item #1</system:String>
<system:String>Item #2</system:String>
<system:String>Item #3</system:String>
<system:String>Item #4</system:String>
<system:String>Item #5</system:String>
</ItemsControl>
</Grid>
Note: I have removed the fixed height from the
StackPanel
Control in the
ItemsPanelTemplate
- if not done, it will cause layout and debugging issues later on.