Showing a collection of items inside of a ItemsControl horizontally

Question

Here is the XAML markup:

        <ScrollViewer Grid.Column="1" Grid.Row="2" HorizontalScrollBarVisibility="Disabled" Width="990">
            <StackPanel Margin="50 0 0 40">                    
                <ItemsControl x:Name="streamList" ItemsSource="{Binding StreamInformations}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="10" Orientation="Horizontal" >
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{Binding ImageUrl}" Height="60" />
                                    <StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
                                        <TextBlock Foreground="Black" Text="{Binding ChannelName}" FontSize="12" />
                                        <TextBlock Foreground="#999" Text="{Binding PlayerName}" FontSize="10" />
                                        <TextBlock Foreground="#999" Text="{Binding ViewCount}" FontSize="10" />
                                    </StackPanel>                                        
                                </StackPanel>                                   
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>

And this is how it looks:

I'd like these items to appear horizontally and flow down when it reaches the edge of the StackPanel.

It seems that currently, each item in my DataContext collection is creating it's own StackPanel, so this isn't what I want.

Any suggestions?

Petronel

If the only answer on this question worked for you then accept it. If it did not then provide feedback as to why it does not work for your problem. The answer has worked for a bunch of other people already, including myself. – Dosh

Answer 1

If you change the ItemsPanel template to either a WrapPanel or horizontal StackPanel, you can achieve the effect you are after...

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <!--other stuff here--> 
    </ItemsControl.ItemTemplate>
</ItemsControl>

In this snippet, the ItemsPanel is set to a WrapPanel oriented horizontally. The ItemTemplate would include the binding and styling you already have...

Acetify