WPF Tutorial: A Basic Calculator Application

wpftutorialWPF is Microsoft’s latest technology for developing Windows-based rich client applications. WPF stands for Windows Presentation Foundation and it’s considered an advanced alternative to traditional .NET Windows Form applications. WPF marks a revolution in Microsoft’s approach towards building desktop based applications.

WPF uses the hardware graphics card and Direct X technology for rendering graphical user interfaces rather than using traditional Windows pixel-based approach. The output window and the child controls rendered by WPF applications are resolution independent. WPF rather use an advanced technique for setting size of controls via Device Independent Points where application adjusts itself automatically and yields uniform output on screens with different pixel resolution.

To learn more about WPF, take a course at Udemy.com.

Developing a Basic Calculator with WPF

This article is a basic WPF tutorial for absolute beginners who do not have any prior experience with developing WPF applications. In this article, a basic Calculator application will be developed that performs addition, subtraction, multiplication and division of two numbers passed in text boxes and then displays the result in another text box. Following are the steps to develop the application:

1-     Open Visual Studio Application (2010 or above) and create a New Project.

2-     From the template windows on the left, Choose Visual C#.

3-     From the application types that appear on the middle panel of the screen, choose WPF Application.

4-     Rename the application to WPFCalculator and click OK button.

The aforementioned steps have been displayed in the following figure:

Image1

By default, the new WPF project opens in split mode view on the top, the WYSIWYG (What you see is what you get) window appears. At the bottom, the contents of the code behind the XAML file are displayed.

In the solution explorer of newly created WPFCalculator application, it is extremely important to understand the contents of the two files. By default MainWindow.xaml file is added which contains the basic XAML markup for the layout. The WYSIWYG window is based on the contents of this file. Simply put, this MainWindow.xaml file is the front end file.

If MainWindow.xaml file is explored further by clicking the small triangle to the left of it, another file MainWindow.xaml.cs is displayed. This is the code behind file and contains all the programming logic and event handling mechanism for the front end MainWindow.xaml. Both of these files in WPFCalculator project solution have been shown in the following figure:

Image2

MainWindow.xaml

At the moment, the contents of the MainWindow.xaml file are as follows:

<Window x:Class="WPFCalculator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

 

Every element in a WPF output window is represented as an element in the corresponding file. An element inside another window is represented in the output window as a control or layout inside some parent control.

In the above example, there is a top level element Window. The first attribute of the Window element is x:Class which refers to the code behind file that will handle the event of this class. The next two lines are the namespaces that specify some XML standard and set of controls used in the application. The attributes named with prefix x: refers to the controls specified by the namespace prefixed with x: which is the second namespace in the above case. Finally the Title, Height and Width of the Window element have been set.

There is a Grid element added in the MainWindow.xaml by default. This is due to the fact that Grid is probably the most widely used layout and hence have been added by default. It is absolute okay to remove it as will be done later. The closing </Window> tag specifies that the Window element declaration has been completed.

MainWindow.xaml.cs

At the moment, the MainWindow.xaml.cs (code behind) file contains following content.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

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 WPFCalculator

{

///<summary>

/// Interaction logic for MainWindow.xaml

///</summary>

publicpartialclassMainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

}

}

 

The file contains several namespace declarations. Notice the name of the class is MainWindow. This was the name that was specified in the x:Class attribute of the Window element in the MainWindow.xaml file. This x:Class attribute serves as a connection between the front end and the code behind file. The constructor of the the MainWindow class contains an InitializeComponent method which is basically used to create the GUI and tie it with the code behind file.

For more interesting C# tutorials, browse some C# courses at Udemy.com.

Making Changes to build a Calculator

Changes in MainWindow.xaml

Make following changes in the XAML code of the MainWindow.xaml file. The file should look exactly like this:

<Window x:Class="WPFCalculator.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition ></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150"></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Label FontSize="30" Grid.Row="0" Grid.Column="0">Number 1:</Label>

<Label FontSize="30" Grid.Row="1" Grid.Column="0">Number 2:</Label>

<Label FontSize="30" Grid.Row="2" Grid.Column="0">Operation:</Label>

<Label HorizontalAlignment="Right" FontSize="30" Grid.Row="3" Grid.Column="0">Result:</Label>

<TextBox FontSize="30" Grid.Row="0" Grid.Column="1" Name="Number1"></TextBox>

<TextBox FontSize="30" Grid.Row="1" Grid.Column="1" Name="Number2"></TextBox>

<TextBox FontSize="30" Grid.Row="3" Grid.Column="1" Name="Result"></TextBox>

 

<Grid Grid.Row="2" Grid.Column="1">

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button FontSize="30" Name="Add" Grid.Row="0" Grid.Column="0" Click="Add_Click">+</Button>

<Button FontSize="30" Name="Subtract" Grid.Row="0" Grid.Column="1" Click="Subtract_Click">-</Button>

<Button FontSize="30" Name="Multiply" Grid.Row="0" Grid.Column="2" Click="Multiply_Click">X</Button>

<Button FontSize="30" Name="Divide" Grid.Row="0" Grid.Column="3" Click="Divide_Click">%</Button>

</Grid>

</Grid>

</Window>

Changes in MainWindow.xaml.cs

In the code behind MainWindow.xaml.cs file make changes so that it looks exactly like this:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

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 WPFCalculator

{

///<summary>

/// Interaction logic for MainWindow.xaml

///</summary>

publicpartialclassMainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

 

privatevoid Add_Click(object sender, RoutedEventArgs e)

{

int output = Int32.Parse(Number1.Text) + Int32.Parse(Number2.Text);

Result.Text = output.ToString();

}

 

privatevoid Subtract_Click(object sender, RoutedEventArgs e)

{

int output = Int32.Parse(Number1.Text) - Int32.Parse(Number2.Text);

Result.Text = output.ToString();

}

 

privatevoid Multiply_Click(object sender, RoutedEventArgs e)

{

int output = Int32.Parse(Number1.Text) * Int32.Parse(Number2.Text);

Result.Text = output.ToString();

}

 

privatevoid Divide_Click(object sender, RoutedEventArgs e)

{

int output = Int32.Parse(Number1.Text) / Int32.Parse(Number2.Text);

Result.Text = output.ToString();

}

}

}

 

The output of the WPFCalculator application after making the above changes would look like this:

Image3

To learn details of C# and WPF, check out a course at Udemy.com.