Getting Started with WPF Calculator

18 Nov 20184 minutes to read

This section provides a quick overview for working with the WPF Calculator.

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet packages that need to be added as a reference to use the WPF Calculator control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:
How to install nuget packages

Creating Application with WPF Calculator control

In this walkthrough, you will create a WPF application that contains the WPF Calculator control.

Creating project
Add control via designer
Add control manually in XAML
Add control manually in C#

Creating project

The section below provides detailed information on how to create a new WPF project in Visual Studio to host the WPF Calculator control.

Add control via designer

The WPF Calculator control can be added to an application by dragging it from the toolbox to the designer view.

wpf SfCalculator control added by designer

Add control manually in XAML

In order to add the WPF Calculator control manually in XAML, do the below steps,

Add the below required assembly references to the project,
- Syncfusion.SfInput.WPF
- Syncfusion.Shared.WPF
Import Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf in XAML page.

Declare WPF Calculator in XAML page.

XAML
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        x:Class="SfCalculatorSample.MainWindow"
        Title="SfCalculator Sample" Height="350" Width="525">
    <Grid>
        <syncfusion:SfCalculator x:Name="sfCalculator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
    </Grid>
</Window>

Add control manually in C#

In order to add the WPF Calculator control manually in C#, do the steps below.

Add the following required assembly references to the project:
- Syncfusion.SfInput.WPF
- Syncfusion.Shared.WPF
Import the WPF Calculator namespace Syncfusion.Windows.Controls.Input.

Create an WPF Calculator control instance and add it to the window.

C#
using Syncfusion.Windows.Controls.Input;
namespace SfCalculatorSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //Creating an instance of SfCalculator control
            SfCalculator sfCalculator = new SfCalculator();
            //Adding SfCalculator as window content
            this.Content = sfCalculator;
        }
    }
}

wpf SfCalculator control added by code

Setting watermark

You can set a watermark for the WPF Calculator control using the DisplayText property. The default value of DisplayText is an empty string.

XAML
C#
<syncfusion:SfCalculator HorizontalAlignment="Stretch" DisplayText="Empty value here" />
SfCalculator sfCalculator = new SfCalculator()
{
    HorizontalAlignment = HorizontalAlignment.Stretch,
    DisplayText = "Empty value here"
};

WaterMark for SfCalculator

Setting value

You can set the initial value displayed in the WPF Calculator control using the DefaultValue property. The default value of DefaultValue is 0.

The Value property of WPF Calculator is Read-only; it returns the value calculated from the last expression as a decimal.

XAML
C#
<syncfusion:SfCalculator HorizontalAlignment="Stretch" DefaultValue="30" />
sfCalculator.DefaultValue = 30;