Как привязать ObservableCollection настраиваемых элементов управления к StackPanel?

Question

У меня есть ObservableCollection пользовательских объектов управления.

ObservableCollection<MyStatusBar> MyUIObjects = new ObservableCollection<MyStatusBar>();

Пользовательский элемент управления - это пользовательский элемент управления, подобный этому

public partial class MyStatusBar : UserControl, INotifyPropertyChanged

Каков самый простой способ привязать список элементов управления к панели стека, чтобы они отображались? Сейчас, когда я привязываю их, ничего не появляется. Когда я вручную добавляю элементы управления в коллекцию StackPanel.Children, они появляются, но я хочу сделать это с привязкой.

Answer 1

MyStatusBar не должно быть UserControl, но POCO:

public class MyStatusBar : INotifyPropertyChanged { ... }

Затем вы можете использовать ItemsControl для привязки к ObservableCollection<MyStatusBar> и определить ItemTemplate в том месте, где вы помещаете UserControl для рендеринга для каждого объекта POCO:

<ItemsControl ItemsSource="{Binding MyUIObjects}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:MyStatusBarUserControl />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ItemsPanelTemplate определяет панель - в данном случае StackPanel - которую ItemsPresenter создает для макета элементы в ItemsControl.

Обратите внимание, что MyStatusBar и MyStatusBarUserControl относятся к разным типам. Модель представления не должна создавать или открывать элементы пользовательского интерфейса. Он должен открывать объекты данных. Затем вы создаете элемент пользовательского интерфейса для каждого объекта данных, используя ItemTemplate.

Answer 2

Пожалуйста, посмотрите фрагмент кода. Замените Itemcontrol любыми элементами управления, такими как список, иначе вы все еще можете использовать Itemscontrol

<ItemsControl ItemsSource="{Binding MyUIObjects}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>