locked
UserControl Image Source Binding RRS feed

  • Question

  • Hi,

    for my lightswitch app i want to add my own silverlight usercontrol with an Image-control on it.

    the name of the entity in lightswitch is TestPicture (pl: TestPictures)and the property ist Picture of type Image.

    in the silverlight UserControl / Image I have the following binding:

    <Image Source="{Binding Screen.TestPictures.SelectedItem.Picture}"

    but the Picture will not show.

    Should I try using BindsDirectlyToSource=True should I try using DataConverters. . .

    what to do? how is the binding correct

    thank you in advance

    Oliver

    Tuesday, April 23, 2013 3:12 PM

Answers

  • the reason is because the data in the database is originally a Byte Array containing the complete file data of the Picture.

    So we need a class that implements the Interface IValueConverter. add it to the resources, and use it in the Binding-Expression.

    • Marked as answer by OlimilO Friday, May 10, 2013 9:59 AM
    Friday, May 10, 2013 9:59 AM

All replies

  • the reason is because the data in the database is originally a Byte Array containing the complete file data of the Picture.

    So we need a class that implements the Interface IValueConverter. add it to the resources, and use it in the Binding-Expression.

    • Marked as answer by OlimilO Friday, May 10, 2013 9:59 AM
    Friday, May 10, 2013 9:59 AM
  • new LS-app named "TestImageControl" with one entity named "TestPicture(s)" properties: String "Name", String "PathToThePicture", Image "PictureStoredInDB"

    Add 1 new project of type "Silverlight Class Library" named "BytesImageControl" add 1 Silverlight UserControl to the Silverlight Project named "BytesImageControl"

    the xaml:

    <UserControl x:Class="BytesImageControl.BytesImageControl"
        xmlns:converter="clr-namespace:BytesImageControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <converter:BytesToBitmapConverter x:Key="BytesToBitmapConverter" />
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Image Source="{Binding Screen.TestPictures.SelectedItem.PictureStoredInDB, Converter={StaticResource BytesToBitmapConverter}}" HorizontalAlignment="Left" Height="277" VerticalAlignment="Top" Width="358" Stretch="None"/>
        </Grid>
    </UserControl>
    

    pay attention to this important part:

    Image Source="{Binding Screen.TestPictures.SelectedItem.PictureStoredInDB, Converter={StaticResource BytesToBitmapConverter}}" 

    the code-behind:

    Imports System.Windows.Data
    Imports System.Windows.Media.Imaging
    Partial Public Class BytesImageControl
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class BytesToBitmapConverter : Implements IValueConverter
        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
            If value Is Nothing OrElse Not (TypeOf value Is Byte()) Then Return Nothing
            Dim bytes As Byte() = DirectCast(value, Byte())
            Dim bmi As New BitmapImage
            Using ms As New System.IO.MemoryStream(bytes)
                bmi.SetSource(ms)
            End Using
            Return DirectCast(bmi, ImageSource)
        End Function
        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
            Throw New NotImplementedException
        End Function
    End Class
    

    compile the silverlight UserControl.

    in the LS-app add a List-Detail screen of TestPicture add a UserControl click "Add reference" and select the usercontrol from the projects and add the UserControl to the references.

    Friday, May 10, 2013 12:13 PM