I am having trouble displaying an image with a web url in a WPF user control. I worked through all the suggestions for a similar problem posed on this site in August 2008 ( Image UriSource and data binding ), but none of these suggestions worked.
I would like:
<Image Width="50" Name="MemberImage"> <Image.Source> <BitmapImage DecodePixelWidth="50" UriSource="{Binding Member.ImageFilePathUri}" /> </Image.Source> </Image>
ImageFilePathUri is a Uri created along the line path:
public Uri ImageFilePathUri { get { return new Uri(this.ImageFilePath); } } }
This gives the UriSource property or the StreamSource property. as was expected.
I also tried using a value converter:
public class ImageConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { var image = new BitmapImage(); image.BeginInit(); if (value != null) { image.UriSource = new Uri((string)value); } image.DecodePixelWidth = 50; image.EndInit(); return image; } }
However, binding to it with:
<Image Name="TestImage" Width="50" Source="{Binding Path=Member.ImageFilePath, Converter=Parliament.HansardApplicationSuite.Logging.Helpers.ImageConverter}"></Image>
does not display the image.
A further attempt to load the image programmatically in the control constructor and / or in the Loaded control event also did not work:
if (this.MemberRollItemViewModel.Member != null) { var image = new BitmapImage(); image.BeginInit(); image.UriSource = new Uri(this.MemberRollItemViewModel.Member.ImageFilePath); image.DecodePixelWidth = 50; image.EndInit(); this.MemberImage.Source = image; }
One job that worked was to save the image to a local file path and display this:
<Image Width="50" Name="MemberImage"> <Image.Source> <BitmapImage DecodePixelWidth="50" UriSource="C:\Data\6bc64e7b-2df5-40d5-b6c4-eaf732318222.jpg" /> </Image.Source> </Image>
This is obviously only useful when debugging a problem and is not a solution. The same code, but replacing the http address for the local file path, does not work.
<Image.Source> <BitmapImage DecodePixelWidth="50" UriSource="http://member.org/6bc64e7b-2df5-40d5-b6c4-eaf732318222.jpg" /> </Image.Source>
Update:
This is an implementation of the MemberImage property.
public BitmapImage MemberImage { get { var image = new BitmapImage(); if (this.Member != null) { WebRequest request = WebRequest.Create(new Uri(this.Member.ImageFilePath, UriKind.Absolute)); request.Timeout = -1; WebResponse response = request.GetResponse(); Stream responseStream = response.GetResponseStream(); BinaryReader reader = new BinaryReader(responseStream); MemoryStream memoryStream = new MemoryStream(); byte[] bytebuffer = new byte[BytesToRead]; int bytesRead = reader.Read(bytebuffer, 0, BytesToRead); while (bytesRead > 0) { memoryStream.Write(bytebuffer, 0, bytesRead); bytesRead = reader.Read(bytebuffer, 0, BytesToRead); } image.BeginInit(); memoryStream.Seek(0, SeekOrigin.Begin); image.StreamSource = memoryStream; image.EndInit(); } return image; } }
Update:
This is how I attach to the control in my view:
<Image Width="50" Source="{Binding MemberImage}" />
MemberImage is the property I gave above. The context of my data is set correctly, because this property is executed, it simply does not return an image.