locked
Binding an image in a custom control RRS feed

  • Question

  • Hi, I try to bind an Image field in a custom control like this:

    <UserControl x:Class="LSExtentions.Presentation.Controls.ImageViewer"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client">
      <framework:StatesControl HorizontalAlignment="Stretch">
        <span style="text-decoration:underline"><strong><Image x:Name="ImageBox" Source="{Binding Value,Mode=OneWay}">
    </strong></span>  </framework:StatesControl>
    </UserControl>
    

    The image is not shown at runtime

    What could be wrong?

    Thanks

    Thursday, July 28, 2011 7:01 PM

Answers

  • Hi Bart

    In your XAML you need to run the bound value through a converter.

    	public class ImageConvertor : IValueConverter
    	{
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			if (value != null)
    			{
    				byte[] bytedata = (byte[])value;
    				BitmapImage bmpImage = new BitmapImage();
    				MemoryStream stream = new MemoryStream(bytedata);
    				bmpImage.SetSource(stream);
    				return (ImageSource)bmpImage;
    			}
    			else
    				return null;
    		}
     
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    	} 

    Regards

    Paul

    • Marked as answer by Bart.NET Friday, July 29, 2011 1:36 PM
    Friday, July 29, 2011 10:37 AM

All replies

  • It depends on what data type the control is bound. If, for example, it is the Image semantic type, then you need to convert the byte array (that's what an Image semantic type really is) to an ImageSource and hand that to the Image control's Source property. The type of ImageSource you probably would want to use is a WriteableBitmap.


    Justin Anderson, LightSwitch Development Team
    Thursday, July 28, 2011 8:36 PM
    Moderator
  • Hi Justin, it is indeed an Image type.

    Do you have a sample how to do this for a LS extension control?

    How is it done for the Image Editor in LS?

    Is it also possible to inherit a LS control in an extension control?

    Thanks and congratulation for the great product

    Bart

    Friday, July 29, 2011 8:47 AM
  • Hi Bart

    In your XAML you need to run the bound value through a converter.

    	public class ImageConvertor : IValueConverter
    	{
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			if (value != null)
    			{
    				byte[] bytedata = (byte[])value;
    				BitmapImage bmpImage = new BitmapImage();
    				MemoryStream stream = new MemoryStream(bytedata);
    				bmpImage.SetSource(stream);
    				return (ImageSource)bmpImage;
    			}
    			else
    				return null;
    		}
     
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    	} 

    Regards

    Paul

    • Marked as answer by Bart.NET Friday, July 29, 2011 1:36 PM
    Friday, July 29, 2011 10:37 AM
  • Thanks Paul, that was the missing link.
    Friday, July 29, 2011 1:36 PM
  • I have a follow-up question about two-way binding to an Image property here: http://social.msdn.microsoft.com/Forums/en-US/lsextensibility/thread/9068e0eb-d060-4821-90db-439035b339ff I would appreciate any input you all have.

    Thanks.


    Sunday, August 21, 2011 5:56 PM