Right-Align Column Headers In LightSwitch Grid

September 2, 2012  |  LightSwitch

In a previous post, I demonstrated one way of having vertical column header text in LightSwitch grids. A comment in that post asked if it was possible to use a similar approach to right-align column header text.

Here’s one way to do it… create a new override column header style based on the default column header style, but with an additional setter to modify the horizontal alignment property of the TextBlock. Iterate through the grid’s columns and apply that override column header style to the columns which have their TextAlignment property set to Right.

using System.Collections.Generic;
using Microsoft.LightSwitch;
using Microsoft.LightSwitch.Presentation.Extensions;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows;
using Microsoft.LightSwitch.Presentation.Implementation.Controls;

namespace LightSwitchApplication
{
    public partial class EditableProductsGrid
    {

        partial void EditableProductsGrid_InitializeDataWorkspace(List<IDataService> saveChangesTo)
        {
            this.FindControl("grid").ControlAvailable += (s, e) =>
            {
                var dataGrid = e.Control as DataGrid;
                var overrideColumnHeaderStyle = new Style(typeof(DataGridColumnHeader));
                overrideColumnHeaderStyle.BasedOn = dataGrid.ColumnHeaderStyle;
                overrideColumnHeaderStyle.Setters.Add(new Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Right));

                foreach (var column in dataGrid.Columns)
                {
                    var ci = column.Header as ContentItemWrapperForColumnHeader;
                    var textAlignmentProperty = (string)ci.ContentItem.Properties["Microsoft.LightSwitch:RootControl/TextAlignment"];
                    if (textAlignmentProperty =="Right")
                        column.HeaderStyle = overrideColumnHeaderStyle;
                }
            };

        }
    }
}

Thanks to Ciro for the VB version:

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Controls.Primitives
Imports Microsoft.LightSwitch.Presentation.Implementation.Controls

'Prerequisites:
' Need to Add References to Client project (File View/Client/References/Add References) to:
' 1. System.Windows.Controls.Data (.NET tab of Add Reference dialog)
' 2. Microsoft.LightSwitch.Client.Internal (Use Browse tab do point do dll: C:Program FilesMicrosoft Visual Studio 10.0Common7IDELightSwitch1.0ClientMicrosoft.LightSwitch.Client.Internal.dll)

Namespace LightSwitchApplication

    Public Class EditableCarsGrid

        Private Sub EditableProductsGrid_InitializeDataWorkspace(saveChangesTo As System.Collections.Generic.List(Of Microsoft.LightSwitch.IDataService))
            ' Write your code here.

            AddHandler FindControl("grid").ControlAvailable, _
                       Sub(sender As Object, e As ControlAvailableEventArgs)

                           Dim dataGrid = CType(e.Control, DataGrid)

                           Dim overrideColumnHeaderStyle = New Style(GetType(DataGridColumnHeader))
                           '
                           overrideColumnHeaderStyle.BasedOn = dataGrid.ColumnHeaderStyle
                           overrideColumnHeaderStyle.Setters.Add(New Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Right))

                           For Each column In dataGrid.Columns
                               Dim ci = CType(column.Header, ContentItemWrapperForColumnHeader)

                               Dim textAlignmentProperty = CStr(ci.ContentItem.Properties("Microsoft.LightSwitch:RootControl/TextAlignment"))

                               If (textAlignmentProperty = "Right") Then
                                   column.HeaderStyle = overrideColumnHeaderStyle
                               End If
                           Next

                       End Sub

        End Sub

    End Class

End Namespace

8 comments on “Right-Align Column Headers In LightSwitch Grid

  1. Hi Jewel

    Very helpful piece of code.

    Thank You

  2. paul van bladel on said:

    Hi Jewel,

    Very nice ! Thanks for sharing.
    paul.

  3. Hi Jewel! Another great post. Thank you to share it with us.

    Here is the VB.Net release:

    Imports System.Windows
    Imports System.Windows.Controls
    Imports System.Windows.Controls.Primitives
    Imports Microsoft.LightSwitch.Presentation.Implementation.Controls

    ‘Prerequisites:
    ‘ Need to Add References to Client project (File View/Client/References/Add References) to:
    ‘ 1. System.Windows.Controls.Data (.NET tab of Add Reference dialog)
    ‘ 2. Microsoft.LightSwitch.Client.Internal (Use Browse tab do point do dll: C:Program FilesMicrosoft Visual Studio 10.0Common7IDELightSwitch1.0ClientMicrosoft.LightSwitch.Client.Internal.dll)

    Namespace LightSwitchApplication

    Public Class EditableCarsGrid

    Private Sub EditableProductsGrid_InitializeDataWorkspace(saveChangesTo As System.Collections.Generic.List(Of Microsoft.LightSwitch.IDataService))
    ‘ Write your code here.

    AddHandler FindControl(“grid”).ControlAvailable, _
    Sub(sender As Object, e As ControlAvailableEventArgs)

    Dim dataGrid = CType(e.Control, DataGrid)

    Dim overrideColumnHeaderStyle = New Style(GetType(DataGridColumnHeader))

    overrideColumnHeaderStyle.BasedOn = dataGrid.ColumnHeaderStyle
    overrideColumnHeaderStyle.Setters.Add(New Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Right))

    For Each column In dataGrid.Columns
    Dim ci = CType(column.Header, ContentItemWrapperForColumnHeader)

    Dim textAlignmentProperty = CStr(ci.ContentItem.Properties(“Microsoft.LightSwitch:RootControl/TextAlignment”))

    If (textAlignmentProperty = “Right”) Then
    column.HeaderStyle = overrideColumnHeaderStyle
    End If
    Next

    End Sub

    End Sub

    End Class

    End Namespace

  4. James Croom on said:

    Thanks!!

  5. Thanks a mil’!

  6. Otis Ranger on said:

    Great Post! I have used it and amended slightly to right align the values within the cells. I have posted it here (http://social.msdn.microsoft.com/Forums/en-US/lsextensibility/thread/59ca3f50-3ded-47cb-9694-332776c066c9/) and given you credit where it is due :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.