Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Displaying Image in silverlight Datagrid
Posted By Sarin on Oct 24, 2012     RSS Feeds     Latest Hinduism news

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();

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
            <local:ImageConvertor x:Key="imagecon"/>
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">
                            <ContentControl Content=" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
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(, 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
Get set field, Properties,events or method using reflection
Displaying Image in silverlight Datagrid
Working with canvas in silverlight
Commonly asked interview questions on inheritance
Working with Dockpanel in silverlight
What is Silverlight,its features and how it works
Silverlight New features & system requirement
Simple silver light sample application
showing row details on button click of silver light datagrid
Changing CSS Properties of HTML element using JQuery

Post Comment