[gelöst] Listbox Dynamische einträge mit Bildern

Hallo myCSharp community.

Wie bringe ich es fertig in eine listbox ein Item anzuhängen welches ein Bild und ein Text beinhaltet?

Ich hatte testweise mit der xaml rumgespielt aber ich finde keinen anhaltspunkt wie ich beides unter einem eintrag anhängen kann.

Mit templates zu arbeiten scheint mir auch nicht richtig da das bild ja ebenfalls dynamisch sein soll.

Für Ideen und Tipps wäre ich sehr dankbar

So ungefähr soll es dann aussehen:
<listboxitem><bild><text></listboxitem>

Doch Templates sind das was du brauchst, genauer ein DataTemplate.

Hier siehst du mal ein Beispiel aus einem meiner Proggs.
Das DataTemplate kommt zu deinen Resourcen.
Per C# muß man hier noch eine passendes Object(List) zuordnen.
Ob du Labels oder Images oder eine TuWasTolles-Komponente bleibt relativ. Du mußt nur die entsprechenden Eigenschaften eine Daten-Bindung zuordnen

Ich hoffe es hilft weiter.

        <DataTemplate x:Key="dtIniCharakter" x:Name="IniTemplate" > 
            <StackPanel>
                <Grid Name="UnSelected">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Label Content="{Binding Path=Name}" FontWeight="Bold" />
                    <Label HorizontalAlignment="Right" Foreground="Silver" Grid.Column="1" Content="{Binding Path=Ini}" FontWeight="Bold" />
                    <Label Content="{Binding Path=CharType}" FontWeight="Bold" Grid.Column="2" />
                </Grid>
                
                <Grid Name="Selected" Visibility="Collapsed">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Label  Name="Test" Content="{Binding Path=Name}" FontWeight="Bold" />
                    <Label Grid.Column="1" Name="tbInput" Content="{Binding Path=Ini}" FontWeight="Bold" />
                </Grid>
                
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} }, Path=IsSelected }" Value="True">
                    <Setter TargetName="UnSelected" Property="Grid.Visibility" Value="Collapsed" />
                    <Setter TargetName="Selected" Property="Grid.Visibility" Value="Visible" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>


// Ein Beispiel für eine ListBox
        <ListBox Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="1" MinWidth="120" Name="lbTabelle" 
                 Background="Transparent" IsSynchronizedWithCurrentItem="True" 
                 HorizontalContentAlignment="Stretch" 
                 SelectionChanged="lbInitabelle_SelectionChanged" 
                 ItemTemplate="{DynamicResource dtIniCharakter}" ItemsSource="{Binding}" />

Hallo Taladan, danke für denen Beitrag.

Mir fehlt es sicherlich an erfahrung um das ganze Konzept zu begreifen was dahintersteht. Verstehe ich es richtig das ich dann für jeden ListBoxItem ein eigenes Template in die Resourcen anhängen müsste, wenn ich pro eintrag ein anderes Bild will?

Nein nicht ganz. Du erstellst ein Datatemplate. Dieses wird der Listbox zu geordnet. Jedes ListboxItem stellt sich dann entsprechend des DataTemplates dar. Wenn du in deinen DataTemplate jetzt ein Label definierst und du ihm dann eine Data zu weisen willst mußt du ihm auch sagen wo und was.

Hier wird ich den Content des Labels die Spalte Name zu und FontWeigt die Spalte Dick zu.

<Label Content="{Binding Path=Name}" FontWeight="{Binding Path=Dick}" />

Diese Daten werden dann aus den dem Object geholt, welches das Binding bestimmt. In deinen Fall, wäre das dann wohl das ListBoxItem welches wieder einen einzigen Datensatz der Datenbank wiederspiegelt, die du der ListBox zu geordnet hast.

**Bindung **
ListBox = DatenQuelle
ListBoxItem = Datensatz (Bindung wird automatisch erzeugt, sofern du oben und unten alles richtig gemacht hast).
Component.Eigenschaft = Datenfeld

Die Listbox erzeugt also automatisch so viele ListBoxItems wie in deiner DatenQuelle vorhanden sind.

Zu deinen Bildern. Hier wäre es am einfachsten, das du den Pfad übergibst. An sonnsten must du mit einen ValueConverter arbeiten, der dann ein Bitmap an deine Image-Komponente übergibt.

Hallo Taldan,
danke für deine Ausführliche Hilfe, ich habe es jetzt glaube ich begriffen. Leider funktioniert das mit dem Pfad der Bilder noch nicht so ganz hier ist mein code:

// XAML
        <ListBox Name="listBox1" Opacity="0.8">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=imgDir}" />
                        <TextBlock FontSize="16" Text="{Binding Path=appName}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
//--------------------------------------------
// Datatemplate
        public class listboxData
        {
            public string appName { set; get; }
            public string imgDir { set; get; }

        }
// listbox.item.add
XmlNode nameNode = node.SelectSingleNode("name");
XmlNode dirNode = node.SelectSingleNode("dir");

listBox1.Items.Add(new listboxData { appName = nameNode.InnerText, imgDir =dirNode.InnerText });

der Teil mit add ist ein einer foreach schleife so das mehrere einträge eingefügt werden. Gebe ich den Pfad in der XAML per hand ein funktionert es. Lasse ich ihn mit Bindig wird nur der name ausgegeben.

Hast du oder jemand andere vll. einen Hinweis warum es nicht funktioniert?

danke vielmals!

p.s:
Dieses Video hat mir beim verständnis der Templates auch noch sehr geholfen
http://windowsclient.net/learn/video.aspx?v=29384

++EDIT[/u]
Ich hatte doch den Falschen Pfad übergeben, es funktioniert jetzt alles, danke nochmal!!!