If we want to show an image that was saved as path into database in template, we must use covert the “image-path” to a BitmapImage object by “IValueConverter” Interface
In this tutorial, we will show step by step the all images from the database using “ListBox.ItemTemplate”
***Image doesn’t take a string as a source. So we need convert to string(path) to an ImageSource
Step 1: Creating database
SQL:
1 2 3 4 5 6 7 | Create table Images( id int identity(1,1), name varchar(50), path varchar(200) ) |
Samples:
1 2 3 | insert into Images values('picture 1','img1.png'),('picture 2','img2.png'),('picture 3','img3.png') |
Step 2: Creating a class for Images.(I named as MyImage)
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 43 44 45 46 47 | class MyImage { int id; string name; string path; public int Id { get { return id; } set { id = value; } } public string Name { get { return name; } set { name = value; } } public string Path { get { return path; } set { path = value; } } } |
Step 3: designing the WPF code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <ListBox x:Name="lbImages"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Height="70"> <Image Source="{Binding Path}" Width="70"></Image> <Label Content="{Binding Name}" Width="130" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> |
Step 4: Adding Constructor codes and Conections (Dont forget to add using System.Data.SqlClient;)
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 | public partial class MainWindow : Window { List<MyImage> myList; SqlConnection con; public MainWindow() { InitializeComponent(); //Constructor codes MyImage myImage; myList = new List<MyImage>(); con = new SqlConnection(@"server =.; Initial Catalog = myProject; Integrated Security = SSPI"); //connection string SqlCommand cmd = new SqlCommand(); cmd.Connection = con; con.Open(); cmd.CommandText = "Select * From Images"; //sql query using (var reader = cmd.ExecuteReader()) { while (reader.Read()) { myImage = new MyImage(); myImage.Id = reader.GetInt32(0); myImage.Name = reader.GetString(1); myImage.Path = reader.GetString(2); myList.Add(myImage); //adding collection } } con.Close(); lbImages.ItemsSource = myList; //connect collection to listbox } } |
If you did all of them correct, you will show that
Step 5: Create a class that name is MyImageConverter (WPF – Image Path To )
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 | using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Windows.Data; using System.Windows.Media.Imaging; namespace CSharpConsoleExamplesWPFIMG { class MyImageConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { //my images are in c:\images\ string path = @"C:\images\" + value.ToString(); return new BitmapImage(new Uri(path)); //Convert ImagePath to BitmapImage } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return null; } } } |
Step 6: Use the MyImageConverter for converting path to BitmapImage
First Build Solution (F6)
Click image Source and configure
Add new Value Converter
Select MyValueConverter
Your code will change this way:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <Window.Resources> <local:MyImageConverter x:Key="MyImageConverter"/> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <ListBox x:Name="lbImages"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Height="70"> <Image Source="{Binding Path, Converter={StaticResource MyImageConverter}}" Width="70"></Image> <Label Content="{Binding Name}" Width="130" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> |
Result: