Exercício – Escrever um aplicativo Windows Forms

Concluído

Screenshot that shows the UWP, WPF, and Windows Forms logo.

O Windows Forms, baseado na respeitável API do Win32, ainda é uma tecnologia de interface do usuário popular para o desenvolvimento de ferramentas e utilitários que não exigem nada sofisticado. Os aplicativos criados com o Windows Forms são executados em um computador desktop, notebook ou tablet Windows e têm uma aparência familiar para praticamente todas as pessoas que já usaram um computador.

Nesta unidade, vamos:

  • Usar o Visual Studio para criar um projeto Windows Forms.
  • Adicionar elementos de interface do usuário e de código ao projeto para criar uma variação divertida de um programa "Olá, Mundo". O texto "Olá!" mudará de cor aleatoriamente sempre que você selecionar o botão Diga olá.
  • Aprender a definir propriedades e criar eventos.

Observação

Seu computador deve estar configurado com o Windows e o Visual Studio, conforme descrito no módulo do Learn Introdução ao desenvolvimento para Windows 10.

Tutorial do "Diga olá" do Windows Forms

Criar o projeto

  1. Abra o Visual Studio e selecione Arquivo>Novo>Projeto no menu. Com C# selecionado como a linguagem do projeto, localize e selecione Aplicativo Windows Forms nas opções do projeto. Altere o Nome para algo amigável, como Diga olá e selecione Avançar ao terminar.

    Screenshot that shows the Configure your new project window for a Windows Forms App with the Next button selected.

  2. Escolha sua versão do .NET e selecione Criar.

  3. Por padrão, os painéis Caixa de Ferramentas, Gerenciador de Soluções e Propriedades estão abertos. Se não estiverem, abra-os no menu Exibir. Expanda a lista Controles Comuns da Caixa de ferramentas.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

Criar a interface do usuário

  1. Com o painel Propriedades de Form1 aberto, altere a entrada Texto de Form1 para Diga olá. Do outro lado da tela, arraste um Botão da Caixa de ferramentas para a parte inferior do formulário e uma TextBox para a parte superior. Em seguida, amplie a caixa de texto um pouco, para que seu design fique semelhante a este:

    Screenshot that shows a button and text box dragged onto the design layout.

  2. Selecione o botão para exibir as propriedades dele. Altere o Nome para BotãoDigaOlá e, em seguida, role para baixo nas propriedades e altere a propriedade Texto para Diga olá.

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. É necessário anexar um evento ao botão. É possível anexar o evento selecionando o botão no modo de exibição de Design ou selecionando o ícone de evento em Propriedades e, em seguida, selecionando a tecla ENTER ou a entrada de evento Clicar. Independentemente do método escolhido, o Visual Studio adiciona automaticamente a estrutura de código do evento SayHelloButton_Click ao arquivo Form1.cs e abre o arquivo. Dê uma olhada rápida e volte para o modo de exibição de Design.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

    Observação

    Se fechou acidentalmente o modo de exibição de Design, você poderá abri-lo novamente simplesmente clicando duas vezes em Form1.cs no Gerenciador de Soluções. Abrir um formulário Windows Forms no modo de exibição de Design é a ação padrão no Visual Studio.

  4. Selecione a caixa de texto no modo de exibição de Design para abrir suas propriedades. Se você usou o método da lista de eventos para adicionar o evento de botão, escolha o ícone de chave inglesa e de documento em Propriedades. Deixe a entrada Nome como textBox1. Selecione o sinal de adição ao lado de Fonte e altere o Tamanho da fonte para 24. Em seguida, role um pouco para baixo nas propriedades e altere a propriedade Text para Hello there! e TextAlign para Center.

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

Adicionar o código

  1. Agora, mude a exibição principal para exibir o Form1.cs.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. Para que as cores aleatórias do texto apareçam, será preciso adicionar uma variável em nível de classe Random rand. É necessário inicializá-la no método de construtor Form1 e inserir um método para preencher uma matriz de bytes curta com números aleatórios. Copie e cole ou digite as seguintes linhas de código:

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            InitializeComponent();
            rand = new Random();
        }
    
        private byte[] GetRandomBytes(int n)
        {
            // Fill an array of bytes of length "n" with random numbers.
            var randomBytes = new byte[n];
            rand.NextBytes(randomBytes);
            return randomBytes;
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  3. Para alterar a cor do texto sempre que o botão Diga olá for selecionado, adicione o corpo do método SayHelloButton_Click ao programa.

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. Reserve um tempo para revisar seu código. Se algo estiver sublinhado em vermelho, isso indicará que há algum erro. Pode ser uma palavra incorreta ou um pouco de código incorreto.

Executar

Vamos compilar e executar o programa.

  1. No Visual Studio, no menu Depurar, escolha Iniciar sem depuração ou basta selecionar a tecla F5. Se você tiver inserido tudo corretamente, verá um aplicativo em execução semelhante a este:

    Screenshot that shows the app running. Hello there displays in bright green text with the Say hello button below it.

  2. Depois de alguns segundos de tempo de build, selecione repetidamente Say hello e veja o texto Hello there! mudar de cor.

Se isso for o que você vê, parabéns! Você concluiu este tutorial. Caso contrário, reexamine cuidadosamente as configurações de propriedades do código e da interface do usuário para encontrar algo que tenha passado despercebido.