create account

¡Aprende! | Diseña y programa una 'Calculadora' en Visual Studio 2017 by oscarcc89

View this thread on: hive.blogpeakd.comecency.com
· @oscarcc89 · (edited)
$11.78
¡Aprende! | Diseña y programa una 'Calculadora' en Visual Studio 2017
Hoy recordé mis clases de programación en esta pequeña **Calculadora básica** que creé en *Microsoft Visual Studio 2017* en el entorno de *Visual Basic*. 

Siempre los profesores comienzan con este tipo de ejercicios como práctica, y me pareció útil mostrar como se diseña y se programa una calculadora. 

A continuación el proceso:

**Paso 1:**
-Abrimos nuestro Visual Studio y nos dirigimos a:
<code>**Archivo -> Nuevo -> Proyecto...**</code>
![2017-10-18.png](https://steemitimages.com/DQmcsp7gMM65CPZHfnMJC4wuUdA1JBTx1wyNDbuQ26EEcc1/2017-10-18%20.png)

En el panel izquierdo seleccionamos *Visual Basic* y hacemos clic en *Aplicación de Windows Forms*.
![2017-10-18 (2).png](https://steemitimages.com/DQmafkPDxhdR4WRjBhcRAMDVXixGLfRFESinu4sGbZGhsHW/2017-10-18%20(2).png)

**Paso 2**
-Con nuestro formulario creado, empezaremos a editar algunas propiedades.

![2017-10-18 (3).png](https://steemitimages.com/DQmRh1gqaCDkT9EBcfVvUzDqMmaJ99s8MS5mvMriexiZhso/2017-10-18%20(3).png)

Con el formulario seleccionado, editamos la casilla de "TEXT" por el nombre que queramos que lleve nuestra calculadora, en este caso le coloqué <code>'*Calculadora Básica*'</code>. También modifiqué el tipo de fuente en la casilla "FONT" y seleccioné <code>'*Century Gothic - tamaño 14*'</code>.

![2017-10-18 (3).png](https://steemitimages.com/DQmR8i2GFCAaZwYW7cD1p1gwP97JGwsHUVbQZB63jL5GXGY/2017-10-18%20(3).png)

**Paso 3**
-En el *Cuadro de herramientas* arrastramos un **TextBox** a nuestro formulario, hacemos clic en la esquina superior derecha del cuadro de texto y seleccionamos la casilla *MultiLine* para que permita varias líneas en el textbox y lo ajustamos como queramos.
![2017-10-18 (4).png](https://steemitimages.com/DQmNqE7h4dSETigfkwrpJoPGbrjbpfTCaUshzNRss2wkMJQ/2017-10-18%20(4).png)

**Paso 4**
-He diseñado mi calculadora de este modo, y a continuación los detalles:
![2017-10-18 (9).png](https://steemitimages.com/DQmYqCmcG3yvJEm4D1Yps7E93WY7fWHLLq4zH8U4uroKgpW/2017-10-18%20(9).png)

4.1 Cambiamos nuestro fondo del formulario en la casilla <code>BackColor</code> por <code>Silver</code>.
4.2 El cuadro de texto anteriormente colocado le asignaremos el mismo color, <code>BackColor-Silver</code>.
4.3 Para colocar los botones hacemos un clic en **"Button"** del cuadro de herramientas y lo arrastramos al formulario.
4.4 Modificamos las propiedades del Botón, como tamaño, fuente y color a tu gusto.
4.5 Multiplicamos los botones y lo colocamos como la imagen anterior.
4.6 Editamos el nombre de los botones según su función para tener un orden en la casilla <code>'Name'</code>, por ejemplo: el botón de suma le coloqué <code>btsuma</code> y así vamos asignando los nombres a cada uno incluyendo el Textbox.
![2017-10-18 (10).png](https://steemitimages.com/DQmNUEwuFDHZFjmCwgsxcrc1PkmFoxrVWwz2kJqNbd5u7Yx/2017-10-18%20(10).png)
 
Decidí eliminar el botón de <code>x2</code> para colocar un botón de borrar y no desordenar el diseño.
![2017-10-18 (11).png](https://steemitimages.com/DQmd9dD7SEE7a2NUeoTsv345vwi7D2355H3UHThVQzG48sv/2017-10-18%20(11).png)

**Paso 5**
-Listo nuestro diseño, ahora nos toca programar.
Empezaremos declarando tres variables
<code>Private numero1 As Double = 0.0
Private numero2 As Double = 0.0
Private signo As String</code>
![2017-10-18 (12).png](https://steemitimages.com/DQmchK4sAQFtJBqJYXroiD7fbWTcSnp7RyzAVpUjX53gP75/2017-10-18%20(12).png)

Ahora configuramos los botones numéricos para que cuando hagamos clic en los números se escriba en el <code>Textbox</code>.

Escribimos este código para cada botón, y cambiamos **número** por el botón que corresponde.
<code>txtpantalla.Text = txtpantalla.Text & "**número**"</code>
![2017-10-18 (13).png](https://steemitimages.com/DQmb33PvgqvYS6BhBosxqqqypU672NWDBoRH8LspQm1fkec/2017-10-18%20(13).png)

En el botón <code>,</code> o el decimal, escribimos el siguiente código.

<code>If txtpantalla.Text = "" Then</code>  // si la pantalla está vacía cuando coloquemos el punto
<code>txtpantalla.Text = "0."</code> // se agregará un "0" a su izquierda
<code>ElseIf point(txtpantalla.Text) = False Then</code> // si ya existe un punto, entonces el punto no se colocará
<code>txtpantalla.Text = txtpantalla.Text & "."</code>
<code>End If</code>

Podemos ver que "point" no está declarada y no tiene ninguna función para eso el siguiente código.

<code>Private Function point(ByVal chain As String) As Boolean
        Dim largo As Integer
        Dim reply As Boolean = False
        largo = chain.Length
        For i As Integer = 1 To largo Step 1
            If Mid(chain, 1, 1) = "." Then
                reply = True
            End If
        Next
        Return reply
    End Function</code>

**Paso 6:**
Ahora asignaremos a cada signo (+,-,/,%,*) un <code>Try</code>:
![2017-10-18 (14).png](https://steemitimages.com/DQmQJFosGF3XfBdELo5Hwn15xyU6orirF35YQwK5aArS4Kw/2017-10-18%20(14).png)

<code>Try
            If txtpantalla.Text <> "" Then
                numero1 = Val(txtpantalla.Text)
                signo = "+"  // Cambiamos el signo según corresponda el botón.
                txtpantalla.Clear()
            End If
        Catch ex As Exception
        End Try</code>

El botón '**limpiar**' lo configuramos de la siguiente manera:
<code>txtpantalla.Clear() //Limpia el campo de texto
        numero1 = 0.0 // iguala la variable a 0
        numero2 = 0.0 //iguala la variable a 0
        signo = String.Empty // formatea el signo</code>

![2017-10-18 (15).png](https://steemitimages.com/DQmbF1syp3aTmuxVzBtEdaatx9qWTZ7R45HVfaQiozXpX8G/2017-10-18%20(15).png)

Y el botón '**borrar**' lo configuramos así:
<code>Try
            Dim largo As Integer
            If txtpantalla.Text <> "" Then
                largo = txtpantalla.Text.Length
                txtpantalla.Text = Mid(txtpantalla.Text, 1, largo - 1)
            End If
        Catch ex As Exception
        End Try</code>
![2017-10-18 (16).png](https://steemitimages.com/DQmbmXmuY5PP9tr1aE6obf6Vv53NruMkpfE3CFZyFSkqpvp/2017-10-18%20(16).png)

Creamos un "Case", para asignar la función a cada signo.
<code>Private Sub calculadora()
        Select Case signo
            Case "+"
                txtpantalla.Text = numero1 + numero2
            Case "-"
                txtpantalla.Text = numero1 - numero2
            Case "*"
                txtpantalla.Text = numero1 * numero2
            Case "/"
                txtpantalla.Text = numero1 / numero2
            Case "%"
                txtpantalla.Text = numero1 * numero2 / 100
            Case Else
                MsgBox("Error de cálculo")
        End Select
    End Sub</code>
![2017-10-18 (18).png](https://steemitimages.com/DQmU1aS3hkqG7kjgxRNEcMM7Gdw8y9zGZxZv2s3RZiRcdHj/2017-10-18%20(18).png)

y configuramos el botón más importante, el signo "=",

<code>Try
            If txtpantalla.Text <> "" And numero1 <> 0.0 Then
                numero2 = txtpantalla.Text
                calculadora()
            End If
        Catch ex As Exception
        End Try</code>

---

Diseñada y programada nuestra calculadora tenemos todo listo para utilizarla.
![2017-10-18 (21).png](https://steemitimages.com/DQmZRfPHsR1KxQDEEpSXzVBYXMahPGZRZBhLRGggatReeit/2017-10-18%20(21).png)

Una calculadora sencilla que se le pueden agregar más botones a tu gusto, ponte creativo.

Espero que esta información sea de gran utilidad para esos futuros programadores o que desean empezar en el mundo de la programación en un lenguaje como su nombre lo indica 'Básico'. 

**Saludos amigos!**
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 36 others
properties (23)
authoroscarcc89
permlinkaprende-or-disena-y-programa-una-calculadora-en-visual-studio-2017
categoryprogramming
json_metadata{"tags":["programming","spanish","cervantes","tutorial","development"],"image":["https://steemitimages.com/DQmcsp7gMM65CPZHfnMJC4wuUdA1JBTx1wyNDbuQ26EEcc1/2017-10-18%20.png","https://steemitimages.com/DQmafkPDxhdR4WRjBhcRAMDVXixGLfRFESinu4sGbZGhsHW/2017-10-18%20(2).png","https://steemitimages.com/DQmRh1gqaCDkT9EBcfVvUzDqMmaJ99s8MS5mvMriexiZhso/2017-10-18%20(3).png","https://steemitimages.com/DQmR8i2GFCAaZwYW7cD1p1gwP97JGwsHUVbQZB63jL5GXGY/2017-10-18%20(3).png","https://steemitimages.com/DQmNqE7h4dSETigfkwrpJoPGbrjbpfTCaUshzNRss2wkMJQ/2017-10-18%20(4).png","https://steemitimages.com/DQmYqCmcG3yvJEm4D1Yps7E93WY7fWHLLq4zH8U4uroKgpW/2017-10-18%20(9).png","https://steemitimages.com/DQmNUEwuFDHZFjmCwgsxcrc1PkmFoxrVWwz2kJqNbd5u7Yx/2017-10-18%20(10).png","https://steemitimages.com/DQmd9dD7SEE7a2NUeoTsv345vwi7D2355H3UHThVQzG48sv/2017-10-18%20(11).png","https://steemitimages.com/DQmchK4sAQFtJBqJYXroiD7fbWTcSnp7RyzAVpUjX53gP75/2017-10-18%20(12).png","https://steemitimages.com/DQmb33PvgqvYS6BhBosxqqqypU672NWDBoRH8LspQm1fkec/2017-10-18%20(13).png","https://steemitimages.com/DQmQJFosGF3XfBdELo5Hwn15xyU6orirF35YQwK5aArS4Kw/2017-10-18%20(14).png","https://steemitimages.com/DQmbF1syp3aTmuxVzBtEdaatx9qWTZ7R45HVfaQiozXpX8G/2017-10-18%20(15).png","https://steemitimages.com/DQmbmXmuY5PP9tr1aE6obf6Vv53NruMkpfE3CFZyFSkqpvp/2017-10-18%20(16).png","https://steemitimages.com/DQmU1aS3hkqG7kjgxRNEcMM7Gdw8y9zGZxZv2s3RZiRcdHj/2017-10-18%20(18).png","https://steemitimages.com/DQmZRfPHsR1KxQDEEpSXzVBYXMahPGZRZBhLRGggatReeit/2017-10-18%20(21).png"],"app":"steemit/0.1","format":"markdown"}
created2017-10-19 00:25:15
last_update2017-10-19 13:14:06
depth0
children0
last_payout2017-10-26 00:25:15
cashout_time1969-12-31 23:59:59
total_payout_value8.905 HBD
curator_payout_value2.871 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,482
author_reputation39,280,345,355,228
root_title"¡Aprende! | Diseña y programa una 'Calculadora' en Visual Studio 2017"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id18,011,192
net_rshares5,262,441,078,982
author_curate_reward""
vote details (100)