UserControl en tant que DataTemplate dans ListBox

Je veux réutiliser mon UserControls dans d'autres UserControls comme une page ou une fenêtre comme DataTemplates, dans cet exemple à l'intérieur d'une zone de liste. Tout est MVVM.

J'ai un UserControl appelé "CardControl" pour afficher un simple objet "Carte". Carte a deux Propriétés, "ID" et "CardImage". Les contrôles DataContext est défini par le code XAML. Si j'ai ouvert ce UserControl en VS ou d'un Mélange, il me montre la Carte factice que j'ai défini dans le ViewModel.

Maintenant j'ai un autre UserControl appelé "CardSetControl", qui devrait afficher une collection de Cartes. De sorte que le ViewModel a une propriété de type ObservableCollection<Carte - > appelée "Cartes".

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

Après avoir lu des tonnes d'articles sur MVVM et DataContext/Liaison je ne l'ai toujours pas le faire fonctionner. Comment est cet ensemble hiérarchique USerControls/DataContexts chose faite le meilleur moyen propre?

source d'informationauteur pDEV

Pour le contrôle ListBox présumées ListBoxItem est créé pour chaque élément de la source des éléments. L'Élément est défini comme le DataContext et votre ItemTemplate est définie comme modèle. Depuis DataContext hérite, vous n'avez pas à définir explicitement, parce que c'est déjà l'instance de Carte dans votre DataTemplate.

Dans ce cas, vous n'avez pas à définir la DC sur le CardControl parce que c'est réglé pour vous.

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

Devrait fonctionner pour vous.

Dans votre exemple, le DataContext de la UserControl serait sélectionné de la Carte. Il se jette dans l' UserControl et de ses contrôles enfants comme n'importe quel autre UIElement reçoit le DataContext de sa société-mère de contrôle.

Ce serait le travail:

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

Où CardControl est:

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

1

Vous remercie pour vos réponses, mais j'ai découvert que mon problème était un autre que j'avais mentionné. Si faire de la manière que vous avez décrit, je peux voir mon UserControls (CardControl) étant utilisée comme modèle pour la zone de liste des Éléments et de l'ID et l'Image s'affiche correctement.

À côté de qui je me suis toujours demandé pourquoi l'identification et de l'Image peut être affichée bien que je ne peux pas lier à d'autres propriétés que j'ai défini dans le ViewModel.

Aujourd'hui, j'ai trouvé un article intéressant sur DataContext de la hiérarchie. Là, il est dit que le DataContext à l'intérieur d'une zone de liste n'EST PAS la même DataContext que sur la Page dans laquelle la zone de liste. Je n'ai pas vu cela avant, donc j'ai pensé que je dois mettre le DataContext en quelque sorte, comme je l'ai mentionné dans la question. Maintenant, je peux le lier à toutes les propriétés.

Voici l'article:
http://blog.thekieners.com/2010/09/08/relativesource-binding-with-findancestor-mode-in-silverlight/

Vous devez vous connecter pour publier un commentaire.