Блог

У меня есть ItemsControl, который отображает все элементы друг над другом. ItemsPanelTemplate по умолчанию — это StackPanel с вертикальной ориентацией, поэтому я не понимаю, почему элементы не распределены по вертикали.

В этом примере есть окно, которое содержит ContentControl . Этот элемент управления привязан к свойству с именем ElementColl, которое находится в классе ресурсов. Класс ресурсов задается как DataContext окна.

Свойство ElementColl имеет тип Elements . Класс Elements содержит свойство типа ObservableCollection . Объект Element имеет свойство Number и свойство SomeText.

Конструктор окна создает три экземпляра элемента и помещает их в коллекцию.

Изображение в конце показывает, что все три элемента отображаются друг над другом.

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

Это из-за вашего Canvas . Прокомментируйте эти строки, и вы увидите свои элементы.

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

Вывод: