Tutorial: Criar um aplicativo Windows Forms de visualizador de imagens (.NET Framework)

Nesta série de três tutoriais, você cria 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.

Neste primeiro tutorial, você aprenderá a:

• Criar um projeto do Visual Studio que usa o Windows Forms
• Adicionar um elemento de layout
• Executar seu aplicativo

Para criar um novo aplicativo do Windows Forms com o .NET, siga o tutorial Criar um aplicativo do Windows Forms com o .NET. Consulte o Guia de Desktop do Windows Forms .NET para saber mais.

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.
• A carga de trabalho de Desenvolvimento para desktop do .NET. Para verificar ou instalar essa carga de trabalho no Visual Studio, selecione Ferramentas>Obter Ferramentas e Recursos. Para obter mais informações, consulte Modificar cargas de trabalho ou componentes individuais.

Criar seu projeto do Windows Forms

Quando você cria 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.

   

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.

   

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

   

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

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

Adicionar um elemento de 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, redimensionar o formulário e adicionar um elemento de layout.

1. Em seu projeto, selecione o Designer de Formulários do Windows. Na guia, está escrito 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 do formulário. A janela Propriedades geralmente está no canto inferior direito do Visual Studio. Esta seção controla várias propriedades, como cor de plano de fundo e primeiro plano, texto de 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 é classificada, talvez seja necessário rolar para baixo. Insira o valor Visualizador de Imagens e escolha Enter.

   Seu formulário agora tem o texto Visualizador de Imagens 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 de um lado para o outro.

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.

   

   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 é diferente. 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.

   

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.

   

   Nota

   Depois de adicionar o TableLayoutPanel, se uma janela aparecer dentro do formulário com o título TableLayoutPanel Tarefas, clique em qualquer lugar dentro do formulário para fechá-lo.

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

   

10. Com o 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.

    

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

    O TableLayoutPanel agora preenche todo o formulário. Se você redimensionar o formulário novamente, o TableLayoutPanel se manterá ancorado e se redimensionará para se ajustar.

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.

    

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

13. Selecione Coluna1 e defina seu tamanho como 15%. Verifique se a opção Porcentagem está selecionada.

14. Selecione Coluna2 e defina-o como 85%.

    

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

    Seu TableLayoutPanel agora tem uma linha superior grande, uma linha inferior pequena, uma pequena coluna esquerda e uma coluna direita grande.

    

Seu layout está completo.

Nota

Antes de executar seu aplicativo, salve seu aplicativo escolhendo o botão Salvar Tudo barra de ferramentas. 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 seu aplicativo

Ao criar um projeto de aplicativo do Windows Forms, você cria um programa que é executado. Neste estágio, seu aplicativo Visualizador de Imagens não faz muito. 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 seguintes métodos:

   • Selecione a chave 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.

   

   Examine a barra de ferramentas do IDE do Visual Studio. Mais botões aparecem na barra de ferramentas quando você executa um aplicativo. Esses botões permitem que você faça coisas como parar e iniciar seu aplicativo e ajudá-lo a rastrear quaisquer erros.

   

2. Use um dos seguintes métodos para interromper 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 do 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óxima etapa

Avance para o próximo tutorial para saber como adicionar controles ao seu programa visualizador de imagens.

Tutorial parte 2: Adicionar controles ao visualizador de imagens