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

Question

我有一个 ItemsControl，它显示所有项目在彼此之上。默认的 ItemsPanelTemplate 是一个垂直方向的 StackPanel，所以我不明白为什么项目没有垂直展开。

此示例有一个 window，其中包含一个 ContentControl。此控件绑定到资源 class 中名为 ElementColl 的属性。资源 class 设置为 window 的 DataContext。

ElementColl 属性属于元素类型。元素 class 包含类型为 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>

输出：

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

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

wpf

itemscontrol