WPF数据绑定到observableCollection

时间:2014-11-18 21:15:00

标签: wpf data-binding

有人可以给我一点帮助 我试图将应用程序重新组织到MVVM并更好地利用数据绑定,但我正在努力解决一个小问题。

我有一个viewmodel类

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


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

我在其中创建了一个DiagramElement类的observablecollection。

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类只是扩展了按钮类并添加了自己的controlTemplate。

回到我的MainWindow.xaml.cs类中,我实例化了viewmodel,然后从ObservableCollection中填充MainWindow.xaml中的stackpanel。

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>

我想要做的是,取消foreach循环和对ItemList.Children.Add()的调用。并将其替换为视图模型中与Elements相同的绑定。

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的元素,绑定无法正常工作。任何帮助都感激不尽。

1 个答案:

答案 0 :(得分:0)

仅供参考,拥有一个包含UI元素集合的ViewModel(在您的情况下,按钮)违反了MVVM的原则 - UI和模型不应该像这样混合。

但直接的问题是你不能使用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内容)。