Skip to main content
Windows Calculator is a C++/CX application built for the Universal Windows Platform (UWP). The application follows the Model-View-ViewModel (MVVM) design pattern to maintain clean separation of concerns between the UI, business logic, and data layers.

​
Technology Stack

C++/CX

Visual C++ component extensions for UWP development

XAML

UI framework for building adaptive, responsive interfaces

UWP

Universal Windows Platform for modern Windows apps

MVVM

Design pattern for separating UI from business logic

​
Project Structure

The Calculator application is organized into three main Visual Studio projects: 
Calculator/
├── Calculator/          # View layer (XAML UI)
├── CalcViewModel/      # ViewModel layer (data binding)
└── CalcManager/        # Model layer (calculation engine)

​
Calculator Project (View)

Contains the XAML-based user interface:
  • MainPage.xaml - Root container page
  • Calculator.xaml - Standard/Scientific/Programmer modes
  • DateCalculator.xaml - Date calculation mode
  • UnitConverter.xaml - All converter modes
  • Custom controls and visual resources
Despite having multiple calculator modes, the app uses only one concrete Page class (MainPage) that hosts different UserControls.

​
CalcViewModel Project (ViewModel)

Provides data binding and UI state management:
  • ApplicationViewModel - Root ViewModel for MainPage
  • StandardCalculatorViewModel - Standard/Scientific/Programmer modes
  • DateCalculatorViewModel - Date calculations
  • UnitConverterViewModel - All converter modes including currency

​
CalcManager Project (Model)

Contains the calculation engine with three layers:
1

CalculatorManager

High-level API managing calculator modes, history, and memory
2

CalcEngine

Core calculation logic interpreting operations and maintaining state
3

RatPack

Low-level rational number arithmetic with infinite precision

​
Architecture Diagram

​
Key Architectural Principles

Each layer has a distinct responsibility:
  • View: Rendering UI and capturing user input
  • ViewModel: Exposing data for binding and handling UI logic
  • Model: Performing calculations and managing data
XAML elements bind directly to ViewModel properties using x:Bind markup extension, eliminating the need for manual UI updates.
ViewModels implement INotifyPropertyChanged to automatically notify the UI when data changes.
VisualStates adapt the interface based on window size, orientation, and mode.

​
Application Entry Point

The application starts in App.xaml.cs:
src/Calculator/App.xaml.cs
rootFrame.Navigate(typeof(MainPage), argument)
This navigates to MainPage, which then loads the appropriate UserControl based on the selected mode.

​
Mode Management

Calculator supports multiple modes through a unified architecture:

Calculator Modes

  • Standard
  • Scientific
  • Programmer

Utility Modes

  • Date Calculator
  • Unit Converters
  • Currency Converter
Mode switching is handled by updating the Mode property on ApplicationViewModel, which initializes the appropriate child ViewModel and loads the corresponding UserControl.

​
Next Steps

MVVM Pattern

Learn how MVVM works in Calculator

View Layer

Explore XAML and UI components

ViewModel Layer

Understand data binding and properties

Model Layer

Dive into the calculation engine

Build docs developers (and LLMs) love

Get started for freeTalk to us