Crear Calculadora con WPF y C# (Primera Parte)

Como ejercicio crearemos una calculadora básica en C# y WPF, con la cual trabajaremos algunos elementos básicos como:

• Grillas/tablas/matriz de diseño
• Insertar elementos (botones y textbox)
• Ajustar elementos dentro de la grilla
• Realizar una programación en C#

Antes de comenzar, diseñaremos previamente la interfaz de la calculadora, con la finalidad de tener claro los elementos.

Bajo este diseño sabremos que necesitaremos:

• Grilla con 4 columnas y 6 filas
• 1 Textbox donde se muestre el resultado
• Botones números, de operación y limpiadores

Manos a la obra...

1.- Creamos un nuevo proyecto C# WPF.

2.- Cambiamos algunas propiedades del código XAML , como el Title (titulo), Height (alto) y Width (ancho)

mc:Ignorable="d"

        Title="Calculadora WPF" Height="400" Width="250">

3.- Creamos las 4 columnas.

          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>

4.- Creamos las 6 filas

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

Deberíamos tener esto

5.- Creamos todos los botones. Creamos una grilla de 4 columnas X 6 filas la que nos da un total de 24 cuadros en forma de matriz. El Grid.Row indica la posición de la fila y Grid.Column la posición de la columna. Por lo tanto el primer cuadro de la esquina superior izquierda corresponderá al Grid.Row="0" Grid.Column="0", el que esta inmediatamente bajo de este sera Grid.Row="1" Grid.Column="0".

   <!-- Botones: Números -->
        <Button Grid.Row="2" Grid.Column="0">7</Button>
        <Button Grid.Row="2" Grid.Column="1">8</Button>
        <Button Grid.Row="2" Grid.Column="2">9</Button>
        <Button Grid.Row="3" Grid.Column="0">4</Button>
        <Button Grid.Row="3" Grid.Column="1">5</Button>
        <Button Grid.Row="3" Grid.Column="2">6</Button>
        <Button Grid.Row="4" Grid.Column="0">1</Button>
        <Button Grid.Row="4" Grid.Column="1">2</Button>
        <Button Grid.Row="4" Grid.Column="2">3</Button>
        <Button Grid.Row="5" Grid.Column="1">0</Button>

        <!-- Botones: Operadores -->
        <Button Grid.Row="1" Grid.Column="3">+</Button>
        <Button Grid.Row="2" Grid.Column="3">-</Button>
        <Button Grid.Row="3" Grid.Column="3">*</Button>
        <Button Grid.Row="4" Grid.Column="3">*</Button>
        <Button Grid.Row="5" Grid.Column="3">=</Button>

        <!-- Botones: Limpiadores -->
        <Button Grid.Row="1" Grid.Column="0">CE</Button>
        <Button Grid.Row="1" Grid.Column="1">C</Button>
        <Button Grid.Row="1" Grid.Column="2" Content="&lt;="></Button>
        
        <!-- Boton: Positivo y Negativo -->
        <Button Grid.Row="5" Grid.Column="0" Content="+-"></Button>

6.- Creamos el TextBox. Este elemento tendrá la particularidad de ocupar 4 espacios en la fila, por lo tanto utilizaremos Grid.ColumnSpan="4" para abarcarlos.

<!-- TextBox -->
        <TextBox IsReadOnly="True" TextAlignment="Right" VerticalContentAlignment="Bottom" FontSize="40" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4">0</TextBox>

7.- Código completo de la parte gráfica

   <Window x:Class="Calculadora.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Calculadora"
        mc:Ignorable="d"
        Title="Calculadora WPF" Height="400" Width="250">
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <!-- Botones: Números -->
        <Button Grid.Row="2" Grid.Column="0">7</Button>
        <Button Grid.Row="2" Grid.Column="1">8</Button>
        <Button Grid.Row="2" Grid.Column="2">9</Button>
        <Button Grid.Row="3" Grid.Column="0">4</Button>
        <Button Grid.Row="3" Grid.Column="1">5</Button>
        <Button Grid.Row="3" Grid.Column="2">6</Button>
        <Button Grid.Row="4" Grid.Column="0">1</Button>
        <Button Grid.Row="4" Grid.Column="1">2</Button>
        <Button Grid.Row="4" Grid.Column="2">3</Button>
        <Button Grid.Row="5" Grid.Column="1">0</Button>

        <!-- Botones: Operadores -->
        <Button Grid.Row="1" Grid.Column="3">+</Button>
        <Button Grid.Row="2" Grid.Column="3">-</Button>
        <Button Grid.Row="3" Grid.Column="3">*</Button>
        <Button Grid.Row="4" Grid.Column="3">*</Button>
        <Button Grid.Row="5" Grid.Column="3">=</Button>

        <!-- Botones: Limpiadores -->
        <Button Grid.Row="1" Grid.Column="0">CE</Button>
        <Button Grid.Row="1" Grid.Column="1">C</Button>
        <Button Grid.Row="1" Grid.Column="2" Content="&lt;="></Button>
        
        <!-- Boton: Positivo y Negativo -->
        <Button Grid.Row="5" Grid.Column="0" Content="+-"></Button>

        <!-- TextBox -->
        <TextBox IsReadOnly="True" TextAlignment="Right" VerticalContentAlignment="Bottom" FontSize="40" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4">0</TextBox>
    </Grid>
</Window>

Al Finalizar tendremos algo así:

Hasta aquí la primera parte.