Displaying Image in silverlight Datagrid
Initially Silverlight was used only for rich UI but with the recent releases of Silverlight with lots of new features and enhancements, today Silverlight is used to develop Line-Of-Business (LOB) application. One of the features provided by Silverlight is implementing value converters. Value converter is mostly used you want to change the format of data before binding it to the datagrid. In this article, we will see how to display images in datagrid using value converter. I will be using the same datagrid used in my previous article.
First, I will implement a class inheriting ValueConverter class and implementing its methods. The ‘Convert’ method class defines the logic of formatting input data and returning data in a desired format. As a simple example, I retrieve the first name to set an image source and then return this image as output.
public class ImageConvertor : IValueConverter
{
#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var data = value as Data;
Image Img = new Image();
Img.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri(@"Images/" + data.FirstName + ".jpg", UriKind.Relative));
return Img;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
Similarly you can write your own value converter to format input data which is very useful in cases like currency conversion, date format change etc.
Next we have to add a reference to this converter on the xaml page having data grid. In this example, I have added a reference in grid resources Section as shown below
<Grid.Resources>
<local:ImageConvertor x:Key="imagecon"/>
</Grid.Resources>
Once a reference is added, we will use its key name to bind it to any datagrid column. Datagrid column template would look like
<sdk:DataGridTemplateColumn Header="Image" Width="80">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl Content=" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
Now on running my application, screen looks like
Notice the image on first column
In this article, we saw how to show image on datagrid. As an exercise, try writing a value converter to convert date of joining format. Good luckJ
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Silverlight New features & system requirement
Simple silver light sample application
How Silverlight works internally
Get set field, Properties,events or method using reflection
What is Silverlight,its features and how it works
Displaying Image in silverlight Datagrid
Working with Dockpanel in silverlight
showing row details on button click of silver light datagrid
Commonly asked interview questions on inheritance
Working with canvas in silverlight
Post Comment