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:

enter image description here

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?

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. — Xtr, Jul 18 '13 at 08:45

score 16 · Answer 1 · answered Jan 07 '12 at 22:32

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...

Showing a collection of items inside of a ItemsControl horizontally

1 Answers1