UserControl作为ListBox中的DataTemplate

Question

我希望在其他UserControls(如页面或窗口)中重用我的UserControls作为DataTemplates,在此示例中在ListBox中.一切都是MVVM.

我有一个名为"CardControl"的UserControl来显示一个简单的对象"Card".卡有两个属性,"ID"和"CardImage".控件DataContext是通过XAML设置的.如果我在VS或Blend中打开此UserControl,它会向我显示我在相应ViewModel中定义的虚拟卡.

现在我有另一个名为"CardSetControl"的UserControl,它应该显示一组卡片.因此,ViewModel有一个名为"Cards"的ObservableCollection <Card>类型的属性.

这是代码:

<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/Binding的文章之后,我仍然没有让它发挥作用.整个层次化的USerControls/DataContexts事情是如何做到最好的干净方式的呢？

Answer 1

在你的榜样,在的DataContext的UserControl是当前选定的卡.它流入UserControl和它的子控件像任何其他控件一样UIElement接收DataContext它的父控件.

这可行:

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

CardControl在哪里:

<UserControl x:Class="MySolution.CardControl" 
             OtherProperties="Not shown to keep this example small">
      <StackPanel>
        <TextBlock Text="{Binding ID}" /> 
        <Image Source="{Binding Image}" />
      </StackPanel>
</UserControl>

Answer 2

对于ListBox控件,为项源中的每个项创建一个推断的ListBoxItem.将Item设置为DataContext,并将ItemTemplate设置为模板.由于DataContext继承,因此您不必显式设置它,因为它已经是DataTemplate中的Card实例.

对于这种情况,您不必在CardControl上设置DC,因为它是为您设置的.

<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> 

应该适合你.