Create a New project using Microsoft Visual Studio as follows. Save Project as SimpleCalculator.
WPF - Create A Simple Calculator With Round Styled Buttons
Set the following properties of MainWindow.xaml
Title="Calculator" Height="300" Width="300"
Now put the XAML code in,
  1. <Grid>
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="2*"></RowDefinition>
  4. <RowDefinition Height="*"></RowDefinition>
  5. <RowDefinition Height="*"></RowDefinition>
  6. <RowDefinition Height="*"></RowDefinition>
  7. <RowDefinition Height="*"></RowDefinition>
  8. <RowDefinition Height="*"></RowDefinition>
  9. </Grid.RowDefinitions>
  10. <Grid.ColumnDefinitions>
  11. <ColumnDefinition></ColumnDefinition>
  12. <ColumnDefinition></ColumnDefinition>
  13. <ColumnDefinition></ColumnDefinition>
  14. <ColumnDefinition></ColumnDefinition>
  15. </Grid.ColumnDefinitions>
  16. <TextBlock Name="txtResult"
  17. Text="0"
  18. FontSize="48"
  19. VerticalAlignment="Bottom"
  20. HorizontalAlignment="Right"
  21. Grid.ColumnSpan="4"></TextBlock>
  22. <Button Grid.Row="1" Grid.Column="0" Click="Button_Click_1">AC</Button>
  23. <Button Grid.Row="1" Grid.Column="1" Click="Button_Click_7">+/-</Button>
  24. <Button Grid.Row="1" Grid.Column="2" Click="Button_Click_8">%</Button>
  25. <Button Grid.Row="1" Grid.Column="3" Click="Button_Click_6">/</Button>
  26. <Button Grid.Row="2" Grid.Column="0" Click="Button_Click">7</Button>
  27. <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">8</Button>
  28. <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">9</Button>
  29. <Button Grid.Row="2" Grid.Column="3" Click="Button_Click_5">*</Button>
  30. <Button Grid.Row="3" Grid.Column="0" Click="Button_Click">4</Button>
  31. <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">5</Button>
  32. <Button Grid.Row="3" Grid.Column="2" Click="Button_Click">6</Button>
  33. <Button Grid.Row="3" Grid.Column="3" Click="Button_Click_4">-</Button>
  34. <Button Grid.Row="4" Grid.Column="0" Click="Button_Click">1</Button>
  35. <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">2</Button>
  36. <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">3</Button>
  37. <Button Grid.Row="4" Grid.Column="3" Click="Button_Click_2">+</Button>
  38. <Button Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="Button_Click">0</Button>
  39. <Button Grid.Row="5" Grid.Column="2" Click="Button_Click_9">.</Button>
  40. <Button Grid.Row="5" Grid.Column="3" Click="Button_Click_3">=</Button>
  41. </Grid>
Preview
WPF - Create A Simple Calculator With Round Styled Buttons
The Code-Behind of the XAML as follows,
  1. private Operator currentOperator;
  2. private double firstNumber;
  3. private double secondNumber;
  4. public MainWindow()
  5. {
  6. InitializeComponent();
  7. }
  8. private void Button_Click(object sender, RoutedEventArgs e)
  9. {
  10. var btn = sender as Button;
  11. if (txtResult.Text != "0")
  12. {
  13. txtResult.Text = $"{txtResult.Text}{btn.Content}";
  14. }
  15. else
  16. {
  17. txtResult.Text = btn.Content.ToString();
  18. }
  19. }
  20. private void Button_Click_1(object sender, RoutedEventArgs e)
  21. {
  22. firstNumber = 0;
  23. secondNumber = 0;
  24. currentOperator = 0;
  25. txtResult.Text = "0";
  26. }
  27. private void Button_Click_2(object sender, RoutedEventArgs e)
  28. {
  29. currentOperator = Operator.Add;
  30. firstNumber = double.Parse(txtResult.Text);
  31. txtResult.Text = "0";
  32. }
  33. private void Button_Click_3(object sender, RoutedEventArgs e)
  34. {
  35. secondNumber = double.Parse(txtResult.Text);
  36. txtResult.Text = GetResult(firstNumber, currentOperator, secondNumber);
  37. }
  38. private string GetResult(double firstNumber, Operator currentOperator, double secondNumber)
  39. {
  40. if (currentOperator == Operator.Add)
  41. {
  42. return (firstNumber + secondNumber).ToString();
  43. }
  44. else if (currentOperator == Operator.Substract)
  45. {
  46. return (firstNumber - secondNumber).ToString();
  47. }
  48. else if (currentOperator == Operator.Multiply)
  49. {
  50. return (firstNumber * secondNumber).ToString();
  51. }
  52. else if (currentOperator == Operator.Divide)
  53. {
  54. return (firstNumber / secondNumber).ToString();
  55. }
  56. else
  57. {
  58. return "0";
  59. }
  60. }
  61. private void Button_Click_4(object sender, RoutedEventArgs e)
  62. {
  63. currentOperator = Operator.Substract;
  64. firstNumber = double.Parse(txtResult.Text);
  65. txtResult.Text = "0";
  66. }
  67. private void Button_Click_5(object sender, RoutedEventArgs e)
  68. {
  69. currentOperator = Operator.Multiply;
  70. firstNumber = double.Parse(txtResult.Text);
  71. txtResult.Text = "0";
  72. }
  73. private void Button_Click_6(object sender, RoutedEventArgs e)
  74. {
  75. currentOperator = Operator.Divide;
  76. firstNumber = double.Parse(txtResult.Text);
  77. txtResult.Text = "0";
  78. }
  79. private void Button_Click_7(object sender, RoutedEventArgs e)
  80. {
  81. txtResult.Text = (double.Parse(txtResult.Text) * -1).ToString();
  82. }
  83. private void Button_Click_8(object sender, RoutedEventArgs e)
  84. {
  85. }
  86. private void Button_Click_9(object sender, RoutedEventArgs e)
  87. {
  88. if (txtResult.Text.IndexOf('.') < 0)
  89. {
  90. txtResult.Text += ".";
  91. }
  92. }
  93. }
  94. public enum Operator
  95. {
  96. Add,
  97. Substract,
  98. Multiply,
  99. Divide
  100. }
Add Styles to buttons to get rounded buttons with background color as follows
Inside <Window.Resources> add styles,
  1. <Window.Resources>
  2. <Style x:Key="calcButton" TargetType="Button">
  3. <Setter Property="Margin" Value="4"></Setter>
  4. <Setter Property="Background" Value="LightCyan"></Setter>
  5. <Setter Property="FontSize" Value="16"></Setter>
  6. <Setter Property="FontWeight" Value="Bold"></Setter>
  7. </Style>
  8. <Style TargetType="Button" BasedOn="{StaticResource calcButton}">
  9. <Setter Property="Template">
  10. <Setter.Value>
  11. <ControlTemplate TargetType="{x:Type Button}">
  12. <Border x:Name="elc" BorderBrush="Red" BorderThickness="2" CornerRadius="8" Background="LightGreen">
  13. <ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
  14. </Border>
  15. <ControlTemplate.Triggers>
  16. <Trigger Property="IsMouseOver" Value="True">
  17. <Setter Property="Background" TargetName="elc" Value="#FF4D4DEE"/>
  18. </Trigger>
  19. <Trigger Property="IsPressed" Value="True">
  20. <Setter Property="Background" TargetName="elc" Value="Red"/>
  21. </Trigger>
  22. </ControlTemplate.Triggers>
  23. </ControlTemplate>
  24. </Setter.Value>
  26. </Setter>
  27. </Style>
  28. </Window.Resources>

After applying styles window will look like this,

WPF - Create A Simple Calculator With Round Styled Buttons
Now, finally, build and run the project.