WPF - Create A Simple Calculator With Round Styled Buttons

In this blog you will learn how to create a simple calculator with round styled buttons in WPF.

Create a New project using Microsoft Visual Studio as follows. Save Project as SimpleCalculator.

 

 

 

Set the following properties of MainWindow.xaml

 

Title="Calculator" Height="300" Width="300"

 

Now put the XAML code in,

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Name="txtResult"
                   Text="0"
                   FontSize="48"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Right"
                   Grid.ColumnSpan="4"></TextBlock>
        <Button Grid.Row="1" Grid.Column="0" Click="Button_Click_1">AC</Button>
        <Button Grid.Row="1" Grid.Column="1" Click="Button_Click_7">+/-</Button>
        <Button Grid.Row="1" Grid.Column="2" Click="Button_Click_8">%</Button>
        <Button Grid.Row="1" Grid.Column="3" Click="Button_Click_6">/</Button>
        <Button Grid.Row="2" Grid.Column="0" Click="Button_Click">7</Button>
        <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">8</Button>
        <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">9</Button>
        <Button Grid.Row="2" Grid.Column="3" Click="Button_Click_5">*</Button>
        <Button Grid.Row="3" Grid.Column="0" Click="Button_Click">4</Button>
        <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">5</Button>
        <Button Grid.Row="3" Grid.Column="2" Click="Button_Click">6</Button>
        <Button Grid.Row="3" Grid.Column="3" Click="Button_Click_4">-</Button>
        <Button Grid.Row="4" Grid.Column="0" Click="Button_Click">1</Button>
        <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">2</Button>
        <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">3</Button>
        <Button Grid.Row="4" Grid.Column="3" Click="Button_Click_2">+</Button>
        <Button Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="Button_Click">0</Button>
        <Button Grid.Row="5" Grid.Column="2" Click="Button_Click_9">.</Button>
        <Button Grid.Row="5" Grid.Column="3" Click="Button_Click_3">=</Button>
    </Grid>

Preview

 

 

 

The Code-Behind of the XAML as follows,

private Operator currentOperator;
private double firstNumber;
private double secondNumber;
public MainWindow()
{
    InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
    var btn = sender as Button;
    if (txtResult.Text != "0")
    {
        txtResult.Text = $"{txtResult.Text}{btn.Content}";
    }
    else
    {
        txtResult.Text = btn.Content.ToString();
    }
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
    firstNumber = 0;
    secondNumber = 0;
    currentOperator = 0;
    txtResult.Text = "0";
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
    currentOperator = Operator.Add;
    firstNumber = double.Parse(txtResult.Text);
    txtResult.Text = "0";
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
    secondNumber = double.Parse(txtResult.Text);
    txtResult.Text = GetResult(firstNumber, currentOperator, secondNumber);
}
private string GetResult(double firstNumber, Operator currentOperator, double secondNumber)
{
    if (currentOperator == Operator.Add)
    {
        return (firstNumber + secondNumber).ToString();
    }
    else if (currentOperator == Operator.Substract)
    {
        return (firstNumber - secondNumber).ToString();
    }
    else if (currentOperator == Operator.Multiply)
    {
        return (firstNumber * secondNumber).ToString();
    }
    else if (currentOperator == Operator.Divide)
    {
        return (firstNumber / secondNumber).ToString();
    }
    else
    {
        return "0";
    }
}
private void Button_Click_4(object sender, RoutedEventArgs e)
{
    currentOperator = Operator.Substract;
    firstNumber = double.Parse(txtResult.Text);
    txtResult.Text = "0";
}
private void Button_Click_5(object sender, RoutedEventArgs e)
{
    currentOperator = Operator.Multiply;
    firstNumber = double.Parse(txtResult.Text);
    txtResult.Text = "0";
}
private void Button_Click_6(object sender, RoutedEventArgs e)
{
    currentOperator = Operator.Divide;
    firstNumber = double.Parse(txtResult.Text);
    txtResult.Text = "0";
}
private void Button_Click_7(object sender, RoutedEventArgs e)
{
    txtResult.Text = (double.Parse(txtResult.Text) * -1).ToString();
}
private void Button_Click_8(object sender, RoutedEventArgs e)
{
}
private void Button_Click_9(object sender, RoutedEventArgs e)
{
    if (txtResult.Text.IndexOf('.') < 0)
    {
        txtResult.Text += ".";
    }
}
    }
    public enum Operator
{
    Add,
    Substract,
    Multiply,
    Divide
}

Add Styles to buttons to get rounded buttons with background color as follows

 

Inside <Window.Resources> add styles,

<Window.Resources>
        <Style x:Key="calcButton" TargetType="Button">
            <Setter Property="Margin" Value="4"></Setter>
            <Setter Property="Background" Value="LightCyan"></Setter>
            <Setter Property="FontSize" Value="16"></Setter>
            <Setter Property="FontWeight" Value="Bold"></Setter>
        </Style>
        <Style TargetType="Button" BasedOn="{StaticResource calcButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="elc" BorderBrush="Red" BorderThickness="2" CornerRadius="8" Background="LightGreen">
                            <ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="elc" Value="#FF4D4DEE"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background"  TargetName="elc" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>

            </Setter>
        </Style>
    </Window.Resources>

After applying styles window will look like this,

 

 

Now, finally, build and run the project.