RIA.NET + Silverlight 3: Store picture in database and display it in UI controls (DataGrid, DataForm)

We have a table in SQL server with field of “Image” type. We add ADO.NET Entity Data Model by standard way:

Then add table to model. Sql type Image by default is mapping on C# Binary type.

Then Domain Service Class.

And link it with EF Model:

Main rule of web services: to hide service realization (platform and source code of course ). RIA.NET code generator creates entity class on client side, where picture stored in field of type – byte[] (simple byte array).

Add DataGrid on from and add DomainDataSource:

[CODE language="XML"]
LoadMethodName=”LoadGamer” LoadSize=”20″ AutoLoad=”True” >

[/CODE]

In the grid set AutoGenerateColumns=”False”. Add column to grid to display image (add image control into grid field template):

[CODE language="XML"]









[/CODE]

Direct binding doesn’t work. We need to convert “byte[]” value to “BitmapImage” value (we need write in xaml “Source =”{Binding Photo, Converter={StaticResource ImageConverter}}”/>“

There is a simple image converter below:

[CODE language="CSharp"]
public class ImageConverter : IValueConverter {
public object Convert(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture) {
BitmapImage bi = new BitmapImage();//create bitmap image
if(value!=null)
//fill bitmap by data from db
bi.SetSource(new MemoryStream((Byte[])value));
return bi;
}

public object ConvertBack(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture) {
throw new NotImplementedException();//image is readonly(view only)
}
}

[/CODE]

We need to create template field in DataForm (code is the same as in DataGrid):
[CODE language="XML"]

[/CODE]

Ok, now we want to open picture and store it on server. It’s very simple:

Add “open picture” button and on Onclick event add this code:

1) Get stream on local file using OpenFileDialog.

2) Read all bytes in array.

3) Assign selected entity Photo field to reader array.

[CODE language="CSharp"]
private void LoadPicture_Click(object sender, RoutedEventArgs e) {
var openFileDialog = new OpenFileDialog();
var res = openFileDialog.ShowDialog();
if (res.HasValue && res.Value) {
Stream stream = openFileDialog.File.OpenRead();
BinaryReader binaryReader = new BinaryReader(stream);
byte[] currentImageInBytes = binaryReader.ReadBytes((int) stream.Length);
//get selected entry from grid
((Gamer) gamerGrid.SelectedItem).Photo = currentImageInBytes;
}
}
[/CODE]

And last one, Call DomainDataSource::SubmitChanges to store in Database.

P.S. Waiting for RTM release of RIA.NET. And of course MSDN 2010