Mortgage Report XMAL Stored State and DataGrid

In the last post we covered validation with data binding and converters.

Overview of Goals for Usability

When I first started working on this project in WPF I had a short list of GUI guidelines I wanted to adhere to:

1. Better overall use of space
2. Uniform spacing and orientation of user input fields
3. Ability to hide most optional fields
4. Ability to hide optional columns in the Amortization Schedule

With WPF and a small amount of research you practically fall into the first 2 objectives.

Ability to Hide Most Optional Fields

WPF was well thought out. Somewhere along the line someone working on WPF realized that binding should not stop just at values but could be extended to attributes and states in GUI components.

I wanted the Expander components in my MortgageReport Page to be open or closed based upon their previous state when the last save of the Mortgage objects occurred.

In a previous post I showed the Mortgage table in our database. It contained a bunch of expand bit typed columns. These would save whether or not an Expander was expanded.

Lets take a look at one of the Expanders in xaml:

<Expander Header="Home Value" HorizontalAlignment="Left" 
    Name="homeValueE" VerticalAlignment="Top" Width="225" 
    Grid.Row="3" IsExpanded="{Binding Path=HomeValueExpand}">
...
</Expander>

IsExpanded="{Binding Path=HomeValueExpand}" tells Expander to bind to the HomeValueExpand property in the Mortgage object. Dead simple.

Ability to hide optional columns in the Amortization Schedule

Hiding columns in a grid was a little more difficult although not much.

WPF has Visual Trees and Logical Trees to represent the UI. The Logical Tree contains all UI components specified in xaml or programmatically generated. The Visual Tree contains only components that need to be rendered and inherit from the Visual or Visual3D classes.

<DataGrid Grid.Column="0" Grid.Row="0" Name="amortizeGrid" 
    CanUserResizeRows="False" CanUserSortColumns="False" 
    CanUserReorderColumns="False" AutoGenerateColumns="False" 
    SelectionMode="Single" AlternatingRowBackground="Beige" Margin="10,0" 
    BorderThickness="1" FontWeight="Normal" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="Control">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding PaymentNum}" Header="Payment #" />
        ...
        <DataGridTextColumn Binding="{Binding CashFlow}" Header="Cash Flow" />
    </DataGrid.Columns>
</DataGrid>

While DataGrid is in the Visual Tree, DataGridColumns (a base class for DataGridTextColumns) is not. Therefore, binding to a property that modifies the visual appearence does not work.

The way I got around this was to hide or show columns in the DataGrid programmatically.

private void SetColumnsVisible()
{
    BooleanToVisibilityConverter btvc = new BooleanToVisibilityConverter();

    //we hate magic numbers
    amortizeGrid.Columns[GridConstants.AMORTIZE_GRID_TAX_COL].Visibility = 
        (System.Windows.Visibility)btvc.Convert(m.PropertyTaxShowDef, 
        null, null, null);
...
    amortizeGrid.Columns[GridConstants.AMORTIZE_GRID_CASHFLOW_COL].Visibility = 
        (System.Windows.Visibility)btvc.Convert(m.RentShowDef, 
        null, null, null);
}

Because Visibility is not a boolean property but an enum of Collapsed, Hidden or Visible, we need something to convert our bit/boolean values to Hidden or Visible. BooleanToVisibilityConverter is a class found Windows.Controls that does the conversion for you.

I hate magic numbers with the fury of a thousand suns. Nothing is more annoying then trying to keep straight what numbers represent when you have 50 other things to think about. What's more, what happens when the columns now represent something else? Using constants solves both of these problems, hence the GridConstants.

Loading Data into the Grid and Summary Data

Since binding is an amazingly effective tool in WPF I wanted to use it again for displaying the results of the Amortization logic. After the calculations are complete we receive a list of MonthIteration objects (we will cover its contents more in the next post). The MonthIteration class contains all the data that needs to be displayed in the Grid.

MonthIteration has public string properties that represent the underlying data. This allows for formatting of the values and feeding the DataGridTextColumns strings instead of something it doesn't know how to process.

private int _PaymentNum;
public String PaymentNum
{
    get
    {
        return _PaymentNum.ToString();
    }
}
...
private decimal _CashFlow;
public String CashFlow
{
    get
    {
        return _CashFlow.ToString("C2");
    }
}

If we look at our DataGrid code again we notice that the individual columns are bound.

<DataGrid Grid.Column="0" Grid.Row="0" Name="amortizeGrid" 
    CanUserResizeRows="False" CanUserSortColumns="False" 
    CanUserReorderColumns="False" AutoGenerateColumns="False" 
    SelectionMode="Single" AlternatingRowBackground="Beige" Margin="10,0" 
    BorderThickness="1" FontWeight="Normal" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="Control">
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding PaymentNum}" Header="Payment #" />
        ...
        <DataGridTextColumn Binding="{Binding CashFlow}" Header="Cash Flow" />
    </DataGrid.Columns>
</DataGrid>

The code that binds the list of MonthIteration to the DataGrid is shown below.

private void SetGridData()
{
    amortizeGrid.ItemsSource = theMI.ReturnAllIterations();
    totalInterestPaidL.Text = theMI.TotalInterestPaid;
    totalPaidL.Text = theMI.TotalInterestPrincipalPaid;
    int numOfMonths = theMI.NumOfPayments;
    int numOfYears = numOfMonths / 12;
    numOfMonths = numOfMonths % 12;
    loanTermL.Text = numOfYears.ToString() + " years " + 
        numOfMonths.ToString() + " month(s)";
    totalCostL.Text = theMI.Payment;
}

In a lot of Mortgage applications a summary of interesting facts about the mortgage is displayed to the user. The rest of the SetGridData method is just a summary of details I think might be helpful to the user.

13 years 4 months is a rather odd length for a mortgage. This is due to the implementation of my Extra Payment field shortening the length of the loan.

Each month the user stipulated paying an extra $321.00. This cut the mortgage time down by more then half. Having the summary information at the top is a nice way around scrolling to the bottom of the amortization and dividing by 12.

In our next post we will go more in depth with the amortization calculations.


Download the Code Here