Tutorial: Criar um aplicativo WinForms de teste de matemática

Nesta série de quatro tutoriais, você criará um teste de matemática. O teste contém quatro problemas matemáticos aleatórios que um participante do teste tentará responder em um tempo especificado.

O IDE (ambiente de desenvolvimento integrado) do Visual Studio fornece as ferramentas necessárias para criar o aplicativo. Para saber mais sobre esse IDE, confira Bem-vindo ao IDE do Visual Studio.

Neste primeiro tutorial, você aprenderá a:

Pré-requisitos

Você precisa do Visual Studio para concluir este tutorial. Visite a página de downloads do Visual Studio para obter uma versão gratuita.

Crie seu projeto do Windows Forms

Ao criar um teste de matemática, a primeira etapa é criar um projeto de aplicativo do Windows Forms.

O Visual Studio cria uma solução para seu aplicativo. Uma solução é um contêiner para todos os projetos e arquivos de que seu aplicativo precisa.

Definir propriedades do formulário

Depois de selecionar o modelo de projeto e nomear seu arquivo, o Visual Studio abrirá um formulário para você. Essa seção mostra como alterar algumas propriedades do formulário.

1. Em seu projeto, selecione o Designer de Formulários do Windows. A guia designer é rotulada como Form1.cs [Design] para C# ou Form1.vb [Design] para Visual Basic.

2. Selecione o formulário Form1.

3. A janela Propriedades agora exibe as propriedades do formulário. Essa janela geralmente fica no canto inferior direito do Visual Studio. Se Propriedades não for exibido, selecione Exibir>Janela Propriedades.

4. Localize a propriedade Texto na janela Propriedades. Dependendo de como a lista estiver classificada, talvez seja necessário rolar para baixo. Insira o valor Teste de Matemática no valor Texto e selecione Enter.

   Agora, seu formulário tem o texto "Teste de Matemática" na barra de título.

   Observação

   Você pode exibir as propriedades por categoria ou em ordem alfabética. Use os botões na janela Propriedades para alternar para frente e para trás.

5. Altere o tamanho do formulário para 500 pixels de largura por 400 pixels de altura.

   Você pode redimensionar o formulário arrastando suas bordas ou arrastando a alça até que o tamanho correto apareça como o valor Tamanho na janela Propriedades. A alça do identificador é um quadrado branco pequeno no canto inferior direito do formulário. Você também pode redimensionar o formulário alterando os valores da propriedade Tamanho.

6. Altere o valor da propriedade FormBorderStyle para Fixed3D e defina a propriedade MaximizeBox para False.

   Esses valores impedem que os participantes de teste redimensionem o formulário.

Criar a caixa tempo restante

O teste de matemática contém uma caixa no canto superior direito. Essa caixa mostra o número de segundos que permanecem no teste. Essa seção mostra como usar um rótulo dessa caixa. Você adicionará código para o temporizador de contagem regressiva em um tutorial posterior nesta série.

1. No lado esquerdo do IDE do Visual Studio, selecione a guia Caixa de Ferramentas. Se não aparecer, selecione Exibir>Caixa de Ferramentas na barra de menus ou Ctrl+Alt+X.

2. Selecione o controle Label na Caixa de Ferramentas e arraste-o para o formulário.

3. Na caixa Propriedades, defina as seguintes propriedades para o rótulo:

   • Defina o(Nome) como timeLabel.
   • Altere AutoSize para False de modo que você possa redimensionar a caixa.
   • Altere BorderStyle para FixedSingle para desenhar uma linha em torno da caixa.
   • Defina o tamanho para 200, 30.
   • Selecione a propriedade Text e, em seguida, selecione a tecla Backspace para limpar o valor Texto.
   • Selecione o sinal de adição (+) ao lado da propriedade Font e defina o tamanho do como 15,75.

4. Mova o rótulo para o canto superior direito do formulário. Quando as linhas do espaçador azul aparecerem, use-as para posicionar o controle no formulário.

5. Adicione outro controle Label da caixa de ferramentas e, em seguida, defina seu tamanho da fonte para 15,75.

6. Defina a propriedade Text como Time Left.

7. Mova o rótulo de modo que ele alinhe à esquerda do rótulo timeLabel.

   

Adicionar controles aos problemas de adição

A primeira parte do teste é um problema de adição. Esta seção mostra como usar rótulos para exibir esse problema.

1. Adicione um controle de rótulo a partir da Caixa de ferramentas ao formulário.

2. Na caixa Propriedades, defina as seguintes propriedades para o rótulo:

   • Defina o Texto como ? (ponto de interrogação).
   • Defina AutoSize como False.
   • Defina o Tamanho para 60, 50.
   • Defina o tamanho da fonte como 18.
   • Defina TextAlign como Middlecenter.
   • Defina Location como 50, 75 para posicionar o controle no formulário.
   • Defina (Name) como plusLeftLabel.

3. No formulário, selecione o rótulo plusLeftLabel que você criou. Copie o rótulo selecionando Editar>Copiar ou Ctrl+C.

4. Cole o rótulo no formulário três vezes selecionando Editar>Colar ou Ctrl+V três vezes.

5. Organize os três novos rótulos de modo que fiquem em uma linha à direita do rótulo plusLeftLabel.

6. Defina a propriedade Text do segundo rótulo como + (sinal de mais).

7. Defina a propriedade (Name) do terceiro rótulo como plusRightLabel.

8. Defina a propriedade Text do quarto rótulo como = (sinal de igual).

9. Adicione um controle NumericUpDown a partir da Caixa de ferramentas ao formulário. Você aprenderá mais sobre esse tipo de controle posteriormente.

10. Na caixa Propriedades, defina as seguintes propriedades para o controle NumericUpDown:

    • Defina o tamanho da fonte como 18.
    • Defina a largura como 100.
    • Defina o (Nome) como soma.

11. Alinhe o controle NumericUpDown com os controles Label para o problema de adição.

    

Adicionar controles para subtração, multiplicação e problemas de divisão

Em seguida, adicione rótulos ao formulário para os problemas matemáticos restantes.

1. Copie os quatro controles Label e o controle NumericUpDown que você criou para o problema de adição. Cole-os no formulário.

2. Mova os novos controles para alinhar abaixo dos controles de adição.

3. Na caixa Propriedades, defina as seguintes propriedades dos novos controles:

   • Defina o (Name) do primeiro rótulo de ponto de interrogação como minusLeftLabel.
   • Defina o Texto do segundo rótulo como - (sinal de subtração).
   • Defina o (Name) do segundo rótulo de ponto de interrogação como minusRightLabel.
   • Defina o (Name) do controle NumericUpDown como diferença.

4. Copie os controles de adição e cole-os mais duas vezes no formulário.

5. Na terceira linha:

   • Defina o (Name) do primeiro rótulo de ponto de interrogação como timesLeftLabel.
   • Defina o Texto do segundo rótulo como × (sinal de multiplicação). É possível copiar o sinal de multiplicação deste tutorial e colá-lo no formulário.
   • Defina o (Name) do segundo rótulo de ponto de interrogação como timesRightLabel.
   • Defina o (Name) do controle NumericUpDown como produto.

6. Na quarta linha:

   • Defina o (Name) do primeiro rótulo de ponto de interrogação como dividedLeftLabel.
   • Defina o Texto do segundo rótulo como ÷ (sinal de divisão). É possível copiar o sinal de divisão deste tutorial e colá-lo no formulário.
   • Defina o (Name) do segundo rótulo de ponto de interrogação como dividedRightLabel.
   • Defina o (Name) do controle NumericUpDown como quociente.

Adicionar um botão Iniciar e definir a ordem do índice de guias

Esta seção mostra como adicionar um botão iniciar. Você também especificará a ordem de tabulação dos controles. Essa ordenação determina como o participante do teste passa de um controle para o outro usando a tecla Tab.

1. Adicione um controle Button a partir da Caixa de ferramentas ao formulário.

2. Na caixa Propriedades, defina as seguintes propriedades do botão:

   • Defina o (Name) como startButton.
   • Defina Text como Iniciar o teste.
   • Defina o tamanho da fonte como 14.
   • Defina AutoSize como True, o que faz com que o botão seja redimensionado automaticamente para se ajustar ao texto.
   • Defina TabIndex como 0. Esse valor torna o botão Iniciar o primeiro controle a receber o foco.

3. Centralize o botão próximo à parte inferior do formulário.

   

4. Na caixa Propriedades , defina a propriedade TabIndex de cada controle NumericUpDown:

   • Defina TabIndex da soma do controle NumericUpDown como 1.
   • Defina TabIndex da diferença do controle NumericUpDown como 2.
   • Defina TabIndex do produto do controle NumericUpDown como 3.
   • Defina TabIndex do quociente do controle NumericUpDown como 4.

Executar o aplicativo

Os problemas matemáticos ainda não funcionam no teste. Mas você ainda pode executar seu aplicativo para verificar se os valores tabIndex funcionam como esperado.

1. Use um dos seguintes métodos para salvar seu aplicativo:

   • Selecione Ctrl+Shift+S.
   • Na barra de menus, selecione Arquivo>Salvar tudo.
   • Na barra de ferramentas, selecione o botão Salvar tudo.

2. Use um dos seguintes métodos para executar seu aplicativo:

   • Selecione F5.
   • Na barra de menus, selecione Depurar>Iniciar depuração.
   • Na barra de ferramentas, selecione o botão Iniciar.

3. Selecione a tecla Tab algumas vezes para ver como o foco se move de um controle para o outro.

Próximas etapas

Prossiga para o próximo tutorial para adicionar problemas matemáticos aleatórios e um manipulador de eventos ao teste de matemática.