Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why don't the items in my ItemsControls layout horizontally?

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?

alt text

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; }
    }
}
like image 936
Edward Tanguay Avatar asked Aug 04 '09 15:08

Edward Tanguay


People also ask

How do you arrange items horizontally in CSS?

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.

How do I move the control layout down?

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.

How do I apply stacked layout to all controls?

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.


1 Answers

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>
like image 137
Kent Boogaart Avatar answered Sep 19 '22 17:09

Kent Boogaart