I want to have an ItemsControl in which the items are displayed horizontally.
However, no matter if I use StackPanel with Orientation="Horizontal" or WrapPanel, they still stack up.
How can I get items in an ItemsControl to be horizontally?
XAML:
<Window x:Class="TestItemsControl2938.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="400">
<Window.Resources>
<DataTemplate x:Key="CustomerListTemplate">
<StackPanel Width="100" Background="#aaa" Margin="5">
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal" Background="Orange">
<ItemsControl ItemsSource="{Binding CustomerList}" ItemTemplate="{StaticResource CustomerListTemplate}"/>
</StackPanel>
<WrapPanel Background="Yellow">
<ItemsControl ItemsSource="{Binding CustomerList}" ItemTemplate="{StaticResource CustomerListTemplate}"/>
</WrapPanel>
</StackPanel>
</Window>
Code-Behind:
using System.Windows;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace TestItemsControl2938
{
public partial class Window1 : Window, INotifyPropertyChanged
{
private ObservableCollection<Customer> _customerList = new ObservableCollection<Customer>();
public ObservableCollection<Customer> CustomerList
{
get{ return _customerList; }
set
{
_customerList = value;
OnPropertyChanged("CustomerList");
}
}
public Window1()
{
InitializeComponent();
DataContext = this;
CustomerList.Add(new Customer { FirstName = "Jim", LastName = "Jones" });
CustomerList.Add(new Customer { FirstName = "Joe", LastName = "Adams" });
CustomerList.Add(new Customer { FirstName = "Jake", LastName = "Johnson" });
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Customer
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Street { get; set; }
public string Location { get; set; }
public string ZipCode { get; set; }
}
}
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Select any control in the layout. Press and hold the CTRL key. Drag the layout by using the layout selector at the upper-left corner of the layout.
If you want to add other controls to the same layout, hold down the SHIFT key and also select those controls. Do one of the following: On the Arrange tab, in the Table group, click Tabular or Stacked. Right-click the selected control or controls, point to Layout, and then click Tabular or Stacked.
Wrong way around. Customize the panel that the ItemsControl uses to contain its items:
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With