WPF привязка данных к наблюдаемомуколлекции

Question

Может кто-нибудь дать мне небольшую помощь с этим пожалуйста Я пытаюсь реорганизовать приложение для MVVM и лучше использовать привязку данных, но я борюсь с небольшой проблемой.

У меня есть класс ViewModel

public class MainWindowViewModel 
{ 
    public ObservableCollection<DiagramElement> Elements { get; set; } 


    public MainWindowViewModel() 
    { 
     AppMachineList = new ListOfMachines(); 
     Elements = new ObservableCollection<DiagramElement>(); 
    } 
} 

, в котором я создать ObservableCollection класса DiagramElement.

public class DiagramElement : Button 
{ 
    private Item linkedItem; 

    public Item LinkedItem 
    { 
     get { return this.linkedItem; } 
     set 
     { 
      this.linkedItem = value; 
      this.DataContext = this; 
      this.Template = (ControlTemplate)FindResource("ItemTemplate"); 

     } 
    } 

Класс DiagramElement просто расширяет класс кнопок и добавляет собственный контрольный шаблон.

Назад в мой класс MainWindow.xaml.cs, я создаю экземпляр модели просмотра и из нее заполняю стекную панель в MainWindow.xaml из ObservableCollection.

public partial class MainWindow 
{ 
    public MainWindow() 
    { 

     InitializeComponent(); 
     MainWindowViewModel vm = new MainWindowViewModel(); 
     vm.LoadMachines(); 

     foreach(DiagramElement d in vm.Elements) 
     { 
      ItemList.Children.Add(d); 
     } 

    } 
} 

<StackPanel x:Name="ItemList" Orientation="Vertical"></StackPanel> 

То, что я хочу сделать, это, покончит с петлей Еогеасп и призывы к ItemList.Children.Add(). И замените это на привязку к Elements в viewmodel, как показано ниже.

public partial class MainWindow 
{ 
    public MainWindow() 
    { 

     InitializeComponent(); 
     MainWindowViewModel vm = new MainWindowViewModel(); 
     vm.LoadMachines(); 

     this.DataContext = vm; 

    } 
} 

<StackPanel x:Name="ItemList" DataContext="{Binding Path=Elements}"</Stackpanel> 

Я не могу получить элементы, которые нужно добавить в Stackpanel, привязка не работает. Любая помощь с благодарностью получила.

Answer 1

FYI, имеющий ViewModel с набором элементов пользовательского интерфейса (в вашем случае, кнопки), нарушает принципы MVVM - пользовательский интерфейс и модель не должны смешиваться таким образом.

Но непосредственной проблемой является то, что вы не можете использовать StackPanel - это контейнер управления, но не поддерживает привязку к спискам элементов. Вам нужно использовать какой-то ретранслятор, например, ItemsControl.

<ItemsControl ItemsSource="{Binding Path=Elements}"> 
    <ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <!-- your DiagramElement should go here, something like 
     <DiagramElement LinkedItem={Binding Path=SomePropertyOnYourRevisedElement} /> 
     --> 
    </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Но есть еще много работы. DiagramElement должен иметь LinkedItem, преобразованный в DependencyProperty (это много примеров этого онлайн) и Elements должен быть списком какого-либо объекта модели, который просто хранит свойства, необходимые для DiagramElement (без материала UI).