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

nesta série de três tutoriais, você criará um aplicativo Windows Forms que carrega uma imagem e a exibe. o ambiente de Design integrado do Visual Studio (IDE) fornece as ferramentas necessárias para criar o aplicativo. para saber mais, consulte bem-vindo ao Visual Studio IDE.

Neste primeiro tutorial, você aprenderá a:

  • criar um projeto Visual Studio que usa Windows Forms
  • Adicionar um elemento layout
  • Execute seu aplicativo.

Pré-requisitos

você precisa de Visual Studio para concluir este tutorial. visite a página de downloads do Visual Studio para obter uma versão gratuita.

criar seu projeto de Windows Forms

quando você cria um visualizador de imagens, a primeira etapa é criar um projeto de aplicativo Windows Forms.

  1. Abra o Visual Studio.

  2. na barra de menus, selecione arquivo > novo > Project.

    Captura de tela mostra a caixa de diálogo novo projeto.

  3. no lado esquerdo da caixa de diálogo novo Project , selecione Visual C# ou Visual Basic e, em seguida, selecione Windows área de trabalho.

  4. na lista modelos de projeto, selecione Windows Forms aplicativo (.NET Framework). Nomeie o novo formulário como PictureViewer e, em seguida, selecione OK.

    Observação

    Se o modelo Aplicativo do Windows Forms (.NET Framework) não for exibido, use o Instalador do Visual Studio para instalar a carga de trabalho Desenvolvimento para área de trabalho do .NET.

    captura de tela mostrar a carga de trabalho de desenvolvimento do NET desktop no Instalador do Visual Studio.

    Para obter mais informações, confira a página Instalar o Visual Studio.

  1. Abra o Visual Studio.

  2. Na janela iniciar, selecione criar um novo projeto.

    captura de tela mostra a opção criar um novo projeto na janela iniciar Visual Studio.

  3. na janela criar um novo projeto , procure Windows Forms. em seguida, selecione área de trabalho na lista tipo de Project .

  4. selecione o modelo aplicativo de Windows Forms (.NET Framework) para C# ou Visual Basic e, em seguida, selecione avançar.

    captura de tela mostra a caixa de diálogo criar um novo projeto com Windows Forms inseridas e as opções para Windows Forms aplicativo.

    Observação

    se você não vir o modelo de .NET Framework (Windows Forms App) , poderá instalá-lo na janela criar um novo projeto . Na mensagem não localizando o que você está procurando? , selecione o link instalar mais ferramentas e recursos .

    Captura de tela mostra o link instalar mais ferramentas e recursos de não encontrar o que você está procurando por mensagem na caixa de diálogo Criar novo projeto.

    em seguida, em Instalador do Visual Studio, selecione desenvolvimento de área de trabalho do .net.

    captura de tela mostra a carga de trabalho do .net Core no Instalador do Visual Studio.

    selecione modificar na Instalador do Visual Studio. Você pode ser solicitado a salvar seu trabalho. Em seguida, selecione continuar para instalar a carga de trabalho.

  5. Na janela configurar seu novo projeto , nomeie seu projeto como PictureViewer e, em seguida, selecione criar.

  1. Abra o Visual Studio.

  2. Na janela iniciar, selecione criar um novo projeto.

    captura de tela mostra a opção criar um novo projeto na janela iniciar Visual Studio.

  3. na janela criar um novo projeto , procure Windows Forms. em seguida, selecione área de trabalho na lista tipo de Project .

  4. selecione o modelo aplicativo de Windows Forms (.NET Framework) para C# ou Visual Basic e, em seguida, selecione avançar.

    captura de tela mostra a caixa de diálogo criar um novo projeto com Windows Forms inseridas e as opções para Windows Forms aplicativo.

    Observação

    se você não vir o modelo de .NET Framework (Windows Forms App) , poderá instalá-lo na janela criar um novo projeto . Na mensagem não localizando o que você está procurando? , selecione o link instalar mais ferramentas e recursos .

    Captura de tela mostra o link instalar mais ferramentas e recursos de não encontrar o que você está procurando por mensagem na caixa de diálogo Criar novo projeto.

    em seguida, em Instalador do Visual Studio, selecione desenvolvimento de área de trabalho do .net.

    captura de tela mostra a carga de trabalho do .net Core no Instalador do Visual Studio.

    selecione modificar na Instalador do Visual Studio. Você pode ser solicitado a salvar seu trabalho. Em seguida, selecione continuar para instalar a carga de trabalho.

  5. Na janela configurar seu novo projeto , nomeie seu projeto como PictureViewer e, em seguida, selecione criar.

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, Visual Studio exibe um formulário vazio no Designer de formulário de Windows.

Adicionar um elemento layout

Seu aplicativo de exibição de imagem contém uma caixa de imagem, uma CheckBox e quatro botões, que você adicionará no próximo tutorial. O elemento layout controla seu local 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. A guia lê Form1. cs [Design] para C# ou Form1. vb [design] para Visual Basic.

  2. Selecione em qualquer lugar do Form1.

  3. A janela Propriedades agora exibe as propriedades do formulário. A janela Propriedades geralmente está no canto inferior direito de Visual Studio. Esta seção controla várias propriedades, como a cor do 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 você não vir as propriedades, selecione Exibir > janela Propriedades.

  4. Localize a propriedade Text na janela Propriedades . Dependendo de como a lista estiver classificada, talvez seja necessário rolar para baixo. Insira o valor Picture Viewer e, em seguida, escolha Enter.

    Seu formulário agora tem o Visualizador de imagens de texto em sua barra de título.

    Observação

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

  5. Selecione o formulário novamente. Selecione a alça de arrastar para a parte inferior direita do formulário. O identificador é um pequeno quadrado branco no canto inferior direito do formulário.

    Captura de tela mostra a janela formulários com a alça de arrastar no canto inferior direito.

    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 tamanho foi alterada. Você também pode alterar o tamanho do formulário alterando a propriedade size .

  6. no lado esquerdo do Visual Studio IDE, selecione a guia caixa de ferramentas . Se você não o vir, selecione Exibir > caixa de ferramentas na barra de menus ou Ctrl + ALT + X.

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

    Captura de tela mostra o grupo contêineres na guia caixa de ferramentas.

  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 no formulário.

    Captura de tela mostra o formulário com o controle TableLayoutPanel adicionado.

    Observação

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

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

    Captura de tela mostra o janela Propriedades mostrando o controle TableLayoutPanel.

  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.

    Captura de tela mostra a janela Propriedades com preenchimento selecionado.

    O 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 permanecerá anexado e se redimensionará para caber.

  11. No formulário, selecione o 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.

    Captura de tela mostra tarefas de TableLayoutPanel.

  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 por cento. Certifique-se de que o botão porcentagem esteja selecionado.

  14. Selecione Coluna2 e defina-o como 85 por cento.

    Captura de tela mostra os estilos de coluna e linha TableLayoutPanel.

  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.

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

    Captura de tela mostra o formulário com TableLayoutPanel redimensionado.

Seu layout foi concluído.

Observação

Antes de executar o aplicativo, salve o 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 de aplicativo Windows Forms, você cria um programa que executa o. Neste estágio, seu aplicativo visualizador de imagens não faz muito. Por enquanto, ele exibe uma janela vazia que mostra o 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 .

    Visual Studio executa seu aplicativo. Uma janela com o título Picture Viewer é exibida.

    captura de tela mostra o Windows Forms aplicativo em execução.

    examine a barra de ferramentas Visual Studio IDE. 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 todos os erros.

    Captura de tela mostra a barra de ferramentas de depuração onde você pode parar o aplicativo.

  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, digite Shift + F5.
    • Selecione X no canto superior da janela do Visualizador de imagens .

    quando você executa seu aplicativo de dentro do Visual Studio IDE, ele é 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 aprender a adicionar controles ao seu programa visualizador de imagens.