Bind an “Image” column to a WPF DataGrid (XCEED)

Last week I was evaluating Xceed WPF grid & it was awesome. My objective is to connect the HR database with a nice sexy WPF application, so any employee in the company can search on other employees in style J

First you need to write a converter to convert the byte[] stream to a BitmapImage.

public
object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

 


Byte[] bytes = value as
Byte[];


MemoryStream mem = new
MemoryStream(bytes);

mem.Write(bytes, 0, bytes.Length);

mem.Seek(0, SeekOrigin.Begin);


BitmapImage image = new
BitmapImage();

 

image.BeginInit();

image.DecodePixelWidth = 60;

image.CacheOption = BitmapCacheOption.OnLoad;

image.StreamSource = mem;

image.EndInit();


return image;

 

}

 


public
object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

     return
null;

}

 

#endregion

}

Then do the xaml…….. That’s it. I hope I don’t have to show the code behind how to to the databind J

 

<Window x:Class=”Brandix.Employees”


xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;


xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;


xmlns:converters=”clr-namespace:Brandix”


Title=”Employees” Height=”600″ Width=”800″ xmlns:xcdg=”http://schemas.xceed.com/wpf/xaml/datagrid&#8221; Loaded=”Window_Loaded”>


<Window.Resources>


<converters:ImageConverter x:Key=”imageConverter” />


</Window.Resources>


<Grid>


<xcdg:DataGridControl Height=”160″ HorizontalAlignment=”Left” Name=”dgEmployees” VerticalAlignment=”Top” Width=”Auto” AutoCreateColumns=”False”>


<xcdg:DataGridControl.View>


<xcdg:CardflowView3D />


</xcdg:DataGridControl.View>


<xcdg:DataGridControl.Columns>


<xcdg:Column FieldName=”epic_picture” ReadOnly=”True” Title=”Picture” IsMainColumn=”True”>


<xcdg:Column.CellContentTemplate>


<DataTemplate>


<Image Source=”{xcdg:CellEditorBinding Converter={StaticResource imageConverter}}” />


</DataTemplate>


</xcdg:Column.CellContentTemplate>


</xcdg:Column>


</xcdg:DataGridControl.Columns>


</xcdg:DataGridControl>


</Grid>

</Window>

Advertisements