Align Text in Autogenerated Column of Rad Silverlight Girdview and Silverlight Gridview

In this article I am going to show how you can align data in autogenrated columns cell of Silverlight gridview and also of Rad Control Silverlight Gridview. In both of the below Example of Gridview I want to align the numeric data left in my cell and other except numeric remain in same format.

RAD Silverlight Gridview XAML code of Silverlight Gridview

<telerik:RadGridView  
         Name="clubsGrid" 
         ItemsSource="{Binding Clubs}"
 AutoGeneratingColumn="clubsGrid_AutoGeneratingColumn"
         Margin="5">
</telerik:RadGridView>

private void clubsGrid_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
{
 GridViewDataColumn column = e.Column as GridViewDataColumn;
        if (column.DataType == typeof(int)
           || column.DataType == typeof(decimal)
           || column.DataType == typeof(float)
                )
       {
           column.TextAlignment = TextAlignment.Right;
       }
 }

As you see in above code I attached event called AutoGeneratingColumn on gridview control and checking DataType of each column which in turn check the datatype of the property which going to be attached with that column. So when the DataType is int or decimal or float I set TextAlignment propery of column to Right so display numeric value in right.

Output

So the output shows the column with numeric value "StadiumCapacity" is align to right.

Silvelight SDK Gridview control

There are two way to achieve this in Silverlight gridview

     1) Setting cell style from code behind file but creating Style

     2) Setting cell style from code behind file but using resource 

XAML code of Silverlight Gridview

<sdk:DataGrid   IsReadOnly="True" 
       Name="mysGrid" 
      AutoGeneratingColumn="DataGrid_AutoGeneratingColumn"
       ItemsSource="{Binding Clubs, Mode=OneWay}">
</sdk:DataGrid>

Same as RAD Gridview here also wrote AutoGeneratingColumn="DataGrid_AutoGeneratingColumn" which take care of Autogenerated coulmn.

First Way : Creating Sytle

 private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
 {
    if (e.PropertyType == typeof(int)
        || e.PropertyType == typeof(decimal)
        || e.PropertyType == typeof(float)
       )
    {
        var rightCellStyle = new Style(typeof(DataGridCell)); 
               
        rightCellStyle.Setters.Add(new Setter(
             Control.HorizontalContentAlignmentProperty,
             HorizontalAlignment.Right));

        DataGridBoundColumn obj = e.Column as DataGridBoundColumn;
        obj.CellStyle = rightCellStyle;
     }}

As you see in above code same as RAD gridview control here e.PropertyType used to check the type of the autogenerated column but the change over here is need to create cell style and than assing the style to CellStyle property of gridview column.

Second Way : Using Resource

In this solution you need to register the style for the gridview cell as shown below and than you can use this to assign to CellStyle.

Resource in App.XAML

  <Style x:Key="RightCellStyle" TargetType="sdk:DataGridCell">
      <Setter Property="HorizontalContentAlignment" Value="Right" />
  </Style>

private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.PropertyType == typeof(int)
        || e.PropertyType == typeof(decimal)
        || e.PropertyType == typeof(float)
       )
       {
           DataGridBoundColumn obj = e.Column as DataGridBoundColumn;
           var rightCellStyle = Application.Current.Resources["RightCellStyle"] as Style;
           obj.CellStyle = rightCellStyle;
       }
}

Now in this code you dont require to create any style you just need to fetch the resource that you register in the App.XAML file and need to convert in Style.

Output

So the output shows the column with numeric value "StadiumCapacity" is align to right.

Note : in both the way output remain same.

Source : http://pranayamr.blogspot.in/2012/07/align-text-in-autogenerated-column-of.html