Basic Navigation and XAML

In the last post we looked at the structure of the database. Now we get to dive into WPF application creation.

My original Mortgage Calculator suffered from a horrible GUI. Not only did it use modal windows when it wasn't necessary, the whole layout is incomprehensible.

Notice that the top 3/4 is wasted on user input, buttons and a text box that when clicked gave a summary of the information.

WPF has addressed these issues by providing layout components such as DockPanel, StackPanel, Expander and ScrollViewer to name some. More on that later.

Basic Page Setup

As noted before, I wanted to have 1 window with multiple states. WPF lets us accomplish this by using the NavigationWindow class. NavigationWindow allows an application to "navigate" between any .NET Framework object and HTML page. It's mostly used with the Page class, which is what we will be using it for.

Lets create our first Navigation Window.

<NavigationWindow x:Class="MortCalc.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Mortgage Calculator" Height="350" Width="500" WindowState = "Maximized" Source="MortgageHome.xaml">

</NavigationWindow>

That was simple. I should change my xml namespaces : ) We have specified the title, default size, how the window looks when we open it (WindowState), and the first Page to show in our Navigation Window (Source).

Lets take a look at the code behind this xaml file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MortCalc
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : NavigationWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Again relatively straight forward.

Home Page

The first page should list all of the mortgages currently in the database and allow the user add new Mortgages.

Lets take a look at it.

Notice that we can select the Mortgage Based upon the Name. In my previous version I listed all the relevant details if the Name did not provide enough information. This would make a decent future improvement.

Also the user can create a new Mortgage.

The xaml is again relatively straight forward.

<Page x:Class="MortCalc.MortgageHome"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Mortgage - Home" Height="auto" Width="auto" Loaded="Page_Loaded" Background="Beige">
    <DockPanel LastChildFill="True" Margin="10,0,10,10">
        
        <Label DockPanel.Dock="Top" Style="{StaticResource headerTextStyle}" >
            View Mortgages:
        </Label>
        
        <Grid DockPanel.Dock="Bottom" >
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Click="New_Button_Click" Style="{StaticResource buttonStyle}">
                New
            </Button>
            <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Click="Amortize_Button_Click" Style="{StaticResource buttonStyle}">
                Amortize
            </Button>
        </Grid>

        <ListBox Name="mortgageListBox"  DisplayMemberPath="Name" FontSize="18" />
        
    </DockPanel>
</Page>

The whole page is contained inside a DockPanel. DockPanel allows for children UI elements to be position relative to one another. LastChildFill="True" specifies that the last item in the list of children expands to fill any left over space in the Panel. In this case our ListBox with the Names of the Mortgages is the "Fill."

Each child element can specify what type of positioning inside of the DockPanel it is using with DockPanel.Dock. Our "View Mortgages:" Label uses DockPanel.Dock="Top" to position it at the top of the page.

We have put the buttons inside of a grid to ensure proper spacing. The Grid must contain Row and Column Definition sections. We have set the 2nd column to Width="Auto" which ensures auto sizing of the column.

Children inside of the Grid need to specify their Row and Column location. You can see this in the Grid.Row="" and Grid.Column="" values.

There are Several Style="{...}" attributes in this file. In particular these point to values specified somewhere else. They could be listed in the Page.Resources section or in this case in our App.xaml file.

<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground"Value="#000000"></Setter>
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

When MortgageHome.xaml's button specified a Style="{StaticResource buttonStyle}" it was specifically referencing the App.xmal's buttonStyle Style element.

Click="New_Button_Click" specifies a function that gets called in the code behind file when the click event gets triggered.

Lastly, DisplayMemberPath="Name" is a form of binding.

We will be diving into the click event and binding more in future posts. The next post when we see how CRUD gets implemented.


Download the Code Here