Question

As part of a WPF presentation, I need a control like the mock up below to let a user:

1. enter a variable number of percentages up to 100%
2. know what the total of all entries are
3. know what the balance is (100% – TotalEntered)

While this is obviously a pretty pedestrian requirement, I am at a loss as to how to implement it. It’s a one-off requirement, so it need not be a reuseable, although it would be nice if it could be. A pattern to allow separation and testability (ie, MVVM) would also be great.

I assume the existing DataGrid control is the right tool to go with, but maybe it’s overkill. Can someone suggest some starting implementation code or link to same?

Cheers,
Berryl

Answer 1

VM = “ViewModel” implementing INotifyPropertyChanged.

Create a Shares VM and a Share VM (implementation removed for brevity).

SharesViewModel
{
    double TotalPercent
    double RemainingPercent
    ObservableCollection<ShareViewModel> Shares
    // foreach Share in Shares 
    //   handle PropertyChanged on ActualPercent to update TotalPercent
}
ShareViewModel
{
    int Line
    string Percent // on set, parse/validate and set ActualPercent
    double ActualPercent
}

Use this article to see how to keep the Line sequence in order.

Bind DataGrid ItemsSource to SharesViewModel Shares property.

(Ensure to validate percent inputs. IDataErrorInfo may help.)