Display data URL in WPF

Question

I am trying to create WPF application that gets data from service. The data is image URLs. Sometimes the service returns Data URLs.

If I tries to bind that URL to Image control like:

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

It's working for regular URL, but Data URLs are not displayed.

Is there any way to display Data URL in WPF control?

Answer 1

Create a value converter, which converts base64 data to a BitmapImage:

public class DataUrlConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var data = (string) value;
        var base64Data = Regex.Match(data, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
        var binData = System.Convert.FromBase64String(base64Data);

        var image = new BitmapImage();
        using (var mem = new MemoryStream(binData))
        {
            image.BeginInit();
            image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
            image.CacheOption = BitmapCacheOption.OnLoad;
            image.StreamSource = mem;
            image.EndInit();
        }
        image.Freeze();
        return image;
    }

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

Then create a converter resource:

<Window.Resources>
    <local:DataUrlConverter x:Key="DataUrlConverter"></local:DataUrlConverter>
</Window.Resources>

and use it like this:

<Image Source="{Binding URL, Converter={StaticResource DataUrlConverter}}" />