2012-01-07 12 views
10

Ecco il markup XAML:Mostrando una collezione di oggetti all'interno di un ItemsControl orizzontale

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

e questo è come appare:

enter image description here

mi piacerebbe questi elementi ad apparire orizzontalmente e scorre verso il basso quando raggiunge il bordo dello StackPanel.

Sembra che attualmente, ogni elemento della mia raccolta DataContext stia creando il proprio StackPanel, quindi non è quello che voglio.

Qualche suggerimento?

+4

Se l'unica risposta a questa domanda ha funzionato per te, allora accettala. Se non ha quindi fornire un feedback sul motivo per cui non funziona per il tuo problema. La risposta ha già funzionato per un gruppo di altre persone, incluso me stesso. – Xtr

risposta

16

Se si cambia il modello ItemsPanel, o un WrapPanel o StackPanel orizzontale, è possibile ottenere l'effetto siete dopo ...

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

In questo frammento di codice, l'ItemsPanel è impostata su un WrapPanel orientato in senso orizzontale. Il ItemTemplate includerebbe l'associazione e lo stile che hai già ...