Wednesday, August 26. 2009
Transfer and bind a image as byte array to a silverlight application
This sample shows how to bind a image to a silverlight application when the image is transfered within a wcf service as a byte array.
Create a new Silverlight prjeject, and choose Hoste the silverligth application in a new website.
Then add a Silverlight-enabled WCF Service to the web project.
In the service class there is an operation contract which returns an object with two properties. Since i'm quite lazy, the DataContract class is defined in the same file.
namespace SLBindBinaryImage.Web
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public ImageClass GetImage()
{
FileStream fs = File.OpenRead(@"c:\project\Kaderli\Silverlight\SLBindBinaryImage\SLBindBinaryImage.Web\img.jpg");
byte[] data = new byte[fs.Length];
fs.Read(data, 0, data.Length);
ImageClass ic = new ImageClass { FileName = "img.jpg", ImageFile = data };
return ic;
}
}
[DataContract]
public class ImageClass
{
[DataMember]
public string FileName { get; set; }
[DataMember]
public byte[] ImageFile { get; set; }
}
}
I just add one Image and one TextBox control to the xaml. The importent thing is to add a Resource to to the grid which is responsible for converting my byte array intot the image.
<UserControl x:Class="SLBindBinaryImage.MainPage"
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"
xmlns:local="clr-namespace:SLBindBinaryImage"
mc:Ignorable="d" Width="600" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<local:BinaryArrayToURIConverter x:Key="binaryArrayToURIConverter" />
</Grid.Resources>
<StackPanel>
<Button x:Name="btnLoadImage" Content="Get image" Click="btnLoadImage_Click">
</Button>
<TextBlock x:Name="txtImageName" Text="{Binding FileName, Mode=OneWay}"></TextBlock>
<Image x:Name="img" Height="300" Source="{Binding ImageFile,Converter={StaticResource binaryArrayToURIConverter}}"></Image>
</StackPanel>
</Grid>
</UserControl>
In this sample i only implemented the Convert method. Now if the binding of the Image takes place, this Convert methode is called, and the BitmapImage is bound to the control.
using System;
using System.Globalization;
using System.IO;
using System.Windows.Data;
using System.Windows.Media.Imaging;
namespace SLBindBinaryImage
{
public class BinaryArrayToURIConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
MemoryStream ms = new MemoryStream((byte[])value);
BitmapImage image = new BitmapImage();
image.SetSource(ms);
return image;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
solution to download(Silverlight 3)
IValueConverter
StaticResource
1. Create a new silverlight project
Create a new Silverlight prjeject, and choose Hoste the silverligth application in a new website.
Then add a Silverlight-enabled WCF Service to the web project.
2. Create the service
In the service class there is an operation contract which returns an object with two properties. Since i'm quite lazy, the DataContract class is defined in the same file.
namespace SLBindBinaryImage.Web
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public ImageClass GetImage()
{
FileStream fs = File.OpenRead(@"c:\project\Kaderli\Silverlight\SLBindBinaryImage\SLBindBinaryImage.Web\img.jpg");
byte[] data = new byte[fs.Length];
fs.Read(data, 0, data.Length);
ImageClass ic = new ImageClass { FileName = "img.jpg", ImageFile = data };
return ic;
}
}
[DataContract]
public class ImageClass
{
[DataMember]
public string FileName { get; set; }
[DataMember]
public byte[] ImageFile { get; set; }
}
}
3. Bind the image within the SL application
I just add one Image and one TextBox control to the xaml. The importent thing is to add a Resource to to the grid which is responsible for converting my byte array intot the image.
<UserControl x:Class="SLBindBinaryImage.MainPage"
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"
xmlns:local="clr-namespace:SLBindBinaryImage"
mc:Ignorable="d" Width="600" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<local:BinaryArrayToURIConverter x:Key="binaryArrayToURIConverter" />
</Grid.Resources>
<StackPanel>
<Button x:Name="btnLoadImage" Content="Get image" Click="btnLoadImage_Click">
</Button>
<TextBlock x:Name="txtImageName" Text="{Binding FileName, Mode=OneWay}"></TextBlock>
<Image x:Name="img" Height="300" Source="{Binding ImageFile,Converter={StaticResource binaryArrayToURIConverter}}"></Image>
</StackPanel>
</Grid>
</UserControl>
In this sample i only implemented the Convert method. Now if the binding of the Image takes place, this Convert methode is called, and the BitmapImage is bound to the control.
using System;
using System.Globalization;
using System.IO;
using System.Windows.Data;
using System.Windows.Media.Imaging;
namespace SLBindBinaryImage
{
public class BinaryArrayToURIConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
MemoryStream ms = new MemoryStream((byte[])value);
BitmapImage image = new BitmapImage();
image.SetSource(ms);
return image;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
4. Links and download
solution to download(Silverlight 3)
IValueConverter
StaticResource
Comments
Display comments as
(Linear | Threaded)
Add Comment
Quicksearch
contact
Blog abonnieren
Getaggte Artikel
Aktuelle Einträge
- What is the default for WCF if InstanceContextMode is not set explicit
- Tuesday, June 8 2010
- Transfer and bind a image as byte array to a silverlight application
- Wednesday, August 26 2009
- Using a Businessobject in Silverlight from client and server
- Friday, August 21 2009
- Silverlight/WCF starter solution (not for dummies)
- Wednesday, July 22 2009
- Use WCF service from a Silverlight application
- Tuesday, August 5 2008
- SVN Mirror unter Windows einrichten
- Monday, January 7 2008