ItemsControl con orientación horizontal


225

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

Respuestas:


463

Simplemente cambie el panel utilizado para alojar los elementos:

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

¿No necesita agregar IsItemsHost = "True" al StackPanel?
Thomas Levesque

55
Creo que eso solo es necesario si estás replanteando todo el control. Ver msdn.microsoft.com/en-us/library/…
Kent Boogaart

3
La respuesta también es válida para Silverlight
Scott

¿Cómo hacer esto en un archivo de recursos?
Florian

Para hacer esto en un archivo de recursos, debe configurar la tecla x: Key
Tore Aurstad

32

Si bien la respuesta promocionada es excelente, aquí hay una alternativa si desea que los elementos se estiren.

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

Si está utilizando UWP, necesitará UWP-UniformGrid desde aquí: github.com/rickapps/UWP-UniformGrid-Control . Acabo de implementarlo más la solución anterior de NielW. Muy fácil y resuelve el problema.
Gail Foad

9

La respuesta principal es buena, pero no pude hacer que funcione con UserControls. Si necesita UserControls, esto debería ayudar.

ItemsControl con controles horizontales de usuario

Mi version:

<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 enlazar a los datos, tendrá que añadir una ItemsSourcea la ItemsControlen el XAML o detrás de código. También tenga en cuenta que uc:sería el xmlns:uc="NamespaceOfMyControl"declarado en la parte superior del archivo.


No estoy acostumbrado a usar WPF, así que quizás lo que diré es algo muy básico. Descubrí que dentro de un UserControl debería usar "UserControl.Resources" en lugar de "Window.Resources". De todos modos, gracias por la gran respuesta, resolvió mi problema.
Paulo André Haacke

9

Este es un ejemplo de cómo hacer desplazamiento horizontal dentro de un ItemsControl.

En primer lugar, la clase de modelo de vista de la ventana principal utilizada para 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 sea su área de cliente, esto dará como resultado este tipo de diseño, elementos de desbordamiento desplazados horizontalmente:

ingrese la descripción de la imagen aquí

Puede encontrar más detalles en este enlace del blog, incluido un ejemplo sobre cómo hacer el desplazamiento verticalmente:

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.