Skip to main content

How To Make Your First UWP Application - Simple Calculator Tutorial

          In this tutorial we will learn how to use some of the very basic features of Visual Studio and create a UWP(Universal Windows Platform) application. Windows 10 introduces the Universal Windows Platform (UWP), which further evolves the Windows Runtime model and brings it into the Windows 10 unified core. As part of the core, the UWP now provides a common app platform available on every device that runs Windows 10. By the end of this tutorial you will have basic knowledge about how to create a simple UWP application and how to drag and drop objects in order to make UI and also how to edit their internal code.

           Firstly we'll start with simply opening with the Visual Studio 2015. On the left side you will be able to see following options.

           From this menu you need to click on the "New Project.." option. A dialog box will be shown and then you will choose C# and extend the tree then you will select Universal. From the Universal option, you will select "Blank App (Universal Windows)".
          
          After that you will have the following screen

          From the window "Solution Explorer" you need to double click on the "MainPage.xaml". This will open the designer view for you. like this.

      On your left you can see some options in the column like Server Explorer, Toolbox, Data Sources etc. From there if you select "Toolbox" option. In the toolbox option you will have the drag n drop objects which you can drag to your UI and create a simple calculator. 

          From there we can drag a TextBox and drag few buttons in order to create our calculator design. Apart now for the getting starting purposes, it is ok to use drag and drop but a good programming technique is that you add things with the your on code in your own styling and logic. This will make your application more efficient and also there would be less lines to compile resulting in good speed. 

         So now let us go deeper into the code. The easiest way to learn about the code is when you will add a Textbox, you will see a new line adding in you .xaml starting with the HTML alike tag <Textbox. Now there you can see that how the Textbox was coded when you dragged the object. So now you can also see and practice yourself with different objects. If you have any kind of previous knowledge on HTML or CSS, that will help you greatly in order to define behavior of objects. Let us see some of the codes on how to make a Button or Textbox.

         To create a Textbox, add this to .xaml: <TextBox Name="Screen1" Text="Enter Numbers Here.." />. By doing this you are now creating a Texbox with name Screen1 and with content Enter Numbers Here in it.

         To create a Button, add this to .xaml:  <Button Name="but1" Content="Button one"> </Button>. By doing this you are now creating a Button with name but1 and with content Button one in it.

         Now for the calculator, in this tutorial I have chosen a grid view, split it in two rows. Add a Textbox to the first row and buttons in the second row. In order to add buttons in second row, we will be needing another 4x4 grid and then we will be adding buttons. Lets see the code now.

          For grid view, add this to .xaml: <Grid> "Code" <Grid>. We add all the other .xaml code in the "Code" area.

          To add a row, add this to .xaml: <Grid.RowDefinitions>
                                                              <RowDefinition ></RowDefinition>
                                                              </Grid.RowDefinitions>
          This will add a new row in your grid. If you want to add more rows, just add   <RowDefinition ></RowDefinition> in <Grid.RowDefinations>.

          To add a column, add this to .xaml: <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition></ColumnDefinition> 
                                                                    <Grid.ColumnDefinitions>
          Do the same for adding a column.

          Now all you need is to make a logic and add this all up and make a pretty calculator UI. If there are any queries I'm pasting the complete code so you can take help from it. If still have any kinda query, feel free to comment!

<Grid MaxHeight="1000" MinHeight="500"  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="250"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <TextBox Grid.Row="0" Name="Screen1" Text="Enter Numbers Here.." Height="150" Width="300" Margin="22"/>
            <Grid Grid.Row="1" Margin="10" HorizontalAlignment="Center" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>

                <Button Name="but1" Grid.Row="0" Grid.Column="0"  Margin="10" Height="70" Width="70" Content="1"></Button>
                <Button Name="but2" Grid.Row="0" Grid.Column="1" Margin="10" Height="70" Width="70" Content="2"></Button>
                <Button Name="but3" Grid.Row="0" Grid.Column="2" Margin="10" Height="70" Width="70" Content="3"></Button>
                <Button Name="but4" Grid.Row="0" Grid.Column="3" Margin="10" Height="70" Width="70" Content="/"></Button>

                <Button Name="but5" Grid.Row="1" Grid.Column="0" Margin="10" Height="70" Width="70" Content="4"></Button>
                <Button Name="but6" Grid.Row="1" Grid.Column="1" Margin="10" Height="70" Width="70" Content="5"></Button>
                <Button Name="but7" Grid.Row="1" Grid.Column="2" Margin="10" Height="70" Width="70" Content="6"></Button>
                <Button Name="but8" Grid.Row="1" Grid.Column="3" Margin="10" Height="70" Width="70" Content="*"></Button>

                <Button Name="but9" Grid.Row="2" Grid.Column="0" Margin="10" Height="70" Width="70" Content="7"></Button>
                <Button Name="but10" Grid.Row="2" Grid.Column="1" Margin="10" Height="70" Width="70" Content="8"></Button>
                <Button Name="but11" Grid.Row="2" Grid.Column="2" Margin="10" Height="70" Width="70" Content="9"></Button>
                <Button Name="but12" Grid.Row="2" Grid.Column="3" Margin="10" Height="70" Width="70" Content="-"></Button>

                <Button Name="but13" Grid.Row="3" Grid.Column="0" Margin="10" Height="70" Width="70" Content="0"></Button>
                <Button Name="but14" Grid.Row="3" Grid.Column="1" Margin="10" Height="70" Width="70" Content="."></Button>
                <Button Name="but15" Grid.Row="3" Grid.Column="2" Margin="10" Height="70" Width="70" Content="="></Button>
                <Button Name="but16" Grid.Row="3" Grid.Column="3" Margin="10" Height="70" Width="70" Content="+"></Button>
            </Grid>
        
        </Grid>
    </Grid>  












Labels:

Comments

Post a Comment

Popular posts from this blog

How to connect SQL Database to your Web Form (Tutorial)

          In this tutorial we will see how to connect SQL Database to our WebForm page created in Visual Studio 2015. You will need SQL Server 2014 which you can download from  here . The tutorial will include how to make a simple webform page and add textbox and buttons to it. And then apply database to it with CRED operations but we will only be checking insertion.           Now open Visual Studio and create a ASP.NET Web App in WEB section. Add a new web form to your project. If you do not know this previously you can follow my previous tutorial,  How to create a beginner web form . Now what we want a is a view like this.           Now in order to do that, we will select Split view from the bottom on Visual Studio. Now you also able to see the code section behind your webform. You can see the textbox ID and the Button ID. We will use these Ids in order to receive data from the fields.  ...
Post a Comment
Read more

How To Create a Beginner Web Form (Tutorial)

         In this tutorial we will see how to create a simple web page. It is really a beginner level tutorial so you may find it slow or boring, but it is great for the crowd who are just getting into it and want to peek into things and there basic working.          Let us start by launching Visual Basic, I'm using the 2015 enterprise version and you can use any version and the community one as well. We select New Project or use the short cut of it Ctrl+Shift+N. And then we select Visual C# from the left tab and expanding it, we will select Web option. It will show you a option on the right of ASP.NET Web Application. Name it what you want and proceed.          Selecting this and proceeding, we will have the following dialog box.          Here we will select an Empty ASP.NET file with the option Web Forms checked. Click OK. Now we will have an WebApplication or whatever yo...
Post a Comment
Read more