为什么我的 ItemsControl 将所有项目都显示在彼此之上

Question

我有一个 ItemsControl 将所有项目叠加显示。默认的 ItemsPanelTemplate 是一个垂直方向的 StackPanel，所以我不明白为什么项目没有垂直展开。

此示例有一个包含 ContentControl 的窗口。此控件绑定到一个名为 ElementColl 的属性，该属性位于 Resources 类中。 Resources 类被设置为窗口的 DataContext。

ElementColl 属性属于元素类型。 Elements 类包含 ObservableCollection 类型的属性。 Element 对象有一个 Number 属性和一个 SomeText 属性。

Window 的构造函数创建三个 Element 实例并将它们放入集合中。

最后的图片显示了所有三个元素相互叠加显示。

<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
}

Answer 1

因为你的Canvas。注释掉这些行，你就会看到你的项目。

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

输出：