Compartilhar via


Etapa 2: criar uma interface de usuário

Agora é hora de começar a criar o navegador da Web.Você usará Visual Basic Express Edition para criar a interface do usuário (a parte visível com a qual os usuários interagem) adicionando controles a partir de ToolBox para o formulário.

O ToolBox está no lado esquerdo de Visual Studio e consiste em várias guias como Data, Components e All Windows Forms.Dentro de cada guia existe um conjunto de entradas que representam controles ou componentes que você pode adicionar ao seu aplicativo.Por exemplo, a guia All Windows Forms possui entradas chamadas TextBox, Button e CheckBox que representam os controles que você pode adicionar ao seu aplicativo, arrastando-os para o formulário.Não se preocupe muito sobre o tamanho dos controles, você aprenderá a personalizar a aparência do seu aplicativo na próxima lição.

Para uma demonstração de vídeo, consulte Vídeo How to: Criando seu primeiro do programa em Visual Basic.

Para adicionar controles a seu aplicativo

  1. Clique no painel ToolBox.

    A Toolbox abre.

    Observação:

    O Caixa de ferramentas é mais fácil de usar, se você deixar a janela em aberto.Você pode fazer isso clicando no ícone Auto Hide, que parece um pino.

  2. Clique na guia All Windows Forms da Toolbox e, em seguida, arraste um controle Panel para o canto superior esquerdo do formulário.

    Observação:

    Se você tiver dificuldade para localizar o controle correto, direito- clicar o Caixa de ferramentas e, em seguida, selecionar Classificar itens em ordem alfabética.

  3. Na mesma guia, arraste um controle TextBox e posicione-o na parte superior de Panel.

    Observação:

    Você pode reposicionar controles usando uma operação de do tipo arrastar e soltar.Você também pode redimensionar controles, clicando e arrastando a borda ou canto do controle.

  4. Na mesma guia, arraste um controle Button e posicione-o na parte superior de Panel, à direita do controle TextBox.

  5. Finalmente, da guia All Windows Forms, selecione um controle WebBrowser e posicione-o em Panel.

    Observação:

    Se a WebBrowser controle não cabe no formulário, você pode redimensionar o formulário arrastando a borda ou canto do formulário.

    Observação:

    Se você mantido o Caixa de ferramentas janela aberta, você pode fechá-la agora para ter mais espaço de trabalho.Você pode fazer isso clicando no ícone Auto Hide novamente.

Visão aprofundada

Você apenas adicionou quatro controles ao formulário.Controles contêm o código que define a aparência de controles e quais tarefas eles podem executar.

Veja, por exemplo, o controle Button — a maioria dos programas possuem um botão "OK" ou um botão "Exit".Embora você possa criar seu próprio código para desenhar um botão na tela, alterar sua aparência quando ele estiver pressionado e executar alguma tarefa quando ele for clicado, fazer isso para cada programa iria rapidamente se tornar tedioso.O controle Button já contém o código que é necessário para executar essas ações.Isso evita que você tenha muito trabalho desnecessário.

Como você pode ver, a ToolBox contém muitos controles, e cada controle tem uma finalidade exclusiva.Controles Panel podem ser usados para armazenar outros controles, como aqueles que você acabou de adicionar.Controles Button são normalmente usados para executar tarefas quando o usuário clicá-los, por exemplo, fechar o programa.Controles TextBox são usados para inserir texto em uma tela por meio do teclado.Um controle WebBrowser fornece recursos internos de navegação da Web semelhantes ao Internet Explorer — você definitivamente não deseja fazer todo o código para isso!

Em lições futuras você aprenderá como personalizar a aparência destes e de muitos outros controles e como escrever código que define seus comportamentos.Além de usar os controles de ToolBox, você também pode criar seus próprios controles conhecidos como controles de usuário — eles também são abordados na lição futura.

Próximas etapas

Você adicionou todos os controles necessários para seu aplicativo.Provavelmente pode parecer que ainda não foi concluído — porque foi!Na próxima lição, você usará a janela Properties para definir as propriedades que irão controlar a aparência e comportamento do seu aplicativo.

Próxima Lesson: Etapa 3: Personalizar a aparência e comportamento

Consulte também

Tarefas

Etapa 1: Criar um projeto no Visual Basic 

Outros recursos

Criando seu primeiro programa Visual Basic

Controles para usar no Windows Forms