Why does WrapPanel wrap TextBlocks horizontally but UserControls vertically?

Question

This correctly wraps the TextBlocks horizontally:

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <TextBlock Text="one"/>
        <TextBlock Text="two"/>
        <TextBlock Text="thee"/>
        <TextBlock Text="four"/>
    </WrapPanel>
</StackPanel>

But this incorrectly wraps my UserControls vertically stacked on top of each other (I want them to be horizontally wrapped like the TextBlocks above):

<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
    <WrapPanel Orientation="Horizontal">
        <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <views:CustomerSimpleItemView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </WrapPanel>
</StackPanel>

CustomerSimpleItemView:

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>

What do I have to do in my UserControl so that they wrap horizontally?

added: even if I change all widths and heights in the usercontrol to Auto, it still stacks vertically...:

<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
        <TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>

score 9 · Accepted Answer · edited May 15 '09 at 15:02

In your second sample, try to use the WrapPanel inside a ItemsPanelTemplate for the ItemsControl, otherwise the ItemsControl uses a StackPanel by default and your WrapPanel doesn't do anything as there is nothing to wrap.

   <StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
        <TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
            <ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <views:CustomerSimpleItemView />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
    </StackPanel>

That's exactly what I was looking for, didn't know what to search for, thanks! — Edward Tanguay, May 15 '09 at 15:03

score 3 · Answer 2 · answered May 15 '09 at 15:01

This is happening because the ItemsControl, by default uses a StackPanel in vertical orientation to layout it child objects. So the wrap panel is actually only laying out one child which is the ItemsControl. What you wan't to do is set the ItemsControl's ItemsPanel property so that is uses a WrapPanel for layout. Your code would look like this:

<StackPanel DockPanel.Dock="Top"
            Margin="10"
            HorizontalAlignment="Left">
    <TextBlock Text="Simple WrapPanel:"
               Margin="0 0 0 5" />          
    <!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
    <ItemsControl ItemsSource="{Binding CustomerViewModels}"
                  Width="Auto"
                  BorderThickness="0">
        <!-- This is the important part.  Here we set the ItemsPanel template -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <views:CustomerSimpleItemView />
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>            
</StackPanel>

When I was typing this the previous answer hadn't been added yet. Oh well. — Caleb Vear, May 15 '09 at 15:04

Why does WrapPanel wrap TextBlocks horizontally but UserControls vertically?

2 Answers2