WPF ItemsControl layout issue

Question

I have the following XAML which produces a vertical output of several TextBlocks and ListBoxes, however I want to change it so that it will go horizontally.

<StackPanel>
    <TextBlock Margin="5" Text="Collated Results" FontWeight="Bold"
               VerticalAlignment="Center" DockPanel.Dock="Top"/>
    <ScrollViewer VerticalScrollBarVisibility="Auto" 
                  HorizontalScrollBarVisibility="Auto" CanContentScroll="True">
        <ItemsControl x:Name="lstCollatedSensorData">
            <ItemsControl.ItemTemplate>
                <DataTemplate>                                        
                    <StackPanel>
                        <TextBlock Margin="5" Width="100" Text="{Binding Name}"/>
                        <ListBox Margin="5" Width="100" 
                                 ItemsSource="{Binding CollatedResults}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>

The Textbox and Listbox in the StackPanel show correctly individually, however, each iteration is placed on top of each other, where I want them to be placed side by side horizontally. I have tried inserting WrapPanels in various locations without success, so there is obviously something that I am missing. It almost seems like the ScrollViewer is forcing the ItemsControl to be vertical rather than horizontal.

This is already answered [here][1]. [1]: http://stackoverflow.com/questions/1052342/itemscontrol-with-horizontal-orientation — arpl, Nov 09 '13 at 11:22

score 1 · Accepted Answer · answered Nov 09 '13 at 12:25

1

Put a stackpanel with orientation horizontal in the ItemsControl's ItemsPanel

<ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal"/>
     </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

answered Nov 09 '13 at 12:25

Alberto

15,626
9
43
56

score 0 · Answer 2 · answered Nov 09 '13 at 11:22

0

Try setting Orientation on the stackpanel like so

StackPanel Orientation="Horizontal"

answered Nov 09 '13 at 11:22

Rohit Sharma

6,136
3
28
47

Please see what i highlighted in Bold (not the stackpanel) – Rohit Sharma Nov 18 '13 at 07:18

WPF ItemsControl layout issue

2 Answers2