How to release/caching image resources after get them using XAML

Question

Currently I’m working in a WPF project using prism 6, avoiding code-behind as much as possible. I have a variable in the ViewModel which contains the local path where the image in question is stored. In the View, I bind the source property of the Image control to the ViewModel’s variable and I can get the image displayed.

The problem arises when I need to delete the image from disk when it’s still being displayed in the view. Then, if I do so, I get the typical “Image is in use”. I read in the forum about image caching and I wonder if I could apply it in this case to avoid this behavior only using XAML if possible.

I’m using this approach:

<Border Grid.Column="0" BorderThickness="2" BorderBrush="#808080" Height="300" 
        Width="300" Background="#FCFCFC">
    <Image Height="350" Width="350" HorizontalAlignment="Center" 
           VerticalAlignment="Center" Source="{Binding ImageUri}"/>
</Border>

Clemens · Answer 1 · 2018-10-02T10:34:36.417

If you can assign the DataContext before calling InitializeComponent (of the MainWindow or UserControl), you can explicitly create a BitmapImage in XAML and set its CacheOption to OnLoad. The framework will then immediately load the file and not keep it open.

<Image>
    <Image.Source>
        <BitmapImage UriSource="{Binding ImageUri}" CacheOption="OnLoad"/>
    </Image.Source>
</Image>

In case the DataContext or the ImageUri property has to be set after InitializeComponent, you could add a property of type ImageSource

public ImageSource Image
{
    get { return BitmapFrame.Create(
              ImageUri, BitmapCreateOptions.None, BitmapCacheOption.OnLoad); }
}

or byte[]:

public byte[] Image
{
    get { return File.ReadAllBytes(ImageUri.LocalPath); }
}

and bind to it like:

<Image Source="{Binding Image}"/>

or asynchronously to increase the UI's responsiveness:

<Image Source="{Binding Image, IsAsync=True}"/>

score 1 · Accepted Answer · answered Oct 02 '18 at 10:01

You don't need to create an ImageSource object in your ViewModel. Instead, just make a property of type byte[], which you set from the file using standard IO functions. You can then bind the Source property of your Image control to this byte array - the control will automatically handle the conversion to a displayable image.

See my answer to this question for means to handle this in an async manner.

Once the file has been read, you can delete it as required. If the image comes from some external source, e.g. a web download, you can use the data directly without even needing to save it to disk at all.

score 1 · Answer 3 · answered Oct 02 '18 at 11:16

You can write a converter for this to convert the filename to the bytes

public class FilenameToBytesConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
        {
            return null;
        }
        var path = (string)value;

        if (!File.Exists(path))
        {
            return null;
        }

        return File.ReadAllBytes(path);
    }

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

and use it in the view

<Window ...
        xmlns:Converters="clr-namespace:YourNamespacePath.Converters"/>

    <Window.Resources>
        <Converters:FilenameToBytesConverter x:Key="FilenameToBytesConverter"/>
    </Window.Resources>

    <Image Source="{Binding ImageUri, Converter={StaticResource FilenameToBytesConverter}}"/>

IMHO this is the best answer. Keeps it in the XAML and separates concerns. — GeorgiG, Sep 02 '19 at 15:12

score -1 · Answer 4 · answered Oct 02 '18 at 09:21

-1

As long as you have the ImageSource pointing to a file on local disk - you cannot delete it. Following 2 approaches come to my mind:

Since you have the path to actual image - why not copy it to a TEMP folder and Bind to this path. That way you are never referring to actual image which can now be deleted.
Use/Build a http host (CMS) for image files (like) imgur (which StackOverflow uses too). Always save/host files on this. That way ImagesSource is a http uri.

answered Oct 02 '18 at 09:21

Prateek Shrivastava

1,877
1
10
17

This is wrong. There are several ways to get the image loaded immediately so that the file can be deleted directly after showing it. – Clemens Oct 02 '18 at 09:27
@Clemens - I may be wrong but the moment you create a BitmapImage with that Cache options. Doesn't it load the image bytes in memory. So the ImageSource is not the actual file on disk. But it's the Image from the bytes in memory. – Prateek Shrivastava Oct 02 '18 at 09:36
1

It's always loaded to memory. The important point is *when* that happens. You can control that it happens immediately, so there is no need for any of the things you are suggesting here. – Clemens Oct 02 '18 at 09:37
If this is true. I will try basic binding to image on disk and hold for several minutes. Then will try deleting the image from disk – Prateek Shrivastava Oct 02 '18 at 09:48

How to release/caching image resources after get them using XAML

4 Answers4