WPF Databinding stackpanel

Question

Je suis un débutant en programmation WPF, venant de .NET 2.0 C#.

En essayant de faire un StackPanel horizontal qui devrait être rempli avec des données d'une table dans une base de données. Le problème est que je veux qu'il affiche une image avec du texte de la table ci-dessous et empile ces deux éléments horizontalement.

Voici quelques pseudo-code pour afficher ce que je veux faire:

<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}"> 
    <StackPanel> 
     <Image Source="User.png"/> 
     <Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label> 
    </StackPanel> 
</StackPanel> 

Je ne peux tout simplement pas comprendre oout comment faire cela.

Answer 1

Fondamentalement, vous souhaitez utiliser un contrôle capable d'afficher une énumération d'objets. Le contrôle capable de ceci est la classe ItemsControl et tous ses descendants (Selector, ListBox, ListView, etc.). Liez la propriété ItemsSource de ce contrôle à la liste d'objets souhaités, ici une liste des utilisateurs que vous avez récupérés dans la base de données. Définissez le ItemTemplate du contrôle sur un DataTemplate qui sera utilisé pour afficher chaque élément de la liste.

Exemple de code:

Dans une section Resources (par exemple Window.Resources):

<DataTemplate x:Key="UserDataTemplate"> 
    <StackPanel Orientation="Horizontal"> 
    <Image Source="User.png"/> 
    <Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" /> 
    </StackPanel> 
</DataTemplate> 

Dans votre Window/Page/UserControl:

<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" /> 

Dans votre code derrière:

UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db 

Answer 2

La réponse de Julien est correct pour votre description écrite, cependant, en regardant votre XAML, il semble que vous cherchez quelque chose comme ce qui suit:

<DataTemplate x:Key="UserDataTemplate"> 
    <StackPanel> 
     <Image Source="User.png"/> 
     <Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" /> 
    </StackPanel> 
</DataTemplate> 

<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" > 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Il faut vraiment un ItemsControl (ou une dérivation) à lier votre source à. Ensuite, vous pouvez modifier l'orientation en définissant son panneau d'éléments (qui, je crois, est un VirtualizingStackPanel avec l'orientation verticale par défaut), il suffit de le définir sur un VirtualizingStackPanel avec orientation horizontale. Vous pouvez ensuite définir le ItemsTemplate pour chacun de vos éléments sur la disposition souhaitée (une image empilée au-dessus du texte lié à votre base de données).