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

Nesta série de quatro tutoriais, você constrói um questionário de matemática. O teste contém quatro problemas matemáticos aleatórios que um participante do questionário tenta responder dentro de um tempo especificado.

O ambiente de desenvolvimento integrado (IDE) 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:

• Crie um projeto do Visual Studio que usa o Windows Forms.
• Adicione rótulos, um botão e outros controles a um formulário.
• Defina propriedades para os controles.
• Salve e execute seu projeto.

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.

Observação

Este tutorial requer o Windows Forms App (.NET Framework) modelo de projeto. Durante a instalação, selecione a carga de trabalho de desenvolvimento de desktop .NET :

Se você já tiver o Visual Studio instalado e precisar adicioná-lo, no menu, selecione Ferramentas>Obter Ferramentas e Recursosou na janela Criar um novo projeto, selecione o link Instalar mais ferramentas e recursos.

Crie seu projeto do Windows Forms

Quando você cria um teste de matemática, a primeira etapa é criar um projeto do Windows Forms App.

1. Abra o Visual Studio.

2. Na janela Iniciar, selecione Criar um novo projeto.

   

3. Na janela Criar um novo projeto, procure por Windows Forms. Em seguida, selecione Desktop na lista tipo de projeto.

4. Selecione o modelo Windows Forms App (.NET Framework) para C# ou Visual Basic e, em seguida, clique em Avançar.

   

5. Na janela Configurar seu novo projeto, nomeie seu projeto MathQuize selecione Criar.

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 seu modelo e nomear seu arquivo, o Visual Studio abre um formulário para você. Esta seção mostra como alterar algumas propriedades do formulário.

1. No seu projeto, selecione Windows Forms Designer. A guia do designer está 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 está no canto inferior direito do Visual Studio. Se não vir Propriedades, selecione Ver Janela>Propriedades.

4. Localize a propriedade Text na janela Propriedades. Dependendo de como a lista é classificada, talvez seja necessário rolar para baixo. Introduza o valor Quiz de Matemática para o valor de Texto e, em seguida, selecione Enter.

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

   Observação

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

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 de arrastar é um pequeno quadrado branco no canto inferior direito do formulário. Você também pode redimensionar o formulário alterando os valores da propriedade Tamanho.

6. Modifique o valor da propriedade FormBorderStyle para Fixed3De configure a propriedade MaximizeBox como False.

   Esses valores impedem que os participantes do questionário redimensionem o formulário.

Criar a caixa de 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 no questionário. 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 aba Caixa de Ferramentas. Se não vir a caixa de ferramentas, selecione Ver>Caixa de Ferramentas na barra de menus ou Ctrl+Alt+X.

2. Selecione o controle Label no Toolboxe, em seguida, 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 para que seja possível redimensionar a caixa.
   • Altere o BorderStyle para FixedSingle para desenhar uma linha ao redor da caixa.
   • Defina o Tamanho como 200, 30.
   • Selecione a propriedade Text e, em seguida, prima a tecla Backspace para limpar o valor Text.
   • Selecione o sinal de adição (+) ao lado da propriedade Font e defina o Tamanho 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 de Rótulo do Toolboxe, em seguida, defina seu tamanho de fonte como 15,75.

6. Defina a propriedade Text deste rótulo como Time Left.

7. Mova o rótulo para que ele fique alinhado à esquerda do timeLabel rótulo.

   

Adicionar controles para o problema de adição

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

1. Adicione um controle Label do Caixa de Ferramentas ao formulário.

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

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

3. No formulário, selecione o plusLeftLabel rótulo 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 eles fiquem alinhados à direita do rótulo plusLeftLabel.

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

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 do Caixa de Ferramentas ao formulário. Você aprenderá mais sobre esse tipo de controle mais tarde.

10. Na caixa Properties, defina as seguintes propriedades para o controlo NumericUpDown:

    • Defina o tamanho da fonte como 18.
    • Em MaximumSize, defina a largura como 100.
    • Defina o (Nome) para somar.

11. Alinhe o controle de NumericUpDown com os controles Label 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 de matemática restantes.

1. Copie os quatro controlos Label e o controlo NumericUpDown que foram criados para o problema de adição. Cole-os no formulário.

2. Mova os novos controlos para se alinharem por baixo dos controlos de adição.

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

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

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

5. Para a terceira linha:

   • Defina o (Nome) do primeiro rótulo de ponto de interrogação como timesLeftLabel.
   • Defina o de texto do segundo rótulo como × (sinal de multiplicação). Você pode copiar o sinal de multiplicação deste tutorial e colá-lo no formulário.
   • Defina o (Nome) do segundo rótulo de ponto de interrogação como timesRightLabel.
   • Defina o (Nome) do controle NumericUpDown como produto.

6. Para a quarta linha:

   • Defina o (Nome) 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 (Nome) da segunda etiqueta de interrogação para dividedRightLabel.
   • Defina o (Nome) do controle NumericUpDown para quociente.

Adicione um botão Iniciar e defina a ordem do índice de tabulação

Esta seção mostra como adicionar um botão Iniciar. Você também especifica a ordem de tabulação dos controles. Essa ordenação determina como o participante do questionário se move de um controle para o próximo usando a tecla Tab.

1. Adicione um controlo Button da Caixa de Ferramentas ao formulário.

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

   • Defina o (Nome) para startButton.
   • Defina o Texto como Iniciar o questionário.
   • 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 o TabIndex como 0. Esse valor faz com que o botão Iniciar seja o primeiro controle a receber o foco.

3. Centralize o botão perto da parte inferior do formulário.

   

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

   • Defina o TabIndex do controle soma como 1.
   • Defina o TabIndex da diferença de controle como 2.
   • Defina o TabIndex do controle de do produto para 3.
   • Defina o TabIndex do controlo quociente para 4.

Executar seu aplicativo

Os problemas de matemática ainda não funcionam no seu questionário. Mas você ainda pode executar seu aplicativo para verificar se os valores TabIndex funcionam como você espera.

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 próximo.

Próximo passo

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

Tutorial parte 2: Adicionar problemas de matemática a um teste de matemática Aplicativo WinForms