使用MVVM将UserControl加载到ItemsControl

Question

我有一个UserControl,我想在我的MainWindow上加载多次.为此,我使用ItemsControl:

    <ItemsControl Grid.Row="1"
              ItemsSource="{Binding FtpControlList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Horizontal"
                 IsItemsHost="True" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate DataType="{x:Type my:BackUpControl}">
      <my:BackUpControl Margin="5"
                        Width="500" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

我的UserControl由ViewModel绑定.我的MainWindow也有一个ViewModel.在MainWindowViewModel中,我有一个OberservableCollection依赖项属性,该属性需要一个UserControlViewModel列表.在MainWindowViewModel的构造函数中,我将一些UserControlViewModels添加到List中.

    public MainWindowViewModel()
{
  FtpControlList = new ObservableCollection<BackUpControlViewModel>();
  FtpControlList.Add(new BackUpControlViewModel("View 1"));
  FtpControlList.Add(new BackUpControlViewModel("View 2"));
  FtpControlList.Add(new BackUpControlViewModel("View 3"));
}

public static readonly DependencyProperty FtpControlListProperty = DependencyProperty.Register("FtpControlList", typeof(ObservableCollection<BackUpControlViewModel>), typeof(MainWindowViewModel));
public ObservableCollection<BackUpControlViewModel> FtpControlList
{
  get { return (ObservableCollection<BackUpControlViewModel>)GetValue(FtpControlListProperty); }
  set { SetValue(FtpControlListProperty, value); }
}

现在由于某种原因,它加载了3次空的usercontrol而不是FtpControlList属性中的属性设置为"View 1,View 2和View 3".如何确保列表中的UserControls已加载而非空载？

UserControlViewModel的一部分:

    // part of the UserControl Viewmodel
    public BackUpControlViewModel()
{
}

public BackUpControlViewModel(string header)
{
  GroupBoxHeader = header;
}

    #region Dependency Properties
public static readonly DependencyProperty GroupBoxHeaderProperty = DependencyProperty.Register("GroupBoxHeader", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("empty"));
public string GroupBoxHeader
{
  get { return (string)GetValue(GroupBoxHeaderProperty); }
  set { SetValue(GroupBoxHeaderProperty, value); }
}

public static readonly DependencyProperty FtpUrlProperty = DependencyProperty.Register("FtpUrl", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("ftpurl"));
public string FtpUrl
{
  get { return (string)GetValue(FtpUrlProperty); }
  set { SetValue(FtpUrlProperty, value); }
}

public static readonly DependencyProperty FtpUserProperty = DependencyProperty.Register("FtpUser", typeof(string), typeof(BackUpControlViewModel), new UIPropertyMetadata("ftpUser"));
public string FtpUser
{
  get { return (string)GetValue(FtpUserProperty); }
  set { SetValue(FtpUserProperty, value); }
}
#endregion

它可能是一些愚蠢的东西,但我似乎无法找到它.MainWindow和UserControl的datacontext绑定到它的Viewmodel.

编辑:BackupControl datacontext设置为BackupControlViewModel(回答Rachel的问题)

   public partial class BackUpControl : UserControl
  {
    public BackUpControl()
    {
      InitializeComponent();
      this.DataContext = new BackUpControlViewModel();
    }
  }

Answer 1

您通过在调用后的构造函数中设置它来覆盖DataContext您UserControl的UserControlInitializeComponent();

默认情况下,ItemsControl将为ItemTemplate集合中的每个项目创建一个,并将其设置DataContext为来自的项目ItemsSource.最终结果将是三个新my:BackUpControl对象,其DataContext后面的那些对象绑定到BackUpControlViewModelfromItemsControl.ItemsSource

this.DataContext = new BackUpControlViewModel();从UserControl的构造函数中删除该行,它应该像您期望的那样工作