Simple example of using DrawImage in VB WPF - wpf

Question

I was hoping to figure this out on my own, but after hours of Googling I have countless examples that I can't get to work. Here's the scenario. Hopefully someone can provide a simple solution.
I have a VB WPF application. It communicates with a particular web service to get a Base64 string for an image. I am able to convert this string to a System.Drawing.Image object using the following code:
Public Function Base64ToImage(ByVal base64str As String) As System.Drawing.Image
'Setup image and get data stream together
Dim img As System.Drawing.Image
Dim MS As System.IO.MemoryStream = New System.IO.MemoryStream
Dim b64 As String = base64str.Replace(" ", "+")
Dim b() As Byte
'Converts the base64 encoded msg to image data
b = Convert.FromBase64String(b64)
MS = New System.IO.MemoryStream(b)
'creates image
img = System.Drawing.Image.FromStream(MS)
Return img
End Function
I then open a popup window and all I want to do is display this image in the popup window. The examples I have found rely on using the PaintEventArgs, but I'm not sure how that works and it doesn't seem relevant in this case. The best I've been able to do is to get the image to display on the screen, but it's not actually attached to the popup window. I did that using the following code, which is a method inside the popup window class:
Dim img as System.Drawing.Image = Base64ToImage(base64string)
Dim gr As System.Drawing.Graphics = System.Drawing.Graphics.FromHwnd(New Interop.WindowInteropHelper(Me).Handle)
gr.DrawImage(img, 10, 10, 500, 800)
gr.Dispose()
This displayed the image, but it seemed to appear at position 10,10 of the screen, not of the popup window.

Answer 1

System.Drawing is a WinForms-Namespace, so it doesn't work well with WPF. You can use this converter in order to convert a base64 string to a bitmapsource that can be used by WPF:
<ValueConversion(GetType(String), GetType(BitmapSource))> _
Public Class Base64ToImageConverter
Implements IValueConverter
Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
Try
Return Base64ToImage(value)
Catch ex As Exception
If TypeOf parameter Is BitmapSource Then
Return parameter
End If
Return Binding.DoNothing
End Try
End Function
Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
Try
Return ImageToBase64(value)
Catch ex As Exception
Return Binding.DoNothing
End Try
End Function
Public Shared Function Base64ToImage(ByVal imageString As String) As BitmapSource
Dim buffer() As Byte = System.Convert.FromBase64String(imageString)
Dim stream As New System.IO.MemoryStream(buffer)
Dim result As New BitmapImage()
With result
.BeginInit()
.StreamSource = stream
.EndInit()
End With
Return result
End Function
Public Shared Function ImageToBase64(ByVal image As BitmapSource) As String
Dim encoder As New PngBitmapEncoder
encoder.Frames.Add(BitmapFrame.Create(image))
Dim stream As New System.IO.MemoryStream
encoder.Save(stream)
stream.Seek(0, IO.SeekOrigin.Begin)
Dim buffer() As Byte = New System.IO.BinaryReader(stream).ReadBytes(stream.Length)
stream.Close()
Dim result As String = System.Convert.ToBase64String(buffer)
Return result
End Function
End Class
Using this converter, you can expose the base64 string as a property on an object, and bind the Source property of an image control to it.
EDIT: here is an example of how to use the converter:
<Window.Resources>
<s:String x:Key="TestImageString">iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABjUExURXK45////6fT8PX6/bTZ8onE643F7Pf7/pDH7PP5/dns+b7e9MPh9Xq86NHo947G7Hm76NTp+PL4/bHY8ojD67rc85bK7b3e9MTh9dLo97vd8/D3/Hy96Xe76Nfr+H+/6f///1bvXooAAAAhdFJOU///////////////////////////////////////////AJ/B0CEAAACHSURBVHjaXI/ZFoMgEEMzLCqg1q37Yv//KxvAlh7zMuQeyAS8d8I2z8PT/AMDShWQfCYJHL0FmlcXSQTGi7NNLSMwR2BQaXE1IfAguPFx5UQmeqwEHSfviz7w0BIMyU86khBDZ8DLfWHOGPJahe66MKe/fIupXKst1VXxW/VgT/3utz99BBgA4P0So6hyl+QAAAAASUVORK5CYIII</s:String>
<t:Base64ToImageConverter x:Key="converter"/>
<t:ImageToBase64Converter x:Key="backConverter"/>
<BitmapImage x:Key="defaultImage" UriSource="/delete_24.png"/>
</Window.Resources>
<StackPanel>
<Image x:Name="Image" Source="{Binding Source={StaticResource TestImageString}, Converter={StaticResource converter}, ConverterParameter={StaticResource defaultImage}}" Stretch="None"/>
<TextBlock x:Name="ConvertedImage" Text="{Binding ElementName=Image, Path=Source, Converter={StaticResource backConverter}, ConverterParameter={StaticResource defaultImage}}"/>
<Image x:Name="CheckImage" Source="{Binding ElementName=ConvertedImage, Path=Text, Converter={StaticResource converter}, ConverterParameter={StaticResource defaultImage}}" Stretch="None"/>
</StackPanel>
Instead of a static string resource, you could use any property on a bound object which returns an image in a format which is recognized by WPF and has been base64 encoded.