Share via

UWP: How to design a calculator

  • Article

Prerequisites

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.

Steps

Start visual studio and create a project either by clicking New Project from the start screen or going to File->New->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.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <Grid.ColumnDefinitions>
 <ColumnDefinition />
 <ColumnDefinition />
 <ColumnDefinition />
 <ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition />
 <RowDefinition/>
 <RowDefinition/>
 <RowDefinition/>
 <RowDefinition/>
 <RowDefinition/>
 <RowDefinition/>
 </Grid.RowDefinitions>
 </Grid>

The <Grid.ColumnDefinition> tag is used to add columns, now the column can be of the three different sizes.

  • 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.

<Border Grid.Row="0" Background="White" Grid.ColumnSpan="4" >
 <TextBox HorizontalAlignment="Center" IsReadOnly="True" Text="Calculator" Foreground="Black" BorderBrush="Transparent" TextAlignment="Center" FontSize="70"></TextBox>
</Border>

Using Grid.Row property we will set the row in which we want our UI control to be displayed and Grid.ColumnSpan will allow us to set the number of columns that this control can span. Inside the border tag we have a textbox which will basically serve as a label but since label tag is not supported in a UWP project we will use textbox with its IsReadOnly property set to True as this will make it non-editable.

 To set the background color of rows the following code will be used.

<Grid Grid.Row="1" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>
<Grid Grid.Row="2" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>
<Grid Grid.Row="3" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>
<Grid Grid.Row="4" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>
<Grid Grid.Row="5" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>
<Grid Grid.Row="6" Background="WhiteSmoke" Grid.ColumnSpan="4"></Grid>

We will add two textboxes, one where user's entered value will be displayed and the second one for displaying result. The following code can be used for this purpose.

<TextBox Grid.Row="1" Grid.ColumnSpan="4" TabIndex="1" VerticalAlignment="Top" HorizontalAlignment="Center" PlaceholderText="Enter Value" Width="300" BorderBrush="Transparent" TextAlignment="Right" FontSize="20" Margin="0,10,0,5" Height="40"></TextBox>
<TextBox HorizontalAlignment="Center" Grid.ColumnSpan="4" Grid.Row="1" TextAlignment="Left" PlaceholderText="Result" Width="300" BorderBrush="Transparent" Margin="0,50,0,5" FontSize="20" Height="40"></TextBox>

Most of the properties in TextBox tag are self-explainable, the TabIndex property is used to set the Tab Order and as we want the focus to be on the "enter value" TextBox when our application first loads and the simplest way to achieve this is through the use of TabIndex property.

Margin (left, top, right, bottom) property allows you to set the outer margin of a UI control.

Now we will add buttons for '+', '-', '*' and '/' using following code.

<Button VerticalAlignment="Top" Width="80" Content="+" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="0" Grid.Row="2" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="-" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="1" Grid.Row="2" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="*" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="2" Grid.Row="2" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="/" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="3" Grid.Row="2" FontSize="40"></Button>

The same will be done for the next row which contains 7, 8, 9 but as it also contains the '=' button and for design purposes it is a little longer than the rest, so we will set the value of it's Grid.RowSpan property to 4 and BorderBrush to Black, which will make it pop out a bit than the rest.

<Button VerticalAlignment="Top" Width="80" Content="7" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="0" Grid.Row="3" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="8" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="1" Grid.Row="3" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="9" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="2" Grid.Row="3" FontSize="40"></Button>
<Button VerticalAlignment="Center" BorderBrush="Black" Height="340" Width="70" Content="=" Background="Transparent" Foreground="Black" Grid.Column="4" Grid.Row="3" Grid.RowSpan="4" Margin="10,0,10,0" FontSize="48"/>

The next three rows will be the exact same, and the code for those rows is as below.

<!--5th Row--> 
<Button VerticalAlignment="Top" Width="80" Content="4" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="0" Grid.Row="4" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="5" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="1" Grid.Row="4" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="6" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="2" Grid.Row="4" FontSize="40"></Button>

<!--6th Row-->
<Button VerticalAlignment="Top" Width="80" Content="1" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="0" Grid.Row="5" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="2" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="1" Grid.Row="5" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="3" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Column="2" Grid.Row="5" FontSize="40"></Button>
 
<!--7th Row-->
<Button VerticalAlignment="Top" Width="80" Content="0" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Row="6" Grid.Column="0" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="." Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Row="6" Grid.Column="1" FontSize="40"></Button>
<Button VerticalAlignment="Top" Width="80" Content="Clear" Background="Transparent" Foreground="Black" Margin="0,20,0,0" Grid.Row="6" Grid.Column="2" FontSize="25"></Button>

Make sure you type/paste all that code inside of the parent Grid tag. When your are done, run the app by pressing F5 or clicking on the green triangle button.

Viola!!! This is how your output should look like.

https://1.bp.blogspot.com/-vrB_yUkoLBI/VquqJRM7LMI/AAAAAAAACtM/MUf7n3HkWOI/s320/finalOutput.png

If you will try to resize the window you'll find out that our app is not responsive i.e. the layout does not adjust itself according to the width of window. We will learn how to do that in a future article.