For this article first we will create a new WPF application and design the calculator as shown below.


Now here is is the XMAL code of the above form,
  1. <Window x:Class="MyCalculatorv1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Calculator" Height="310" Width="237" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" Topmost="True">
  2. <Grid Background="White" Height="270" VerticalAlignment="Top">
  3. <Button Content="7" HorizontalAlignment="Left" Margin="11,115,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2,2,2,1" Click="Button_Click_1">
  4. <Button.Foreground>
  5. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  6. </Button.Foreground>
  7. <Button.BorderBrush>
  8. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  9. </Button.BorderBrush>
  10. <Button.Background>
  11. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  12. </Button.Background>
  13. </Button>
  15. <TextBox Height="38" TextWrapping="Wrap" VerticalAlignment="Top" Margin="10,20,0,0" HorizontalAlignment="Left" Width="201" FontSize="20" Background="Black" BorderThickness="2" Name="tb" Text="">
  16. <TextBox.Foreground>
  17. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}" />
  18. </TextBox.Foreground>
  20. </TextBox>
  22. <Button Content="8" HorizontalAlignment="Left" Margin="62,115,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  23. <Button.Foreground>
  24. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  25. </Button.Foreground>
  26. <Button.BorderBrush>
  27. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  28. </Button.BorderBrush>
  29. <Button.Background>
  30. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  31. </Button.Background>
  32. </Button>
  33. <Button Content="9" HorizontalAlignment="Left" Margin="113,115,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  34. <Button.Foreground>
  35. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  36. </Button.Foreground>
  37. <Button.BorderBrush>
  38. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  39. </Button.BorderBrush>
  40. <Button.Background>
  41. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  42. </Button.Background>
  43. </Button>
  44. <Button Content="/" HorizontalAlignment="Left" Margin="164,115,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  45. <Button.Foreground>
  46. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  47. </Button.Foreground>
  48. <Button.BorderBrush>
  49. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  50. </Button.BorderBrush>
  51. <Button.Background>
  52. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  53. </Button.Background>
  54. </Button>
  55. <Button Content="4" HorizontalAlignment="Left" Margin="11,151,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  56. <Button.Foreground>
  57. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  58. </Button.Foreground>
  59. <Button.BorderBrush>
  60. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  61. </Button.BorderBrush>
  62. <Button.Background>
  63. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  64. </Button.Background>
  65. </Button>
  66. <Button Content="5" HorizontalAlignment="Left" Margin="62,151,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  67. <Button.Foreground>
  68. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  69. </Button.Foreground>
  70. <Button.BorderBrush>
  71. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  72. </Button.BorderBrush>
  73. <Button.Background>
  74. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  75. </Button.Background>
  76. </Button>
  77. <Button Content="6" HorizontalAlignment="Left" Margin="113,151,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  78. <Button.Foreground>
  79. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  80. </Button.Foreground>
  81. <Button.BorderBrush>
  82. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  83. </Button.BorderBrush>
  84. <Button.Background>
  85. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  86. </Button.Background>
  87. </Button>
  88. <Button Content="*" HorizontalAlignment="Left" Margin="164,151,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  89. <Button.Foreground>
  90. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  91. </Button.Foreground>
  92. <Button.BorderBrush>
  93. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  94. </Button.BorderBrush>
  95. <Button.Background>
  96. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  97. </Button.Background>
  98. </Button>
  99. <Button Content="1" HorizontalAlignment="Left" Margin="11,187,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  100. <Button.Foreground>
  101. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  102. </Button.Foreground>
  103. <Button.BorderBrush>
  104. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  105. </Button.BorderBrush>
  106. <Button.Background>
  107. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  108. </Button.Background>
  109. </Button>
  110. <Button Content="2" HorizontalAlignment="Left" Margin="62,187,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  111. <Button.Foreground>
  112. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  113. </Button.Foreground>
  114. <Button.BorderBrush>
  115. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  116. </Button.BorderBrush>
  117. <Button.Background>
  118. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  119. </Button.Background>
  120. </Button>
  121. <Button Content="3" HorizontalAlignment="Left" Margin="113,187,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  122. <Button.Foreground>
  123. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  124. </Button.Foreground>
  125. <Button.BorderBrush>
  126. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  127. </Button.BorderBrush>
  128. <Button.Background>
  129. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  130. </Button.Background>
  131. </Button>
  132. <Button Content="-" HorizontalAlignment="Left" Margin="164,187,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  133. <Button.Foreground>
  134. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  135. </Button.Foreground>
  136. <Button.BorderBrush>
  137. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  138. </Button.BorderBrush>
  139. <Button.Background>
  140. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  141. </Button.Background>
  142. </Button>
  143. <Button Content="0" HorizontalAlignment="Left" Margin="11,223,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  144. <Button.Foreground>
  145. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  146. </Button.Foreground>
  147. <Button.BorderBrush>
  148. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  149. </Button.BorderBrush>
  150. <Button.Background>
  151. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  152. </Button.Background>
  153. </Button>
  154. <Button Content="=" HorizontalAlignment="Left" Margin="62,223,0,0" VerticalAlignment="Top" Width="97" Height="31" FontSize="18" BorderThickness="2" Click="Result_click">
  155. <Button.Foreground>
  156. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  157. </Button.Foreground>
  158. <Button.BorderBrush>
  159. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  160. </Button.BorderBrush>
  161. <Button.Background>
  162. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  163. </Button.Background>
  164. </Button>
  165. <Button Content="+" HorizontalAlignment="Left" Margin="164,223,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Button_Click_1">
  166. <Button.Foreground>
  167. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  168. </Button.Foreground>
  169. <Button.BorderBrush>
  170. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  171. </Button.BorderBrush>
  172. <Button.Background>
  173. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  174. </Button.Background>
  175. </Button>
  176. <Button Content="Off" HorizontalAlignment="Left" Margin="113,79,0,0" VerticalAlignment="Top" Width="97" Height="31" FontSize="18" BorderThickness="2" Click="Off_Click_1">
  177. <Button.Foreground>
  178. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  179. </Button.Foreground>
  180. <Button.BorderBrush>
  181. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  182. </Button.BorderBrush>
  183. <Button.Background>
  184. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  185. </Button.Background>
  186. </Button>
  187. <Button Content="Del" HorizontalAlignment="Left" Margin="11,79,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="Del_Click">
  188. <Button.Foreground>
  189. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  190. </Button.Foreground>
  191. <Button.BorderBrush>
  192. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  193. </Button.BorderBrush>
  194. <Button.Background>
  195. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  196. </Button.Background>
  197. </Button>
  198. <Button Content="R" HorizontalAlignment="Left" Margin="62,79,0,0" VerticalAlignment="Top" Width="46" Height="31" FontSize="18" BorderThickness="2" Click="R_Click">
  199. <Button.Foreground>
  200. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  201. </Button.Foreground>
  202. <Button.BorderBrush>
  203. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}"/>
  204. </Button.BorderBrush>
  205. <Button.Background>
  206. <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
  207. </Button.Background>
  208. </Button>
  210. </Grid>
  211. </Window>
Now we will create the button click events for each and every button and add the below code for buttons as shown below.

  1. using System;
  2. using System.Windows;
  3. using System.Windows.Controls;
  5. namespace MyCalculatorv1
  6. {
  7. public partial class MainWindow : Window
  8. {
  9. public MainWindow()
  10. {
  11. InitializeComponent();
  12. }
  14. private void Button_Click_1(object sender, RoutedEventArgs e)
  15. {
  16. Button b = (Button) sender;
  17. tb.Text += b.Content.ToString();
  18. }
  20. private void Result_click(object sender, RoutedEventArgs e)
  21. {
  22. try
  23. {
  24. result();
  25. }
  26. catch (Exception exc)
  27. {
  28. tb.Text = "Error!";
  29. }
  30. }
  32. private void result()
  33. {
  34. String op;
  35. int iOp = 0;
  36. if (tb.Text.Contains("+"))
  37. {
  38. iOp = tb.Text.IndexOf("+");
  39. }
  40. else if (tb.Text.Contains("-"))
  41. {
  42. iOp = tb.Text.IndexOf("-");
  43. }
  44. else if (tb.Text.Contains("*"))
  45. {
  46. iOp = tb.Text.IndexOf("*");
  47. }
  48. else if (tb.Text.Contains("/"))
  49. {
  50. iOp = tb.Text.IndexOf("/");
  51. }
  52. else
  53. {
  54. //error
  55. }
  57. op = tb.Text.Substring(iOp, 1);
  58. double op1 = Convert.ToDouble(tb.Text.Substring(0, iOp));
  59. double op2 = Convert.ToDouble(tb.Text.Substring(iOp + 1, tb.Text.Length - iOp - 1));
  61. if (op == "+")
  62. {
  63. tb.Text += "=" + (op1 + op2);
  64. }
  65. else if (op == "-")
  66. {
  67. tb.Text += "=" + (op1 - op2);
  68. }
  69. else if (op == "*")
  70. {
  71. tb.Text += "=" + (op1 * op2);
  72. }
  73. else
  74. {
  75. tb.Text += "=" + (op1 / op2);
  76. }
  77. }
  79. private void Off_Click_1(object sender, RoutedEventArgs e)
  80. {
  81. Application.Current.Shutdown();
  82. }
  84. private void Del_Click(object sender, RoutedEventArgs e)
  85. {
  86. tb.Text = "";
  87. }
  89. private void R_Click(object sender, RoutedEventArgs e)
  90. {
  91. if (tb.Text.Length > 0)
  92. {
  93. tb.Text = tb.Text.Substring(0, tb.Text.Length - 1);
  94. }
  95. }
  96. }
  97. }
In the above code I have performed the math operation. In the above R_click is used to delete the last added value and the delete button is used for clearing the calculation. Off button is used to close the calculator. In this, for making a new calculation we need to press the delete button to clear the calculation area.