Showing image in WPF using the URL link from database

Question

i saved the URL in the database like this

~/Images/Questions/drink.png

So when i retrieve it in my WPF application i tried to do this :

            Image img = new Image();
            img.Width = Double.NaN;
            img.Height = Double.NaN;

    //      string fullFilePath = Path.Combine(@"C:\Users\apr13mpsip\Documents\Visual Studio 2010\Projects\iStellarMobile\iStellarMobile\Images\Questions", lstQuestion[i].ImageURL.Substring(1));
            string fullFilePath = @"C:\Users\apr13mpsip\Documents\Visual Studio 2010\Projects\iStellarMobile\iStellarMobile\Images\Questions\drink.png";
            BitmapImage bi = new BitmapImage();
            bi.BeginInit();
            bi.UriSource = new Uri(fullFilePath, UriKind.Relative); 
            bi.EndInit();


            img.Source = bi;
            wrapPanel1.Children.Add(img);

the lstQuestion[i].ImageURL is the URL that i retrieve from database. but it won't work ... it display nothing when i run it , so i tried the full path by typing in manually the whole directory but it still won't work , What have i gone wrong here?

When i debug it , it only shows Images\Questions\drink.png instead of the full path

When i use

Path.Combine(@"C:\Users\apr13mpsip\Documents\Visual Studio 2010\Projects\iStellarMobile\iStellarMobile", lstQuestion[i].ImageURL.Substring(1));

, it says URL could not be determined and when i debug it , it only read as Images\Questions\drink.png instead of the full path.

Solution

You are specifying UriKind.Relative while you should be using UrlKind.Absolute
Since you are probably loading a complete url from the database, for example

http://www.americanlayout.com/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png

Whereas UriKind.Relative would be used for something like

/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png

In any case the following code works:

var image = new Image();
var fullFilePath = @"http://www.americanlayout.com/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png";

BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(fullFilePath, UriKind.Absolute);
bitmap.EndInit();

image.Source = bitmap;
wrapPanel1.Children.Add(image);

There is no need to set image.Width & Image.Height to Double.Nan

Side note. While you can certainly load images at runtime like this, it would be better to use WPF Databinding (preferably with something like MVVM)

Basically you'd have a ListBox with a WrapPanel as ItemsPanelTemplate Then set the the ItemsSource to your List (lstQuestions).

<ListBox ItemsSource={Binding lstQuestions}>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path, Converter={StaticResource MyPathConverter}}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

You'd bind the image to whatever property represents the Path and use a ValueConverter to normalize the path.

public class PathConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string path = value.ToString();
        if (path.StartsWith("\\")
            path = path.Substring(1);

        return Path.Combine("whateveryourbasepathis", path);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The code is just a way to give you an idea which direction to go in. The point is you might want to look up WPF databinding as opposed to doing it with code.