Tutorial: Criar um aplicativo de visualizador de imagens do Windows Forms no Visual Studio

  • Artigo

Nesta série de três tutoriais, você irá criar um aplicativo do Windows Forms que carrega uma imagem e a exibe. O IDE (Ambiente de design Integrado) do Visual Studio fornece as ferramentas necessárias para criar o aplicativo. Para saber mais, confira Bem-vindo ao IDE do Visual Studio.

Neste primeiro tutorial, você aprenderá a:

  • Criar um projeto do Visual Studio que usa o Windows Forms
  • Adicione um elemento do layout
  • Execute seu aplicativo.

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

Ao criar um visualizador de imagens, a primeira etapa é criar um projeto de aplicativo do Windows Forms.

  1. Abra o Visual Studio.

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Na janela Criar um projeto, pesquise Windows Forms. Em seguida, selecione Área de Trabalho na lista Tipo de projeto.

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

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Observação

    Se você não encontrar o modelo do Aplicativo do Windows Forms (.NET Framework), pode instalá-lo a partir da janela Criar um novo projeto. Na mensagem Não encontrou o que precisa?, selecione o link Instalar mais ferramentas e recursos.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Em seguida, no Instalador do Visual Studio, selecione Desenvolvimento da área de trabalho do .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Selecione o botão Modificar no Instalador do Visual Studio. Pode ser necessário salvar o trabalho. Nesse caso, execute essa ação. Em seguida, selecione Continuar para instalar a carga de trabalho.

  5. Na janela Configurar seu novo projeto, dê ao projeto o nome PictureViewer, e, em seguida, selecione Criar.

  1. Abra o Visual Studio.

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Na janela Criar um projeto, pesquise Windows Forms. Em seguida, selecione Área de Trabalho na lista Tipo de projeto.

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

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Observação

    Se você não encontrar o modelo do Aplicativo do Windows Forms (.NET Framework), pode instalá-lo a partir da janela Criar um novo projeto. Na mensagem Não encontrou o que precisa?, selecione o link Instalar mais ferramentas e recursos.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Em seguida, no Instalador do Visual Studio, selecione Desenvolvimento da área de trabalho do .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Selecione o botão Modificar no Instalador do Visual Studio. Pode ser necessário salvar o trabalho. Nesse caso, execute essa ação. Em seguida, selecione Continuar para instalar a carga de trabalho.

  5. Na janela Configurar seu novo projeto, dê ao projeto o nome PictureViewer, e, em seguida, selecione Criar.

    Screenshot shows the Configure your new project dialog box.

O Visual Studio cria uma solução para seu aplicativo. Uma solução é um contêiner para todos os projetos e arquivos necessários pelo seu aplicativo.

Neste ponto, o Visual Studio exibe um formulário vazio no Designer de Formulários do Windows.

Adicione um elemento do layout

Seu aplicativo de exibição de imagem contém uma caixa de imagem, uma caixa de seleção e quatro botões, que você adicionará no próximo tutorial. O elemento de layout controla sua localização no formulário. Esta seção mostra como alterar o título do formulário, redimensioná-lo e adicionar um elemento de layout.

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

  2. Selecione qualquer lugar no Form1.

  3. A janela Propriedades agora exibe as propriedades para o formulário. A janela Propriedades geralmente está no canto inferior direito do Visual Studio. Esta seção controla várias propriedades, como a cor de primeiro plano e do plano de fundo, o texto do título que aparece na parte superior do formulário e o tamanho do formulário.

    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 Visualizador de Imagens e escolha Enter.

    O formulário agora tem o texto Visualizador de Imagens 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. Selecione o formulário novamente. Selecione a alça de arrastar no canto inferior direito do formulário. A alça é um quadrado branco pequeno no canto inferior direito do formulário.

    Screenshot shows the Forms window with the Drag handle in the lower right.

    Arraste a alça para redimensionar o formulário para que o formulário fique mais amplo e um pouco mais alto. Se você examinar a janela Propriedades, a propriedade Size foi alterada. Você também pode alterar o tamanho do formulário alterando a propriedade Size.

  6. 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.

  7. Selecione o símbolo de triângulo pequeno ao lado de Contêineres para abrir o grupo.

    Screenshot shows the Containers group in the Toolbox tab.

  8. Clique duas vezes em TableLayoutPanel na caixa de ferramentas. Você também pode arrastar um controle da caixa de ferramentas para o formulário. O controle TableLayoutPanel aparece em seu formulário.

    Screenshot show the form with the TableLayoutPanel control added.

    Observação

    Após adicionar seu TableLayoutPanel, se uma janela aparecer no formulário com o título Tarefas de TableLayoutPanel, clique em qualquer lugar dentro do formulário para fechá-la.

  9. Selecione TableLayoutPanel. Você pode verificar qual controle está selecionado examinando a janela Propriedades.

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. Com TableLayoutPanel selecionado, localize a propriedade Dock, que tem o valor None. Selecione a seta suspensa e, em seguida, selecione Preenchimento, que é o botão grande no meio do menu suspenso.

    Screenshot shows the Properties window with Fill selected.

    Encaixe refere-se a como uma janela é anexada a outra janela ou área.

    TableLayoutPanel agora preenche todo o formulário. Se você redimensionar o formulário novamente, o TableLayoutPanel permanecerá anexado e se redimensionará para caber.

  11. No formulário, selecione TableLayoutPanel. No canto superior direito, há um pequeno botão de triângulo preto.

    Selecione o triângulo para exibir a lista de tarefas do controle.

    Screenshot shows TableLayoutPanel tasks.

  12. Selecione Editar Linhas e Colunas para exibir a caixa de diálogo Estilos de Coluna e Linha.

  13. Selecione Column1 e defina seu tamanho como 15%. Verifique se o botão Porcentagem está selecionado.

  14. Selecione Column2 e defina-a como 85%.

    Screenshot shows TableLayoutPanel column and row styles.

  15. Em Mostrar na parte superior da caixa de diálogo Estilos de Coluna e Linha, selecione Linhas. Defina Row1 como 90% e Row2 como 10%. Selecione OK para salvar suas alterações.

    O TableLayoutPanel agora tem uma grande primeira linha, uma pequena linha inferior, uma pequena coluna esquerda, e uma grande coluna direita.

    Screenshot shows the form with resized TableLayoutPanel.

Seu layout está completo.

Observação

Antes de executar seu aplicativo, salve seu aplicativo escolhendo o botão de barra de ferramentas Salvar Tudo. Como alternativa, para salvar seu aplicativo, escolha Arquivo>Salvar Tudo na barra de menus ou pressione Ctrl+Shift+S. É uma prática recomendada salvar no início e com frequência.

Executar o aplicativo

Ao criar um projeto do aplicativo do Windows Forms, você compila um programa que é executado. Nesta fase, seu aplicativo Visualizador de Imagens não faz muita coisa. Por enquanto, ele exibe uma janela vazia que mostra Visualizador de Imagens na barra de título.

Para executar o aplicativo, siga estas etapas.

  1. Use um dos métodos a seguir:

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

    O Visual Studio executa seu aplicativo. Uma janela com o título Visualizador de Imagens é exibida.

    Screenshot shows the Windows Forms app running.

    Veja o IDE da barra de ferramentas do Visual Studio. Mais botões aparecem na barra de ferramentas quando você executa um aplicativo. Esses botões permitem fazer coisas como parar e iniciar seu aplicativo, e ajudam você a rastrear erros.

    Screenshot shows the Debugging toolbar where you can stop the app.

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

    • Na barra de ferramentas, selecione o botão Parar Depuração.
    • Na barra de menus, selecione Depurar>Parar Depuração.
    • No teclado, insira Shift+F5.
    • Selecione X no canto superior da janela Visualizador de Imagens.

    Quando você executa seu aplicativo no IDE do Visual Studio, isso é chamado de depuração. Você executa seu aplicativo para localizar e corrigir bugs. Você segue o mesmo procedimento para executar e depurar outros programas. Para saber mais sobre depuração, confira Introdução ao depurador.

Próximas etapas

Avance para o próximo tutorial para saber como adicionar controles ao programa Visualizador de Imagens.

Parte 2 do Tutorial: Adicionar controles ao Visualizador de Imagens