## 1. Introduction

The purpose of this article is twofold. In the first half, we discuss what WPF is. In addition, we study why and how to program WPF using VC++ and get a high level overview of the WPF architecture. Later, we scratch the surface of Loan Amortization with one working example of Loan Amortization in WPF using C++.

## 2. What is WPF?

Before studying WPF, one might ask a question as to what WPF is? WPF is an abbreviation for “Windows Presentation Foundation”. It is the next generation presentation system for building a windows client application that can be run stand alone as well as in a Web Browser (i.e. XBAP Application). WPF is based on .NET environment, it means it is a managed code and theoretically can be written with any .NET based language such as Visual C#, VB.NET and VC++.NET. WPF was introduced with .NET 3.0 with few other important technologies such as Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF), but here we are going to study only WPF.

WPF is the latest Microsoft technology to create a user interface. It was introduced with .NET 3.0 and then improved in .NET 3.5 and .NET 4.0 (beta as of now). It does not depend on Windows Standard control; it draws everything from DirectX technology and takes full advantage of 3D graphics and hardware accelerator if available.

Most of the programmers thought that WPF is a feature of Visual C# and VB.NET and can be done only in these languages. Although writing WPF programs in these languages is quite easy and fun, it is not limited to only this. WPF is in fact a feature of .NET introduced with version 3.5; therefore technically any .NET language can use it.

If this is the case, then why are there so many WPF samples written only in C# and VB.NET codes even in MSDN? The best answer might be because of XAML. When using C# or VB.NET, we can take full advantage of XAML, which is not available in VC++.NET. It means when you are trying to write WPF code in VC++.NET, then you are on your own and have to write code for everything. It may be a daunting task but is not impossible and in fact there are few samples available with Microsoft SDK such as `PlotPanel`

, `RadialPanel`

, `CustomPanel`

, etc.

### 2.1. Why VC++ for WPF?

The next question is why we should use VC++ to write a WPF application when we can do the same thing in C# or VB.NET with XAML? There can be different reasons for it.

- A lot of your code base is written in VC++ unmanaged code and it is not possible to rewrite everything in C#. You want to take advantage of both managed and unmanaged code in your project, such as using MFC document view architecture with rich user interface of WPF without creating any new DLL in C#.
- A portion of your programs should be optimized for speed and for performance reasons, you write unmanaged code for it. WPF internally used the same technique for performance reason to call DirectX.
- You want to hide the implementation of some portion of your program and/or algorithm so no one can reverse engineer and write it as unmanaged code, so no one can reverse engineer your code using ildasm.
- Just for fun.

### 2.2. WPF Programming in VC++.NET

To create the simplest WPF program using VC++, we have to include a reference of .NET components named *windowsbase.dll*, *presentationcore.dll* and *presentationframeworkd.dll*. In addition, the program must be compiled using `/clr `

switch because it is a managed code. Here is a diagram to show one project that has added references of these three DLLs. To add the reference, right click on the project in the Solution Explorer tree and select “Reference…” from there.

If we want to create a simple windows based program, then it would be something like this:

```
#include <windows.h>
using namespace System::Windows;
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
LPSTR lpCmd, int nCmd)
{
MessageBox::Show("Hello World");
}
```

This program does nothing more than simply display one message box. We can further shorten the program by using `main `

instead of `WinMain `

and avoid including *windows.h* header file altogether, but in that case we will see the black console window behind the message box.

If we want to make something more useful and interesting, then we have to create objects of at least two classes `Window `

and `Application`

. But remember there can be only one object of `Application `

class in the whole program. Here is the simplest program to show the usage of `Window `

and `Application `

classes.

```
#include <windows.h>
using namespace System;
using namespace System::Windows;
[STAThread]
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
LPSTR lpCmd, int nCmd)
{
Window^ win = gcnew Window();
win->Title = "Hello World";
Application^ app = gcnew Application();
app->Run(win);
}
```

The output of this program is a blank window with a title “Hello World”. Here `Application `

class is used to start the WPF application, manage the state of application and application level variables and information, but there is no output of it. It is Windows class that is responsible for drawing a window on the screen. `Run `

method should be the last method call in the program, because this method won't return until the program closes. Return value of `Run `

method is application exit code returned to the operating system.

It is not necessary to pass the window object as a parameter in the `run `

function of `application `

class. We can call `Run `

function without any parameter, but if we call the `Run `

function without any parameter, then we have to call the `Show `

or `ShowDialog `

function of `Window `

class before calling `Run`

. The difference between `Show `

and `ShowDialog `

is Show displays the model dialog, on the other hand `ShowDialog `

displays the modeless dialog. For our simple application, it doesn't make any difference.

You can inherit your classes from `Window `

and `Application `

classes to store some application specific or window specific information. But remember your class must be inherited using the “`ref`

” keyword and use “`gcnew`

” keyword to create an instance of it on managed heap. Here is a simple program to show the usage of user inherited `Window `

and `Application `

classes.

```
#include <windows.h>
using namespace System;
using namespace System::Windows;
public ref class MyWindow : public Window
{
public:
MyWindow()
{
Title = "Hello World";
}
};
public ref class MyApplication : public Application
{
};
[STAThread]
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
LPSTR lpCmd, int nCmd)
{
MyWindow^ win = gcnew MyWindow();
MyApplication^ app = gcnew MyApplication();
app->Run(win);
}
```

The output of this program is the same as the previous one. In this program, we can store all the application specific information in `MyApplication `

class and Window specific information in `MyWindow `

class. For example, we set the title of the window in the constructor rather than in `main `

after creating the object of it. We can also set other properties of window such as its background color, size, etc. in the same place, i.e. constructor.

These classes and their usages look quite familiar with MFC. In MFC based application, we also need objects of two classes named `CWinApp `

and `CWnd`

. Similarly we create only one object of `CWinApp `

based class and call the `run `

method of `CWinApp`

.

### 2.3. WPF Class Hierarchy

As we have seen before, to make the smallest WPF application that displays its own window, we have to create objects of at least two classes named `Window `

and `Application`

. Before going further, let’s take a look at these two classes in a bit more detail. Here is a class diagram to show the inheritance chain for `Application `

and `Window `

classes.

### 2.4. High Level Architecture of WPF

If we see the higher level architecture of WPF, then the best approach is to write code in any .NET language whether it is C#, VB or C++ rather than using XAML. If we write code in any programming language, then we understand about WPF classes in more detail.

When we write a WPF program, it internally uses DirectX to draw everything including all controls. All WPF calls are passed to DirectX via Media Integration Layer. For performance reasons, Media Integration Layer is written in unmanaged code. Here is an overall diagram of WPF application.

There are few other layers which are not shown here such as taking the input from the user is the responsibility of *user32.dll*. In addition, WPF is written in .NET based language, it means WPF application uses .NET language and runs on common language runtime not shown in this diagram.

#### 2.4.1. WPF Layer

Now let’s dig down little bit more and try to explore these layers in a bit more detail. The first layer in this stack is your application code that is of course a managed code written in any .NET language. In case of VC++, it can be a mixture of managed and unmanaged code compiled with `/clr `

switch.

The second layer of the stack is WPF layer. It is composed of three DLLs named *WindowsBase.dll*, *PresentationCore.dll* and *PresentationFramework.dll*. All WPF programs whether written in C++, C# or VB.NET have to include the reference to these DLLs.

The first component in WPF layer is *WindowsBase.DLL*. This DLL provides some very basic level functionality to the WPF which can be used in other applications too. This DLL provides the support of threading and dependency property, which we are going to study in more detail in the following sections.

The second component *PresentationCore.DLL* provides the basic building block for WPF framework. From the design prospect, WPF divides its classes in two groups, the core and framework. This DLL has some core functionality of WPF classes such as Visual to draw something and `UIElement`

, basic building block that WPF Framework uses.

`PresentationFrameWork `

provides the support of WPF framework. This DLL has support for layout, event handling, controls, animation and almost everything WPF has. When writing a WPF program, we usually use the classes defined in this component. All the controls such as `Label`

, `TextBlock`

, `Button`

, `Menu`

, etc. are defined in this component.

#### 2.4.2. Media Integration Layer

The other layer of WPF program is Media Integration Layer. It is written in unmanaged code for performance reasons and directly interfaces with DirectX. This layer has two important components, *milcore.dll* and *windowscodecs.dll*. *Milcore.dll* is responsible for giving 2D and 3D support and *windowscodecs.dll* supports different imaging support.

Here is a combine diagram to show all the major component of WPF application. This diagram shows all major components of WPF application. Please note that in this diagram we only focus on WPF and DirectX, because WPF internally uses DirectX to draw everything on the screen. But there are other components also involved in any WPF or any windows based program. It still uses *User32.dll* to get user input and operating system kernel DLL and device driver to hardware interface. In addition it is also understood that WPF code also runs in managed environment. It means WPF layer is based on Common run time environment. To make things simple, we only focus on those elements in this diagram, which are part of WPF.

## 3. Time Value of Money

Time value of Money is a very basic concept in financial engineering and lots of other concepts are built on this. Here we study the value of money with respect to time, i.e. how much the value of money would change over time. The value of money can be changed with only either from time or from interest rate. If we assumed that the interest rate is the same during the whole time period, then the only factor that can change the value of money is time.

### 3.1. Compound Interest

This is the most common method of calculating interest in real life. The difference between simple interest and compound interest is that, in simple interest you will get profit only in the first year’s value of the money; however in compound interest you will get money on every year’s value of the money. For example, if you have $1000 and your bank will give you 10% interest rate then after one year the value of your money will become $1100. In case of simple interest you will still get the second year profit on the first year value i.e. on $1000, on the other hand in case of compound interest, you will get profit on $1100.

In compound interest, you will get profit on every year’s value not only the first year value therefore the value of money will increase more rapidly in compound interest than simple interest. We show the change of the value of money in ten years in the given table.

If we will demonstrate the same thing in the form of a graph, then we will get the curve graph as shown in the figure:

The easiest way to calculate the compound interest is first convert the interest in one point form then multiply it with the original value.

For example to convert 12.5% into one point form, first divide it by 100 then add one in the result. It will become 1.125. If we multiply the original amount with this, then we will get the value of money after one year. To get the value of money after two years, we will multiply the original value with 1.125 twice.

Mathematically we can write this in this way:

### 3.2. Period Compound Interest

It is not uncommon to get profit more than once per year, such as after every six months, monthly, etc. This is known as Periodic Compound Interest. In that case, we simply divide the interest rate with the number of times we get profit in the year. For example, if you are getting profit with 10% interest rate annually and you want to get profit after every six months, then your interest rate will be 5% not 10% because you are getting profit twice per year.

Let’s take a look at this with one example. Suppose you invest $1500 in a bank with 6% interest rate. We have already seen the method to calculate the compound interest annually. Here is the table to show the compound interest calculated annually for 5 years:

Here is the table to show the interest calculated bi annually:

This table shows that we will get more profit monthly than annually. It is even more than bi-annually.

In other words, the higher the number of times we get the profit, the higher the profit we get at the end of the year. Here is the mathematical formula to calculate the profit taken more than once.

### 3.3. Annuity

In financial engineering, annuity is a concept of taking or giving some predefined money at some specified time, for example if you pay the installment of your car or withdraw some specific amount from the bank every month. The important thing about annuity is that the amount should be same and periodic.

Suppose you deposit some money in your bank every year. If you are not getting any profit then after some years the value of your money will be the multiple of the number of years. For example if you deposit $1000 in a bank for 5 years, then you will have $5000 after 5 years.

As we know, the value of money changes with respect to time and change is dependant on the interest rate. Let’s suppose we are getting 10% interest rate from the bank. In this case we won't get any profit at the end of the first year, because we deposited that money at the end of the year and that money was not in the bank for the whole year. At the end of the second year, we will get profit on the first year's money because that money was in the bank for the whole year and we won't get any profit of the money which we deposited at the end of second year. Similarly at the end of third year, we will get the profit of the first two years money because that money was in the bank for the whole year.

In other words, we can say that if we deposit “x” amount in a bank for “n” years then we won't get any profit on the money which we deposit in the last year. We will get only one year's profit on the money that we will deposit at “n-1” year because that money will be in the bank for only one year. The money we will deposit at “n-1” year, we will get 2 years profit, because that money will be in the bank for 2 years. In the same way we will get the “n-1” year profit on the first year's amount because that money will be in the bank for “n-1” years. Now the value of our annuity will be the sum of all of these values. In this table we show the profit on $1000 with 10% interest rate for different 1 year to 5 years.

It means this will be the value of our money after every year.

If we make a graph of this, then it will be a curve.

Mathematically we can write the same thing this way:

This is a geometric series. Using the geometric series formula for sum, it will become something like this:

### 3.4. Annuity with More than One Payment Per Year

In real life, most of our payments are on a monthly, biannually or quarterly basis, not on annual basis. In this section we are going to study what will be the effect of this on annuity when we have more than one payment in the year. We have already studied the concept of more than one payment during the study of time value of money.

If we have more than one payment per year, then we simply divide the interest rate by the number of payments per year because interest rate is usually given in annual interest rate form. In addition, we multiply the number of years by the number of payments per year, because now we are getting (or paying) more payments.

We already know how to calculate the future value of annuity when there is only one payment per year. Here is the modified formula to calculate the future value of annuity when there is more than one payment per year.

### 3.5. Loan Amortization

If we take a loan, then we usually pay it easily in monthly installments. This is in fact application of annuity with more than one payment per year. To calculate the monthly payment of the loan, first we have to calculate the present value of the annuity. We already studied how to calculate future value of money using this formula.

If we just modify this formula a little bit, then we can calculate the present value of money. Here is a formula to calculate the present value of the money.

To calculate the present value of annuity, we have to calculate the present value of all the money we deposit (or withdraw) into a bank and then sum it. Mathematically we can write it in this way.

This is again a geometric series. Here is the sum of this series using geometric series formula.

If there is more than one payment per year, then we have to divide the interest rate by the total number of payments per year and multiply total number of years. Here is a modified formula to calculate the present value of annuity if there is more than one payment per year.

If we already know the present value of annuity (i.e. amount of loan we are going to take) interest rate and the payment method (i.e. whether it is going to be monthly, quarterly, yearly, etc.), then we can easily rearrange this formula to calculate the payment amount of the loan. Here is the formula to calculate the payment amount of loan. For monthly payment, the value of n should be 12, i.e. 12 payments per year.

Let’s suppose we get $5000 loan from a bank with 12.5% interest rate. Just to keep our calculation small, we assumed that we are going to pay off the loan in one year, so we will have only 12 payments.

By using the above formula, our monthly payment would be $445.4143. Now the question is how much money of this payment is going to pay the interest and how much will be used to pay off the principle amount. We can calculate the interest on this money using time value of money formula.

`FV = 5052.08333`

The interest after one month will be:

```
Interest = Future Value - Present Value
Interest = 5052.08333 - 5000
Interest = 52.08333
```

The remaining amount of your payment will be the principle amount.

```
Principle = Payment - Interest
Principle = 455.4143 - 52.08333
Principle = 393.331
```

Now our new amount will be:

```
Amount = 5000 - 393.331
Amount = 4606.669202
```

And the second month’s interest will be calculated on this new amount. Similarly we can calculate the interest part and principle amount part of each payment for every payment. Here we showed the same thing in tabular form, here 5^{th} and 6^{th} columns show the interest part and principle amount part of the monthly payment respectively.

If we take a look at this table carefully, then we can observe that the amount of interest rate will decrease after every month. In the first month, we paid $52.08 interest, in the second month it became $47.98, in the third month, it became $43.84 and in the last month we pay only $4.59 interest. This is because the principle amount decreases every month, and we already know that if the interest rate and time is constant, then the only factor to change the value of interest is the original amount. Lower the amount, lower the interest rate is.

On the other hand, the amount of principle amount will increase from every previous month. The reason for this phenomenon is very obvious; because the value of monthly payment is the same and interest rate decreases every month, then the remaining amount will increase every month. In other words, as months go on, the value of your principle amount will decrease more rapidly.

We can show the same thing in this graph. Here we displayed two graphs; the first one shows the interest part of the monthly payment and the other shows the principle amount part of the payment.

This graph shows the value of interest we pay each month to pay off the loan. This graph is strictly decreasing; means the value of interest will decrease every month. It looks like a straight line, but in fact this is a curve. There are twelve payments in this example, but if we have an example of 30 years home mortgage, i.e. 360 payments then we can see this easily.

What is the meaning of curve line instead of straight line? We have already seen that the amount of interest decreases, but the ratio of reduction of interest rate is not the same during every month. The ratio of decreasing the interest part will increase in each passing month. It means the interest we pay each month will reduce more rapidly than the same every month.

In the above example, if we take a difference between the interest part of first two payments, then it would be:

```
Difference<sub>1</sub> = 52.08333 - 47.9861
Difference<sub>1</sub> = 4.097198
```

Similarly the difference between the interest part of the second month and the third month would be:

```
Difference<sub>2</sub> = 47.9861 - 43.8462
Difference<sub>2</sub> = 4.139877
```

We can verify that the difference between the interest parts of two consecutive payments will always increase.

The situation of principle amount part is no different. Let’s take a look at the principle amount part of the payment. Here is the graph of principle amount part of the payment.

This graph is very much similar to the interest rate part of the payment graph. The only difference is the direction. This is also a curve just like the interest part graph but here we can see that the principle amount is increasing. The difference between any two consecutive principle amount parts will be exactly the same as we have seen in the interest graph, but with a negative sign. The reason behind this is very simple, we have fixed monthly payments every month and it contains only two parts, interest and principle; so whatever value is excluded from one portion will automatically be included into the other portion.

For every payment, there are two parts of payment -- the interest part and principle amount part.

`PMT = INTEREST + PRINCIPLE`

We have a different value of interest and principle amount in each payment. In general, we can represent it in such a way:

`PMT<sub>i</sub> = R<sub>i</sub> + P<sub>i</sub>`

We already saw that the principle amount will reduce with each payment. It depends on the interest calculated in the previous principle amount. Here is the formula to calculate the remaining principle amount after a specified amount of time, say after “n” months.

This is again a geometric series. We can calculate the sum of it using geometric series formula. The value of Principle amount after n^{th} payment would be:

Similarly if we want to calculate the interest part of any specific period, then first we have to calculate the principle amount remaining at that time and multiply it with interest rate. Here is the formula to calculate the interest part of any specific payment.

`R<sub>n</sub> = A<sub>n</sub> * r`

After solving this geometric series, we get the formula to calculate the interest part of any particular payment. Here is the formula to calculate the interest part of any payment.

Once we calculated the interest part then principle amount part is very easy to calculate. Any payment has only two parts, principle amount and interest, if we already calculate the interest part then we can subtract it from the payment to get the principle amount part. Here is the formula to calculate the principle amount part of the payment.

`PMT<sub>i</sub> = R<sub>i</sub> + P<sub>i</sub>`

## 4. Loan Amortization Application in WPF

We have all of our required formulae so we can write small functions to perform these calculations. Here are the auxiliary functions to calculate the remaining balance, interest part and principle amount part of any particular payment.

```
// Calculate the remaining balance at particular payment
double PaymentWindow::CalculateBalance(int month)
{
double interestTerm = Math::Pow((1 + interestRate), month);
double totalInterest = principle * interestTerm;
double totalPaid = payment * (interestTerm - 1) / interestRate;
return totalInterest - totalPaid;
}
// Calculate the Interest part of any particular payment
double PaymentWindow::CalculateInterestPart(int month)
{
double interestTerm = Math::Pow((1 + interestRate), (month - 1));
double totalInterest = principle * interestTerm;
double totalPaid = payment * (interestTerm - 1) / interestRate;
return (totalInterest - totalPaid) * interestRate;
}
// Calculate the principle part of any particular payment
double PaymentWindow::CalculatePrinciple(int month)
{
return payment - CalculateInterestPart(month);
}
```

We need to take four inputs such as total payment, interest rate, total number of payments per year, total number of years and type of payments. We need an auxiliary class to store information about all payments and export these as properties so we can use this in a list control. Here is our auxiliary class:

```
public ref class PaymentInfo
{
private:
int paymentNo;
double payment;
double principle;
double interest;
double balance;
public:
property int PaymentNo
{
int get()
{ return paymentNo; }
void set(int value)
{ paymentNo = value; }
}
property double Payment
{
double get()
{ return payment; }
void set(double value)
{ payment = value; }
}
property double Principle
{
double get()
{ return principle; }
void set(double value)
{ principle = value; }
}
property double Interest
{
double get()
{ return interest; }
void set(double value)
{ interest = value; }
}
property double Balance
{
double get()
{ return balance; }
void set(double value)
{ balance = value; }
}
};
```

Here is an auxiliary function to calculate the interest part, principle amount part and remaining balance after each payment and add those items in the list control.

```
// Calculate the complete amortization schedule and fill the list control
void PaymentWindow::CalculatePayment()
{
Title = L"Amortization Schedule for " +
Convert::ToString(totalpayments) + " Payments";
// calculate interest term
double interestTerm = Math::Pow((1 + interestRate), totalpayments);
// calculate payment
payment = (principle * interestRate) / (1 - (1 / interestTerm));
for (int iIndex = 1; iIndex <= totalpayments; ++iIndex)
{
PaymentInfo^ paymentInfo = gcnew PaymentInfo();
paymentInfo->PaymentNo = iIndex;
paymentInfo->Balance = CalculateBalance(iIndex);
paymentInfo->Payment = payment;
paymentInfo->Interest = CalculateInterestPart(iIndex);
paymentInfo->Principle = CalculatePrinciple(iIndex);
lstView->Items->Add(paymentInfo);
}
}
```

Here is the output of the program:

This program is not restricted to monthly payments only. We can select different payment methods such as Monthly, Quarterly, Bi-Yearly, Yearly or daily. There is one `enum `

defined for the payment selection.

```
enum PaymentMethod
{
NotSelected = 0,
Monthly,
Quartly,
BiYearly,
Yearly,
Daily
};
```

Here is the output of the amortization schedule. This dialog displays the monthly payment, the total amount paid over time and the interest and principle amount part of every payment.

## History

- 8
^{th}July, 2009: Initial version