How To Design A Calculator In UWP

To develop apps for UWP you must have Windows 10 and Visual Studio 2015 installed. You can install visual studio community for development purposes which is absolutely free.

Start Visual Studio and create a project either by clicking New Project from the start screen or going to File, New, then Project.

We will design our calculator using grid panel. A grid can contain multiple rows and columns and we can define height and width for each row and column respectively although by default it has just one row and one column.

Our calculator design will have 4 columns as 4 is the maximum number of buttons in any row and 7 rows. To do so, we will need to add the following lines of code to our MainPage.xaml file.

• Fixed
  
  
• Auto (takes as much space as needed by the contained content).
  
  
• * (takes as much space as available) and if there is a number prefix before * e.g. 10* , that means 10% of the remaining grid. If we had two columns of width 1* and 2*, the second column will take twice as much space as the first one.

As we want equally sized columns we will simply omit the width specification because by default it is 1* which will divide the available grid space among all the columns equally. Same logic applies to rows but in context of height.

Like arrays both rows and columns also start form 0 and we want our first row to have sort of a heading indicating that it is a calculator app.