Binding Image's Source in XAML DataTemplate to a URI in Silverlight 4

Question

Okay, what I'm trying to create is a list of images (using a listbox) with a thumbnail on the left, and image title on the right. My XAML is set up this way:

<ListBox HorizontalAlignment="Left" Margin="6,6,0,6" Name="CurrentPhotos" Width="184" SelectionChanged="CurrentPhotos_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Converter={StaticResource FilePathConverter}}" />
                <sdk:Label Content="{Binding Title}"></sdk:Label>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I've got the FilePathConverter key defined in App.xaml and the code is set up:

public class FilePathConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (targetType == typeof(string))
        {
            return (value as PhotoSummary).FullThumbPath();
        }
        else
        {
            return (value as PhotoSummary).Thumb();
        }

    }

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

There are breakpoints in both Convert and ConvertBack methods. ConvertBack never gets fired (so there's no exception etc.), and in Convert method, the Thumb returns correctly (string input is left for some test reasons, and not currently used. it's not fired anyways), and the Thumb extension method is this:

public static object Thumb(this PhotoSummary ps)
{
    Uri uri = new Uri("http://" + Settings.Host + "/Content/Thumbs/" + ps.Uploaded.Year + "/" + ps.Uploaded.Month + "/" + ps.ID + ".jpg", UriKind.Absolute);
    return new BitmapImage(uri);
}

This one gets called, and the Uri is built up correctly (tested several times). However, when I run the app, the list only contains the Title of the photo, and no image is there. All the images are small (they are just thumbs), local files, so they need to load up instantly so it's not a loading issue either. But it's as if there's no Image tag there. It just displays the labels of the photos. Converter is working, Uri is correct, there are no errors at all, but no image shows up.

Any suggestions?

Answer 1

You might have to load the image explicitly in your converter. The MSDN page for BitmapImage shows the following code snippet:

// Create the image element.
Image simpleImage = new Image();    
simpleImage.Width = 200;
simpleImage.Margin = new Thickness(5);

// Create source.
BitmapImage bi = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block.
bi.BeginInit();
bi.UriSource = new Uri(@"/sampleImages/cherries_larger.jpg",UriKind.RelativeOrAbsolute);
bi.EndInit();
// Set the image source.


simpleImage.Source = bi;

Answer 2

Okay, the problem was about a security restriction in SL. It was running locally, and making a call to http://localhost ... was failing due to security restriction (at least, for images). I've read that if I made a test page, launch from the local server etc. and then run it, the error would go away, but instead of that workaround, I just checked require elevated trust, and it suddenly started to work. So question is solved.

Answer 3

Im using this for exactly same problem, But Im using Silverlight 5 with eleated trust, dont know it that matters

<DataTemplate x:Key="DataTemplate1">
        <Grid>
            <Image Margin="0" Width="25" Height="25" Source="{Binding EventType, StringFormat=/Icons/EventType\{0:d\}.png}"/>
        </Grid>
    </DataTemplate>

And it works well. Its data template for DataGrid, where this EventType is enum of types.

this is what fiddler shows later

http://www.localdomain.loc/ClientBin/Icons/EventType1.png