ItemsControl con orientación horizontal

Question

¿Conoces algún control heredado de ItemsControl que tenga una orientación horizontal de los elementos?

Answer 1

basta con cambiar el panel utilizado para albergar los artículos:

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

Answer 2

La respuesta más común es buena, pero no pude conseguir que funcione con UserControls. Si necesita UserControls, esto debería ayudar.

ItemsControl with Horizontal Usercontrols

Mi versión:

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

para unirse a los datos, tendrá que añadir una ItemsSource a la ItemsControl en el XAML o código atrás. También tenga en cuenta que uc: sería el xmlns:uc="NamespaceOfMyControl" declarado en la parte superior del archivo.

Answer 3

Si bien la respuesta promocionada es excelente, aquí hay una alternativa si desea que los artículos se extiendan.

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

Answer 4

Este es un ejemplo de cómo hacer desplazamientos horizontales dentro de ItemsControl.

En primer lugar, la ventana principal viewmodel class solía obtener/establecer la lista de elementos que deseamos mostrar.

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 ventana principal xaml para 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> 

Dependiendo de qué tan alto/ancho de su área de cliente es , esto dará como resultado este tipo de diseño, elementos de desbordamiento desplazados horizontalmente:

Más detalles se pueden encontrar en este enlace del blog, incluyendo un ejemplo de cómo hacer el desplazamiento vertical:

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