WPF Databinding stackpanel

Question

Ich bin ein Anfänger in WPF-Programmierung, von .NET 2.0 C#.

Ich versuche, eine horizontale StackPanel, die mit Daten aus einer Tabelle in einer Datenbank gefüllt werden sollte. Das Problem ist, dass ich möchte, dass ein Bild mit etwas Text aus der Tabelle unten angezeigt wird und diese beiden Elemente dann horizontal gestapelt werden.

Hier einige Pseudo-Code zu zeigen, was ich tun möchte:

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

Ich kann einfach nicht verstehen Außen-Ø, wie dies zu tun.

Answer 1

Grundsätzlich möchten Sie ein Steuerelement verwenden, das eine Aufzählung von Objekten anzeigen kann. Die Steuerung, die dazu in der Lage ist, ist die Klasse ItemsControl und alle ihre Nachkommen (Selector, ListBox, ListView, usw.).

Binden Sie die Eigenschaft ItemsSource dieses Steuerelements an eine Liste der gewünschten Objekte, hier eine Liste der Benutzer, die Sie aus der Datenbank abgerufen haben. Setzen Sie die ItemTemplate des Steuerelements auf eine DataTemplate, die verwendet wird, um jedes Element in der Liste anzuzeigen.

Beispielcode:

In einem Resources Abschnitt (zum Beispiel Window.Resources):

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

In Ihrem Window/Page/UserControl:

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

In Ihrem Code hinter:

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

Answer 2

Juliens Antwort auf Ihre schriftliche Beschreibung richtig ist, aber in Ihrem XAML suchte, scheint es, Sie suchen etwas wie folgt aus:

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

Sie müssen auf jeden Fall ein Item (oder eine Ableitung) zu Binde deine Quelle an. Dann können Sie die Ausrichtung ändern, indem Sie das Elementbedienfeld (was ich glaube, dass es sich um ein VirtualizingStackPanel mit vertikaler Ausrichtung handelt) einstellen, also legen Sie es einfach auf ein VirtualizingStackPanel mit horizontaler Ausrichtung fest. Dann können Sie die ItemsTemplate für jedes Ihrer Objekte auf das gewünschte Layout setzen (ein Bild, das über dem Text liegt, der an Ihre Datenbank gebunden ist).