why is my ItemsControl displaying all the items on top of each other

Question

I have an ItemsControl that is displaying all the items on top of each other. The default ItemsPanelTemplate is a StackPanel with a vertical orientation so I don't see why the items are not spread out vertically.

This example has a window which contains a ContentControl. This control is bound to a property called ElementColl which is found in the Resources class. The Resources class is set as the DataContext of the window.

The ElementColl property is of the type Elements. The Elements class contains a property of the type ObservableCollection. The Element object has a Number property and a SomeText property.

The constructor of the Window creates three Element instances and puts them into the collection.

The image at the end shows all three Elements being displayed on top of each other.

<Window x:Class="POC_ObservableCollectionInListbox.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:POC_ObservableCollectionInListbox"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Window.Resources>

        <DataTemplate DataType="{x:Type local:Elements}">
            <ItemsControl ItemsSource="{Binding Collection}">
                <!--<ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Canvas>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="{Binding Path=Number}"/>
                                <Label Content="{Binding Path=SomeText}"/>
                            </StackPanel>
                        </Canvas>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>

    </Window.Resources>
    
    <Grid>
        <ContentControl Content="{Binding ElementColl}"/>
    </Grid>
</Window>

public partial class MainWindow : Window
{
    private Resource _resource = null;
    public MainWindow()
    {
        InitializeComponent();
        _resource = new Resource();
        this.DataContext = _resource;

        Element e1 = new Element();
        e1.Number = 123;
        e1.SomeText = "Apple";
        _resource.ElementColl.Collection.Add(e1);
        Element e2 = new Element();
        e2.Number = 345;
        e2.SomeText = "Bannana";
        _resource.ElementColl.Collection.Add(e2);
        Element e3 = new Element();
        e3.Number = 567;
        e3.SomeText = "Clementine";
        _resource.ElementColl.Collection.Add(e3);
    }
}

public class Element : INotifyPropertyChanged
{
    private Int32 _number = 0;
    public Int32 Number
    {
        get { return _number; }
        set
        {
            _number = value;
            OnPropertyChanged("Number");
        }
    }

    private string _someText = "";
    public string SomeText
    {
        get { return _someText; }
        set
        {
            _someText = value;
            OnPropertyChanged("SomeText");
        }
    }

    #region PropertyChanged
    #endregion PropertyChanged
}

public class Elements : INotifyPropertyChanged
{
    public Elements()
    {
        Collection = new ObservableCollection<Element>();
    }

    private ObservableCollection<Element> _col;
    public ObservableCollection<Element> Collection
    {
        get { return _col; }
        set
        {
            _col = value;
            OnPropertyChanged("Collection");
        }
    }

    #region PropertyChanged
    #endregion PropertyChanged
}


public class Resource : INotifyPropertyChanged
{
    public Resource()
    {
        ElementColl = new Elements();
    }

    private Elements _elements = null;
    public Elements ElementColl
    {
        get { return _elements; }
        set
        {
            _elements = value;
            OnPropertyChanged("ElementColl");
        }
    }

    #region PropertyChanged
    #endregion PropertyChanged
}

Tam Bui Tam Bui · Accepted Answer · 2020-12-16T22:14:36

It's because of your Canvas. Comment out those lines and you'll see your items.

<DataTemplate>
    <!--<Canvas>-->
        <StackPanel Orientation="Horizontal">
            <Label Content="{Binding Path=Number}"/>
            <Label Content="{Binding Path=SomeText}"/>
        </StackPanel>
    <!--</Canvas>-->
</DataTemplate>

Output:

why is my ItemsControl displaying all the items on top of each other

1 Answers