ItemsControl con orientamento orizzontale

Question

Conosci i controlli ereditati da ItemsControl con orientamento orizzontale degli articoli?

Answer 1

semplicemente cambiare il pannello utilizzato per ospitare gli oggetti:

<ItemsControl ...> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Answer 2

La risposta superiore è buona, ma non riuscivo a farlo funzionare con controlli utente. Se hai bisogno di UserControls, questo dovrebbe aiutare.

ItemsControl with Horizontal Usercontrols

La mia versione:

<Window.Resources> 
    <DataTemplate x:Key="ItemTemplate2"> 
     <StackPanel> 
      <uc:MyUserControl MinWidth="20" BorderBrush="Black" BorderThickness="0.1" /> 
     </StackPanel> 
    </DataTemplate> 

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> 
     <StackPanel Orientation="Horizontal" Margin="0,0,0,0"/> 
    </ItemsPanelTemplate> 
</Window.Resources> 

<StackPanel> 
    <ItemsControl x:Name="list_MyControls" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Margin="0,8,0,0" 
        ItemTemplate="{StaticResource ItemTemplate2}" 
        ItemsPanel="{StaticResource ItemsPanelTemplate1}" /> 
</StackPanel> 

Per associare ai dati, è necessario aggiungere un ItemsSource alla ItemsControl in XAML o il codice dietro. Si noti inoltre che uc: sarebbe il xmlns:uc="NamespaceOfMyControl" dichiarato nella parte superiore del file.

Answer 3

Mentre la risposta promossa è ottima, ecco un'alternativa se desideri che gli articoli si allunghino.

<ItemsControl.ItemsPanel>        
    <ItemsPanelTemplate> 
     <UniformGrid Rows="1" /> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 

Answer 4

Questo è un esempio di come eseguire lo scorrimento orizzontale all'interno di ItemsControl.

In primo luogo la classe viewmodel della finestra principale utilizzata per ottenere/impostare l'elenco di elementi che si desidera visualizzare.

MainWindowViewModel.cs

using System.Collections.Generic; 

namespace ItemsControl 
{ 
    public class Item 
    { 
     public Item(string title) 
     { 
     Title = title; 
     } 

     public string Title { get; set; } 
    } 

    public class MainWindowViewModel 
    { 
     public MainWindowViewModel() 
     { 
     Titles = new List<Item>() 
     { 
      new Item("Slide 1"), 
      new Item("Slide 2"), 
      new Item("Slide 3"), 
      new Item("Slide 4"), 
      new Item("Slide 5"), 
      new Item("Slide 6"), 
      new Item("Slide 7"), 
      new Item("Slide 8"), 
     }; 
     } 

     public List<Item> Titles { get; set; } 
    } 
} 

La finestra principale di XAML per la vista:

MainWindow.xaml

<Window x:Class="ItemsControl.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:ItemsControl"  
     mc:Ignorable="d" 
     Title="MainWindow" Height="400" Width="400"> 

    <Window.DataContext> 
     <local:MainWindowViewModel /> 
    </Window.DataContext> 

    <Grid Margin="5"> 
     <ScrollViewer 
      VerticalScrollBarVisibility="Disabled" 
      HorizontalScrollBarVisibility="Auto"> 

      <ItemsControl 
       x:Name="SearchResultList"     
       ItemsSource="{Binding Titles}"> 

       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel Orientation="Vertical"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Border 
          Margin="5" 
          BorderThickness="1" 
          BorderBrush="Aqua"> 

          <TextBlock 
           Text="{Binding Title}" 
           HorizontalAlignment="Center"        
           VerticalAlignment="Top" 
           FontSize="12" 
           TextWrapping="Wrap" 
           TextAlignment="Center" 
           FontWeight="DemiBold" 
           Width="150" 
           Height="150" /> 
         </Border> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 

      </ItemsControl> 
     </ScrollViewer> 

    </Grid> 
</Window> 

A seconda del grado/largo spazio clienti è , questo si tradurrà in questo tipo di layout, gli elementi di overflow scorrono orizzontalmente:

Maggiori dettagli possono essere trovati a questo link blog, tra cui un esempio su come fare lo scorrimento in verticale:

http://www.technical-recipes.com/2017/how-to-orient-wrappanel-items-within-itemscontrol-lists-vertically-and-horizontally/