Caching images in silverlight and 2-way databinding

Question

Maybe this is a dumb question because I just started to work with silverlight.

I have a ListBox control which is bound to CollectionViewSource and this CollectionViewSource is populated by RIA services. Each item in the datasource has a ThumbnailPath property containing a string URL of image on a server. Then on the item template I have a user control, which has an Image control and a dependency property Source to set Image source. Source is bound to ThumbnailPath property of an item and everything works fine.

However, silverlight application requests images from the server each time when filtering or paging of a ListBox is performed. My idea is to add an BitmapImage field to the item and store the image in this field on ImageOpened event of a Image control and then use this image next time instead of ThumbnailPath. But how to implement this? Two way binding? I spent a lot of time reading about 2-way databinding but still don't know how to do this. Can anyone point me to a good example or article?

This is item template:

<ControlTemplate x:Key="ItemTemplate">
        <Grid Width="104" Height="134" Margin="0,0,5,5" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Border BorderBrush="#FF000000" BorderThickness="2, 2, 2, 2" Margin="0,0,0,0" CornerRadius="0" />
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <my:ImageProgress Source="{Binding ThumbPath}"></my:ImageProgress>
                <Grid Background="White" Margin="0,110,0,0" Opacity="0.5" Width="100" Height="20">
                </Grid>
                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" Margin="0,110,0,0">
                </TextBlock>
            </Grid>
        </Grid>
    </ControlTemplate>

and usercontrol:

<Grid x:Name="LayoutRoot" Background="Transparent" Width="100" Height="100">
    <Image x:Name="Image" Stretch="Uniform" ImageFailed="ImageFailed" ImageOpened="ImageOpened">
    </Image>
    <TextBlock x:Name="FailureText" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10"  TextWrapping="Wrap" Margin="20,0,20,0" Visibility="Collapsed">
        image not found
    </TextBlock>
</Grid>

control code:

public partial class ImageProgress : UserControl
{
    public ImageProgress()
    {
        InitializeComponent();
    }

    public BitmapImage Source
    {
        get { return (BitmapImage)GetValue(SourceProperty); }
        set
        {
            SetValue(SourceProperty, value);
            Image.Source = value;
        }
    }

    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(BitmapImage), typeof(ImageProgress), new PropertyMetadata(new PropertyChangedCallback(OnSourceChanged)));

    private static void OnSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var source = sender as ImageProgress;
        if (source != null)
        {
            source.Source = (BitmapImage) e.NewValue;
        }
    }

    void ImageFailed(object sender, ExceptionRoutedEventArgs e)
    {
        var img = (Image) sender;
        FailureText.Visibility = Visibility.Visible;
        img.Visibility = Visibility.Collapsed;
    }

    private void ImageOpened(object sender, RoutedEventArgs e)
    {
        var img = (Image)sender;
        // ???
    }
}

Answer 1

The fact that the silverlight app is requesting the image each time is not the real problem. You should just configure the cache settings in the web server (I guess you are using IIS) to avoid the entire image stream going back and forth.

No extra code is needed this way. (y)

Regards,