Using Extensions to converte image from array of bits to bitmapimage in View

Question

i need to call an extension in the view and not in my constructor so that i can see an image here my image

 <Image Grid.Row="1"
                               Grid.Column="1"
                               Width="250"
                               Height="133"
                               HorizontalAlignment="Center"
                               Source="{Binding CitizenRegisterViewModel.CurrentDelegation.SignatureImage3.Content}" />

it's a array of bits

i found a converter :

  public static BitmapImage ToBitmapImage(this byte[] byteArrayIn)
        {

                MemoryStream stream = new MemoryStream();
                stream.Write(byteArrayIn, 0, byteArrayIn.Length);
                stream.Position = 0;
                System.Drawing.Image img = System.Drawing.Image.FromStream(stream);
                BitmapImage returnImage = new BitmapImage();
                returnImage.BeginInit();
                MemoryStream ms = new MemoryStream();
                img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
                ms.Seek(0, SeekOrigin.Begin);
                returnImage.StreamSource = ms;
                returnImage.EndInit();

                return returnImage;


        }

i would like to use it in the view is it possible because i m using the currentdelegation

See here: http://stackoverflow.com/a/39366641/1136211 – Clemens Sep 07 '16 at 14:38 — Clemens, Sep 07 '16 at 14:38

score 0 · Accepted Answer · answered Sep 06 '16 at 14:07

Use this converter

public class ByteToBitmapImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var bytes = value as byte[];
        if (bytes == null)
            throw new ArgumentNullException(nameof(value));

        return bytes.ToBitmapImage();
    }

    public static BitmapImage ToBitmapImage(this byte[] byteArrayIn)
    {

        MemoryStream stream = new MemoryStream();
        stream.Write(byteArrayIn, 0, byteArrayIn.Length);
        stream.Position = 0;
        System.Drawing.Image img = System.Drawing.Image.FromStream(stream);
        BitmapImage returnImage = new BitmapImage();
        returnImage.BeginInit();
        MemoryStream ms = new MemoryStream();
        img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
        ms.Seek(0, SeekOrigin.Begin);
        returnImage.StreamSource = ms;
        returnImage.EndInit();

        return returnImage;


    }

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

and update your view.

<Image Grid.Row="1"
       Grid.Column="1"
       Width="250"
       Height="133"
       HorizontalAlignment="Center"
       Source="{Binding CitizenRegisterViewModel.CurrentDelegation.SignatureImage3.Content,Converter={StaticResource ByteToBitmapImageConverter}}" />

And add your converter to page

<Page.Resources>
    <converters:ByteToBitmapImageConverter x:Key="ByteToBitmapImageConverter" />
</Page.Resources>

That Convert method is far too complicated. See my answer for how it should actually look like. — Clemens, Sep 06 '16 at 19:02

Clemens · Answer 2 · 2016-09-06T19:15:02.833

Use a Binding Converter like this one:

public class ImageConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        BitmapImage bitmap = null;
        var buffer = value as byte[];

        if (buffer != null)
        {
            using (var stream = new MemoryStream(buffer))
            {
                bitmap = BitmapFrame.Create(
                    stream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
            }
        }

        return bitmap;
    }

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

Create an instance of the converter as resource in XAML and set the Converter property of the Binding:

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


<Image ... Source="{Binding
    CitizenRegisterViewModel.CurrentDelegation.SignatureImage3.Content
    Converter={StaticResource ImageConverter}}" />

Note also that all the above is usually unnecessary, as WPF provides built-in automatic type conversion from several source types, including byte[], to ImageSource (the type of the Source property of the Image control). So your binding should already work without any converter.

Using Extensions to converte image from array of bits to bitmapimage in View

2 Answers2