Loading Runtime Templates for LightSwitch Control

LightSwitch extensions from ComponentOne are almost customizable at design time. However, at times developers require some of the customizations to be done at runtime. In this blog we give a quick look at how we can customize C1FlexGrid to change the Cell Foreground using templates defined at runtime. Before we go ahead, lets give a look at the final output.

Define Runtime Template

To change the Cell Foreground, we would use the CellTemplate property for individual columns. But for that we have to first define the XAML template at runtime. Following XAML string defines the template for the cells.

const string verticalColumnXaml =  
       @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""  
    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">             
             <TextBlock Text=""{Binding City}"" FontFamily=""Segoe UI, Arial"" FontSize=""16""  
               FontWeight=""SemiBold"" Foreground=""RED"" HorizontalAlignment=""Left""/>             
           </DataTemplate>";  

Apply Template on Column

Once we have the Template defined, it is very easy to apply it on the column.

partial void FlexibleEmployeesGrid_Created()  
{  
    // Write your code here.   
    this.FindControl("C1FlexGrid").ControlAvailable += (s, e) =>  
    {  
       C1.Silverlight.FlexGrid.C1FlexGrid flex = e.Control as C1.Silverlight.FlexGrid.C1FlexGrid;  
       DataTemplate dataTemplate = XamlReader.Load(verticalColumnXaml)  
                                            as DataTemplate;  

       foreach (C1.Silverlight.FlexGrid.Column cl in flex.Columns)  
       {  
          if (cl.Header == "City")  
             cl.CellTemplate = dataTemplate;                 
       }  
    };  
}  

So fairly easy, this is just a basic implementation. You can define as complex template as required and apply this on the control. Download the sample below for complete implementation. Sample