作为用户控件列表框里面的DataTemplate [英] UserControl as DataTemplate inside ListBox

问题描述

我要重用我的用户控件在用户控件的其他页面一样或窗口的DataTemplates，在ListBox这里面的例子。一切都是MVVM。

I want to reuse my UserControls in other UserControls like page or window as DataTemplates, in this example inside a ListBox. Everything is MVVM.

我有一个名为CardControl，显示一个简单的对象一卡通用户控件。卡有两个属性，ID和CardImage。这些控件的DataContext是通过XAML设置。如果我在VS打开该用户控件或混合它表明我，我在相应的视图模型所定义的虚拟卡。

I've a UserControl called "CardControl" to display a simple object "Card". Card has two Properties, "ID" and "CardImage". The controls DataContext is set via XAML. If I open this UserControl in VS or Blend it shows me the dummy Card that I have defined in the corresponding ViewModel.

现在我有另一个用户控件称为CardSetControl，它应显示卡的集合。因此视图模型具有类型的ObservableCollection化合物的一财产;卡＆GT;所谓的卡。

Now I have another UserControl called "CardSetControl", which should display a collection of Cards. So the ViewModel has one property of type ObservableCollection<Card> called "Cards".

下面是code：

<ListBox x:Name="MyList" ItemsSource="{Binding CardSet.Cards}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>

        <!-- WORKING, but not what i want -->
        <TextBlock Text="{Binding ID}" /> // would display ID of Card
        <Image Source="{Binding Image}" /> // would display Image of Card

        <!-- NOT WORKING, but this is how i want it to work -->
        <UserControls:CardControl DataContext="{Binding "Current listbox item as DataContext of CardControl???"}" />

      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

阅读吨左右MVVM和DataContext的文章/绑定我仍然没有得到它的工作后。这整个层次用户控件/ DataContexts的事情是如何做的最好清洁的方式？

After reading tons of articles about MVVM and DataContext/Binding I still didn't get it to work. How is this whole hierarchical USerControls/DataContexts thing done the best clean way?

推荐答案

有关的推断是一个ListBoxItem在项目源的每个项目创建的ListBox控件。的项目被设定为在DataContext和您的ItemTemplate被设置作为模板。由于继承的DataContext，你不必明确设置它，因为它已经卡的实例在你的DataTemplate。

For the ListBox control an inferred ListBoxItem is created for each item in the items source. The Item is set as the DataContext and your ItemTemplate is set as the template. Since DataContext inherits, you don't have to explicitly set it because it's already the instance of Card in your DataTemplate.

对于这种情况，你千万不要因为它的设置，你必须设置DC上CardControl。

For this case, you don't have to set the DC on the CardControl because it's set for you.

<ListBox x:Name="MyList" ItemsSource="{Binding CardSet.Cards}"> 
  <ListBox.ItemTemplate> 
    <DataTemplate> 
      <StackPanel> 

        <!-- WORKING, but not what i want --> 
        <TextBlock Text="{Binding ID}" /> // would display ID of Card 
        <Image Source="{Binding Image}" /> // would display Image of Card 

        <!-- NOT WORKING, but this is how i want it to work --> 
        <UserControls:CardControl /> 

      </StackPanel> 
    </DataTemplate> 
  </ListBox.ItemTemplate> 
</ListBox> 

应该为你工作。

这篇关于作为用户控件列表框里面的DataTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！