Syncfusion Calculator Control In UWP With XAML And C#

Syncfusion is the provider of software components and tools for the Microsoft.NET platform. The Syncfusion SfCalculator control is used perform basic mathematical operations without switching to external applications.

Reading this article, you will learn how to use Syncfusion Calculator Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

1. Windows 10 (Recommended)
2. Visual Studio 2017 Community Edition (It is a free software available online)
3. Syncfusion Essential Studio for UWP and get Syncfusion Community Licence (It is free for an individual with less than $1 Million revenue).

Now, we can discuss step by step App development.

Step 1

Install Visual Studio 2017 and Syncfusion Essential Studio for UWP and activate.

Step 2

Open Visual Studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the suitable name for your App (UWPSFCalculator)->OK.

 

Step 3

Choose the target and minimum platform version that your Windows Universal Application will support. After this, the Project creates App.xaml and MainPage.xaml.

 

Step 4

Visual Studio tool box contains Syncfusion controls

 

Step5

Add TextBlock control and change the Name and text property for title.

 

Step 6

Add Syncfusion Sycalculator control and change the Name Property and automatically Syncfusion Controls for UWP reference were added

 

Step 7

Add TextBlock control and change the Name and text property for displaying Message,

 

Step 8

Add a button control and change the name and text property for Click.

 

Note

Automatically, the following code will be generated in XAML Code View, while we are done in the Design View.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPSFCalculator" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input" x:Class="UWPSFCalculator.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Center" Margin="150,43,131,0" TextWrapping="Wrap" Text="Syncfusion Calculator control in UWP" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" Width="359" />
        <Input:SfCalculator x:Name="SFCalc" HorizontalAlignment="Left" Margin="113,106,0,-162" VerticalAlignment="Top" Height="416" Width="247" />
        <TextBlock x:Name="tblMsg" HorizontalAlignment="Left" Margin="451,191,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="179" />
        <Button x:Name="btnClick" Content="Click" HorizontalAlignment="Left" Margin="509,280,0,0" VerticalAlignment="Top" Click="btnClick_Click" /> </Grid>
</Page>

Step 9

Add the following code for click Button Event Method in MainPage.xaml.cs,

private void btnClick_Click(object sender, RoutedEventArgs e) {
    tblMsg.Text = "Your Calculated Value is :" + SFCalc.DisplayText;
}

 

Step 10

Deploy your app on the Local Machine. The output of the UWPSFCalculator App is shown below.

 

After clicking the button.

 

Summary

Now, you have successfully tested Syncfusion SFCalculator Control in Visual C# - UWP environment.