How to: Customize Column and Row Headings

Oct 02, 2023
4 minutes to read

The following code example shows how to change captions in row and column headings.

Create a View Model

Create a CustomHeaderCaption class used to store the original and new heading.

SpreadsheetViewModel.cs
SpreadsheetViewModel.vb

csharp

public class CustomHeaderCaption
{
    public CustomHeaderCaption(string oldText, string newText)
    {
        this.OriginalCaption = oldText;
        this.NewHeader = newText;
    }
    public string OriginalCaption { get; set; }

    public string NewHeader { get; set; }
}

Public Class CustomHeaderCaption

    Public Sub New(ByVal oldText As String, ByVal newText As String)
        Me.OriginalCaption = oldText
        Me.NewHeader = newText

    Public Property OriginalCaption() As String

    Public Property NewHeader() As String

    End Sub
End Class

Create the SpreadsheetViewModelModel class. Declare the Captions property to access the collection of custom headings, and fill the collection in the ViewModel’s constructor.

SpreadsheetViewModel.cs
SpreadsheetViewModel.vb

csharp

public class SpreadsheetViewModel
{
    public SpreadsheetViewModel()
    {
        Captions = new ObservableCollection<CustomHeaderCaption>();
        FillCaptions();
    }
    public ObservableCollection<CustomHeaderCaption> Captions { get; set; }

    void FillCaptions()
    {
        Captions.Add(new CustomHeaderCaption("A", "Column 1"));
        Captions.Add(new CustomHeaderCaption("B", "Column 2"));
        Captions.Add(new CustomHeaderCaption("C", "Column 3"));

        Captions.Add(new CustomHeaderCaption("1", "Row 1"));
        Captions.Add(new CustomHeaderCaption("2", "Row 2"));
        Captions.Add(new CustomHeaderCaption("3", "Row 3"));
    }
}

Public Class SpreadsheetViewModel

    Public Sub New()
        Captions = New ObservableCollection(Of CustomHeaderCaption)()
        FillCaptions()
    End Sub
    Public Property Captions() As ObservableCollection(Of CustomHeaderCaption)

    Private Sub FillCaptions()
        Captions.Add(New CustomHeaderCaption("A", "Column 1"))
        Captions.Add(New CustomHeaderCaption("B", "Column 2"))
        Captions.Add(New CustomHeaderCaption("C", "Column 3"))

        Captions.Add(New CustomHeaderCaption("1", "Row 1"))
        Captions.Add(New CustomHeaderCaption("2", "Row 2"))
        Captions.Add(New CustomHeaderCaption("3", "Row 3"))
    End Sub
End Class

Create a Converter

Create a converter class to convert old captions. In this example, the HeaderConverter class implements the IMultiValueConverter interface to specify multiple bindings in XAML. The converter compares the original heading with the CustomHeaderCaption collection item’s OriginalCaption property value. If values are the same, the converter changes the heading to the item’s NewHeader value.

HeaderItemEx.cs
HeaderItemEx.vb

csharp

public class HeaderConverter : IMultiValueConverter
{
    public object Convert(object[] value, Type targetType, object parameter,
        CultureInfo culture)
    {
        if (value == null || value[0] == null)
            return null;
        string columnHeader = value[0].ToString();
        ObservableCollection<CustomHeaderCaption> collection =
            value[1] as ObservableCollection<CustomHeaderCaption>;
        if (collection == null || collection.Count == 0)
            return columnHeader;

        string result = collection.Where(l => l.OriginalCaption == columnHeader).
            Select(caption => caption.NewHeader).FirstOrDefault();
        if (result != null)
            return result;

        return columnHeader;
    }

    public object[] ConvertBack(object value, Type[] targetTypes,
        object parameter, CultureInfo culture)
    {
        return null;
    }
}

Public Class HeaderConverter
    Implements IMultiValueConverter

    Public Function Convert(ByVal value() As Object,
                            ByVal targetType As Type, 
                            ByVal parameter As Object,
                            ByVal culture As CultureInfo) As Object Implements IMultiValueConverter.Convert
        If value Is Nothing OrElse value(0) Is Nothing Then
            Return Nothing
        End If
        Dim columnHeader As String = value(0).ToString()
        Dim collection As ObservableCollection(Of CustomHeaderCaption) =
            TryCast(value(1), ObservableCollection(Of CustomHeaderCaption))
        If collection Is Nothing OrElse collection.Count = 0 Then
            Return columnHeader
        End If

        Dim result As String =
            collection.Where(Function(l) l.OriginalCaption = columnHeader).
            Select(Function(caption) caption.NewHeader).FirstOrDefault()
        If result IsNot Nothing Then
            Return result
        End If

        Return columnHeader
    End Function

    Public Function ConvertBack(ByVal value As Object, 
                                ByVal targetTypes() As Type,
                                ByVal parameter As Object,
                                ByVal culture As CultureInfo) As Object() Implements IMultiValueConverter.ConvertBack
        Return Nothing
    End Function
End Class

Add Row and Column Templates

In XAML, bind the ViewModel to the DataContext property, and the HeaderConverter to the resources.
Add resource templates for rows and columns.