2012-01-07 22 views
10

Oto znaczników XAML:Pokazuje kolekcję przedmiotów wewnątrz ItemsControl poziomo

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

I tak to wygląda:

enter image description here

Chciałbym te elementy pojawiają poziomo i spływają po dotarciu do krawędzi StackPanel.

Wygląda na to, że obecnie każdy element w mojej kolekcji DataContext tworzy własny StackPanel, więc nie jest to tym, czego chcę.

Wszelkie sugestie?

+4

Jeśli jedyna odpowiedź na to pytanie zadziałała, zaakceptuj to. Jeśli nie dostarczysz informacji zwrotnych, dlaczego nie działa dla Twojego problemu. Odpowiedź zadziałała już dla wielu innych osób, w tym dla mnie. – Xtr

Odpowiedz

16

Jeśli zmienisz szablon ItemsPanel do albo WrapPanel lub poziomą StackPanel można osiągnąć efekt jesteś po ...

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

W tym fragmencie The ItemsPanel jest ustawiony na WrapPanel zorientowanej poziomo. Element ItemTemplate zawiera wiązanie i stylizację, które już masz ...