Skip to main content Skip to footer

Unbound Image Column in C1FlexGrid

Columns with images are pretty common and very useful. Consider a very simple scenario where an image column represents the current status of an item in a grid. Say, we have a table with following fields:-

  1. Name--string
  2. AvailableQuantity--int
  3. Price--Money

Now along with the above fields, user may like to include an image column to indicate the status based on the value of field AvailableQuantity. Lets say, for value less than 10, user wants to show an image indicating 'Urgent' and for values between 10 and 50, show a 'warning' icon and so on. Code below adds an Image column and binds the image:-



public partial class FlexibleProductsGrid  
{  

   C1.Silverlight.FlexGrid.C1FlexGrid _flex;  
   IContentItemProxy proxy;  

   partial void FlexibleProductsGrid_Created()  
   {  
     proxy = this.FindControl("C1FlexGrid");  
     proxy.ControlAvailable += new EventHandler<ControlAvailableEventArgs>(proxy_ControlAvailable);  
   }  

   void proxy_ControlAvailable(object sender, ControlAvailableEventArgs e)  
   {  
    _flex = e.Control as C1.Silverlight.FlexGrid.C1FlexGrid;  
    \_flex.Columns.Insert(0, new LSColumn(\_flex.DataContext as IContentItem) { Header = "Status" });  
    _flex.CellFactory = new ImageCellFactory();  
   }  
}  


CellFactory class defined below creates the required image content :-



public class ImageCellFactory : CellFactory  
{  
    public override void CreateCellContent(C1.Silverlight.FlexGrid.C1FlexGrid grid, System.Windows.Controls.Border bdr, CellRange rng)  
    {  
      base.CreateCellContent(grid, bdr, rng);  

      if (grid.Columns[rng.Column].Header == "Status")  
      {  
        var img = new Image();  
        var binding = new Binding("AvailableQuantity");  
        binding.Converter = new ImageConverter();  
        img.SetBinding(Image.SourceProperty, binding);  
        bdr.Child = null;  
        bdr.Child = img;  
      }  
    }  
 }  


Following code snippet implements the IValueConverter to convert value to an image:-



public class ImageConverter : IValueConverter  
{  
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
    {  
      if (value != null)  
      {  
        var d = (int)value;  
        if (d < 10)  
          return GetBitmapImage("urgent.png");  
        else if (d > 10 && d < 50)  
          return GetBitmapImage("attention.png");  
        else if (d > 50)  
          return GetBitmapImage("safe.png");  
       }  

       return null;  
   }  

   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
   {  
      return null;  
   }  

   private  BitmapImage GetBitmapImage(string fileName)  
   {  
      byte[] bytes = GetImageByName(fileName);  
      using (MemoryStream ms = new MemoryStream(bytes))  
      {  
        var bi = new BitmapImage();  
        bi.SetSource(ms);  
        return bi;  
      }  
    }  

  private  byte[] GetImageByName(string fileName)  
  {  
     Assembly assembly = Assembly.GetExecutingAssembly();  
     fileName = Application.Current.Details.Name + ".Resources." + fileName;  

     using (Stream stream = assembly.GetManifestResourceStream(fileName))  
     {  
        if (stream == null) return null;  
        byte[] buf = new byte[stream.Length];  
        stream.Read(buf, 0, (int)stream.Length);  
        return buf;  
     }  
   }  
 }  

If you run the sample, grid appearance looks like the image below. Note that all the images are added to a 'Resource' folder in 'Client' project with 'Build' type of the images set as 'EmbeddedResource'.

MESCIUS inc.

comments powered by Disqus