CODEWITHSUNDEEP
wpfxamlpaneldatatemplateitemscontrol
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

Showing a collection of items inside of a ItemsControl horizontally

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?

Upvotes: 11

Views: 12454

Answers (1)

Gayot Fow
Gayot Fow

Reputation: 8792

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

Upvotes: 16

Related Questions