Excel accounting style column for WPF DataGrid


For our WPF applications we had a requirement that the WPF DataGrid must be able to show amounts just like the Excel accounting format. In short this means: currency symbol aligned to the left and the amount aligned to the right within a column. Default such column is not available but with some effort it is relative simple to create this kind of a column.

First we create a control which shows an amount like the Excel accounting style.


    
        
            
                
                    
                        
                        
                    
                    
                    
                
            
        
    

public class AccountingCell : Control
{
    static AccountingCell()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(AccountingCell), new FrameworkPropertyMetadata(typeof(AccountingCell)));
    }

    public string Amount
    {
        get { return (string)GetValue(AmountProperty); }
        set { SetValue(AmountProperty, value); }
    }

    public static readonly DependencyProperty AmountProperty =
        DependencyProperty.Register("Amount", typeof(string), typeof(AccountingCell), new UIPropertyMetadata(null));
}

The AccountingCell control derives from Control and has one extra dependency property of type string which is named Amount. The DataGridHelper class (line 10) is just a helper class which reads the currency symbol from the regional settings (Current culture).

The next step is creating a DataGridAccountingColumn class which derives from the DataGridTextColumn. A dependency property is added for setting the number of decimal digits used for formatting the amount. We override the GenerateElement method which is responsible for creating the elements when the cell is not in edit mode.

public class DataGridAccountingColumn : DataGridTextColumn
{
    protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
    {
        AccountingCell accountingCell = new AccountingCell();

        Binding newBinding = new Binding(((Binding)Binding).Path.Path);

        string decimalPattern = new String('0', DecimalDigits);
        string accountingFormat = "{0:#,##0." + decimalPattern + "}";
        newBinding.StringFormat = accountingFormat;
        // Ensure the current culture passed into bindings is the OS culture.
        // By default, WPF uses en-US as the culture, regardless of the system settings.
        newBinding.ConverterCulture = System.Threading.Thread.CurrentThread.CurrentCulture;

        accountingCell.SetBinding(AccountingCell.AmountProperty, newBinding);

        return accountingCell;
    }

    public int DecimalDigits
    {
        get { return (int)GetValue(DecimalDigitsProperty); }
        set { SetValue(DecimalDigitsProperty, value); }
    }

    public static readonly DependencyProperty DecimalDigitsProperty =
        DependencyProperty.Register("DecimalDigits", typeof(int), typeof(DataGridAccountingColumn), new UIPropertyMetadata(2));        

}

In the GenerateElement method we create an AccountingCell object and create a new binding based on the orginal column binding because we cannot change the orginal binding. On the new binding we set the StringFormat property so the amount is properly formatted.

Now we can use the accounting column as follows:


    
        
     

As you can see the result is a column which shows the amount just like the Excel accounting format.

Source code can be downloaded from here.

2 thoughts on “Excel accounting style column for WPF DataGrid”

Leave a comment