¿Conoces algún control heredado de ItemsControl que tenga orientación horizontal de elementos?
¿Conoces algún control heredado de ItemsControl que tenga orientación horizontal de elementos?
Respuestas:
Simplemente cambie el panel utilizado para alojar los elementos:
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
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>
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 ItemsSource
a la ItemsControl
en 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.
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:
Puede encontrar más detalles en este enlace del blog, incluido un ejemplo sobre cómo hacer el desplazamiento verticalmente: