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

Nesta série de quatro tutoriais, você cria um teste de matemática. O teste contém quatro problemas matemáticos aleatórios que um participante do teste tenta responder dentro de 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, consulte 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.

Criar seu projeto do Windows Forms

Quando você cria 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 de formulário

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

1. Em seu projeto, selecione o Designer de Formulários do Windows. A guia do designer é rotulada 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 está 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 é classificada, talvez seja necessário rolar para baixo. Insira o valor Teste de Matemática no valor Texto e selecione Enter.

   Seu formulário agora tem o texto "Teste de Matemática" na barra de título.

   Nota

   Você pode exibir 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 da forma para 500 pixels de largura em 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 Size.

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

   Esses valores impedem que os participantes do 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 restam na prova. Esta seção mostra como usar um rótulo para essa caixa. Você adiciona 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 você não vir a caixa de ferramentas, 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. No quadro Propriedades, defina as seguintes propriedades para o rótulo:

   • Defina o(Name) como timeLabel.
   • Altere AutoSize para False para que você possa redimensionar a caixa.
   • Altere BorderStyle para FixedSingle para desenhar uma linha em torno da caixa.
   • Defina o tamanho do como 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 Rótulo na Caixa de ferramentas e, em seguida, defina o tamanho da fonte como 15,75.

6. Defina a propriedade Text como Time Left.

7. Mova o rótulo para que ele se alinha à esquerda do rótulo timeLabel.

   

Adicionar controles para o problema 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 Rótulo na 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.
   • Configure 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 (Nome) 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 para que eles 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 da caixa de ferramentas ao formulário. Você aprenderá mais sobre esse tipo de controle mais tarde.

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

    • Defina o tamanho da fonte como 18.
    • Em MaximumSize, defina a largura como 100.
    • Defina o (Name) como soma.

11. Alinhe o controle NumericUpDown com os controles Rótulo para o problema de adição.

    

Adicionar controles para os problemas de subtração, multiplicação e 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 que fiquem alinhados abaixo dos controles de adição.

3. Na caixa Propriedades, defina as seguintes propriedades para os 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). Você pode copiar o sinal de multiplicação deste tutorial e cole-o 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 para ÷ (sinal de divisão). Você pode 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 de iniciar e definir a ordem do índice de tabulação

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 da caixa de ferramentas ao formulário.

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

   • Defina o (Name) como startButton.
   • Defina o Text como Iniciar o teste.
   • Defina o tamanho da fonte como 14.
   • Defina AutoSize para True, o que faz com que o botão se redimensione automaticamente para ajustar ao texto.
   • Defina o 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 o TabIndex do controle soma como 1.
   • Defina o TabIndex do controle diferença como 2.
   • Defina o TabIndex do controle produto como 3.
   • Defina o TabIndex do controle quociente como 4.

Executar seu 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 conforme o 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óxima etapa

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