Отображение коллекции элементов внутри ItemsControl по горизонтали - PullRequest
Новая
       51

Отображение коллекции элементов внутри ItemsControl по горизонтали

11 голосов
/ 08 января 2012

Вот разметка XAML: 

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

И вот как это выглядит:

enter image description here

Я бы хотел, чтобы эти элементы отображались горизонтально истекают, когда он достигает края StackPanel.

Кажется, что в настоящее время каждый элемент в моей коллекции DataContext создает свою собственную StackPanel, так что это не то, что мне нужно.

Есть предложения?

1 Ответ

16 голосов
/ 08 января 2012

Если вы измените шаблон ItemsPanel на WrapPanel или горизонтальную StackPanel, вы сможете добиться эффекта, который вам нужен после ... 

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

В этом фрагменте ItemsPanel установлен на WrapPanel, ориентированный горизонтально,ItemTemplate будет включать в себя привязку и стиль, которые у вас уже есть ...

...