DataContext on the Mortgage Report Page

In the last post we covered retrieving and showing existing Mortgage Names.

In this post we will be dealing with more data binding and some user input.

Mortgage Report Page

The MortgageReport Page serves 2 main purposes:

1. Allow the user to specify and save the details of a Mortgage
2. Amortize the Mortgage

Compare this new GUI with the old one and we can see a clear difference.

More space is now allocated to the actual amortization of the loan. The input fields are minority of the page and properties the user is not interested in can be minimized. On top of the cosmetic improvement I had spent less time laying out and designing the GUI in WPF. With windows forms, any time I decided to add a new feature, rearranging the input fields would become a tedious rush of shuffling and resizing input fields. Now it's as simple as adding a few lines of xaml to an existing Panel tag.

In a previous post we listed all of the details we wanted to track during the Amortization.

• Principal
• Interest
• Extra Payments
• Balance
• Home Value
• Tax
• Insurance
• Association Dues
• Maintenance
• Total Monthly Cost
• Equity
• Loan To Value
• Rental Income
• Cash Flow
• Tax Appreciation
• Insurance Appreciation
• Association Dues Appreciation
• Maintenance Appreciation
• Rent Appreciation
• Home Value Appreciation

Notice that most of these values are shown in the MortgageReportPage. Equity, Loan to Value, Cash Flow and Total Monthly Cost are missing from the Left hand side. This is due to these values being the result of the other values being operated on.

Data Binding

Lets take a look at the code behind.

public MortgageReportPage(bool inIsNew = true)
{
    InitializeComponent();
    isNew = inIsNew;
    if (inIsNew)
    {
        m = new Mortgage();
        this.DataContext = m;
        SetColumnsVisible();
    }
}

// Custom constructor to pass Mortgage report data
public MortgageReportPage(object data)
    : this(false)
{
    // Bind to the mortgage report data.
    m = (Mortgage)data;
    this.DataContext = m;

    SetColumnsVisible();

    String em = String.Empty;
    if (IsValid(ref em, false))
        Amortize();
}

We have 2 constructors; one takes in a defaulted boolean value, the other takes in the Mortgage object from the Page that called it.

this.DataContext = m;

This is where the Data Binding for all the TextBoxes, CheckBoxes and Expanders originates. The DataContext property of the Page provides access to the bound data for its child components. All the public data in the Mortgage class is now freely available to any Component on the Page.

The last thing we need to do before the data will be automatically loaded into our fields and updated to the Mortgage class is to tell the children components themselves what they should be bound to.

<TextBox Name="nameT" Grid.Row="1" Text="{Binding Path=Name, ValidatesOnDataErrors=True}" />

Text="{Binding Path=Name..." is the final step in binding the Column named "Name" in the Mortgage class to the TextBox nameT in xaml. Simple.

In the next post we will be dealing with validation and converters.


Download the Code Here