WPF - Create A Simple Calculator With Round Styled Buttons

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.