Entwickler-Ecke
WPF / Silverlight - Listbox -> Binding an Objekt mit Werten Bild via Codebehind
cybermailer - Fr 26.04.13 21:00
Titel: Listbox -> Binding an Objekt mit Werten Bild via Codebehind
Hallo,
Bin gerade am lernen nur leider stehe ich mit meinem Wissen jetzt an. Hab auch schon geschlagene 2 Tage gegoogelt aber alle
Lösungen und Anregungen sind für meinen derzeitigen Wissenstand einfach zu komplex.
Daher hoffe ich dass mir jemand einen einfach Tipp geben kann.
Aufgabe -> Ich muss via Codebind (unbedingt!) eine Listbox füllen mit festgelegten Bildern und einer Beschreibung dazu.
Wenn das Bild i.d. Box ausgewählt wird soll die dazugehörige Beschreibung angezeigt werden.
Nun dachte ich mir ich lege ein Objekt an mit Instanzvariabeln und befülle diese mit Werten dass ich kein Problem.
Mittels Binding binde ich dass ganze an die XAML. Wo ich aussteige ist das ganze auch noch mit einem Bild zu machen.
(Die Bilder habe ich in den Projektordner abgegelegt. Der Ordner wurde in Visual Studio dem Projekt hinzugefügt. Alle Bilder
sind JPGs.)
Danke für Eure Hilfe.
z.B. so in der Art
C#-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
| class Person
{
string firstname;
public string Firstname
{
get { return firstname; }
set { firstname = value; }
}
string lastname;
public string Lastname
{
get { return lastname; }
set { lastname = value; }
}
public override string ToString()
{
return Firstname+" "+Lastname;
}
}
public DataItem(
string title,
string description)
{
_title = title;
_description = description;
} |
In der XAML
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
| <Window.Resources>
<DataTemplate x:Key="ListItemTemplate">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image
Source="GoLtrHS.png"
Grid.Column="0"
Grid.RowSpan="2"/>
<TextBlock
Text="{Binding Path=Title}"
Grid.Column="1"
Grid.Row="0"
FontWeight="Bold"/>
<TextBlock
Text="{Binding Path=Description}"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
</DataTemplate>
</Window.Resources> |
In diesem Falle wird aber immer das gleiche Bild angezeigt und es wurde i.d. XML hinzugefügt.
Ich muss es unbedingt via Codebind laden...
2ter Lösungsansatz:
Hier habe ich es geschafft die Bilder schon mal richtig zu laden nur wie verknüpfe ich diese dann mit der Klasse für die Details ?!...
C#-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
| using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace Listbox_Hundv2
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public static class Hundloader
{
public static List<BitmapImage> LoadImages()
{
List<BitmapImage> hundImages = new List<BitmapImage>();
DirectoryInfo hundordner = new DirectoryInfo(@"..\..\Hund");
foreach (FileInfo hundbilder in hundordner.GetFiles("*.jpg"))
{
Uri uri = new Uri(hundbilder.FullName);
hundImages.Add(new BitmapImage(uri));
}
return hundImages;
}
}
} |
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
| <Window x:Class="Listbox_Hundv2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Listbox_Hundv2"
Title="Custom ItemsPanel" Height="800" Width="300"
WindowStartupLocation="CenterScreen"
>
<Window.Resources>
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{Binding Path=UriSource}" Stretch="Fill" Width="120" Height="120" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter
Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled"
/>
</Style>
</Window.Resources>
<Window.DataContext>
<ObjectDataProvider ObjectType="{x:Type local:Hundloader}" MethodName="LoadImages" />
</Window.DataContext>
<ListBox ItemsSource="{Binding}" />
</Window> |
Danke für Eure Hilfe
Christian S. - Fr 26.04.13 21:42
Hallo und :welcome:!
Der zweite Lösungsansatz erscheint mir ein bisschen Overkill zu sein ;-)
Der erste XAML-Quelltext ist schon mal kein schlechter Ansatz, Du musst halt nur den Dateinamen durch ein weiteres Binding ersetzen. Die Eigenschaft, an die Du bindest, muss dabei den kompletten absoluten Pfad zur Bilddatei (also sowas wie "c:\ein ordner\programmordner\test.jpg") als String enthalten.
Grüße
Christian
cybermailer - Fr 26.04.13 23:18
ok. gut dann werde ich mich morgen mal daran versuchen :)
Zusatzfrage -> Und wie mache ich das nur bei Auswahl eines in der Listbox aufgelisteten Bildes der Name dazu in einem Label erscheint?
(Also die Listbox beinhaltet prinzipiell alle Bilder) erst bei Klick auf ein Element soll dazu die Beschreibung etc im Label aufscheinen....
Danke.
Christian S. - Fr 26.04.13 23:30
Wenn Du der Listbox den Namen "listbox1" gibst, kannst Du so den Titel des ausgewählten Elements in einem TextBlock amzeigen:
XML-Daten
1:
| <TextBlock DataContext="{Binding ElementName=listbox1, Path=SelectedItem}" Text="{Binding Path=Title}" /> |
cybermailer - So 28.04.13 17:22
Hänge momentan am Problem wie ich das Ganze richtig angezeigt bekomme.
Meine derzeitige Lösung:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
| <Grid>
<StackPanel Margin="5" Name="stackPanel1" >
<Image Source="{Binding Pfad}" Stretch="Fill" Width="120" Height="120" />
<ListBox Name="ListBox"
IsSynchronizedWithCurrentItem="True" Height="186"
ItemsSource="{Binding}"/>
<TextBox Height="23" Name="textBox1"
Text="{Binding Path=Rasse, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</Grid> |
-> Problem ich muss die Bilder in eine Listbox packen und diese Auswahl entscheided welche Rasse angezeigt wird...
So ist es richtig angezeigt aber es fehlt noch die Aktualisierung bei anderer Auswahl:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
| <Grid>
<ListBox Name="listBox" ItemsSource="{Binding}" Height="258">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Width="100"
Height="100"
Source="{Binding Pfad}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock FontWeight="Bold" Height="23" Name="textBox1" Text="{Binding Path=Rasse}" Margin="220,300,150,20" />
</Grid> |
Danke für Eure hilfe
GESCHAFFT:
XML-Daten
1:
| IsSynchronizedWithCurrentItem="true" |
War dann die Lösung des Problems...
Letzte FRAGE:
Wenn man nun den Pfad nicht hardcoddieren und einlesen wie in meiner 2ten Idee wie verknüpft man dass dann?
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!