Instruções passo a passo: explorar o IDE do Visual Studio com C# ou Visual Basic

Ao concluir esta explicação passo a passo, você estará familiarizado com várias ferramentas e caixas de diálogo e designers que poderá usar ao desenvolver aplicativos com o Visual Studio.Você criará um simples aplicativo no estilo "Hello, World", fará o design da interface do usuário, adicionará código e depurará erros enquanto aprende mais sobre como o trabalho no ambiente de desenvolvimento integrado (IDE).

Este tópico contém as seções a seguir:

Configurar o IDE

Criar um aplicativo simples

Depurar e testar o aplicativo

Observação

Esta explicação passo a passo se baseia na edição Professional do Visual Studio 2012.Sua cópia do Visual Studio poderá mostrar diferentes nomes ou localizações para alguns dos elementos da interface do usuário.A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos.Para obter mais informações sobre configurações, consulte Configurações de Visual Studio.

Configurar o IDE

Quando você inicia o Visual Studio pela primeira vez, deve escolher uma combinação de configurações que aplica um conjunto de personalizações predefinidas ao IDE.Cada combinação de configurações foi criada para facilitar o desenvolvimento de aplicativos para você.

Figura 1: Caixa de diálogo Escolher Configurações de Ambiente Padrão

Esta explicação passo a passo é escrita com Configurações Gerais de Desenvolvimento aplicado, que aplica a menor quantidade de personalização ao IDE.Você pode alterar a combinação de configurações usando o Assistente de Importação e Exportação de Configurações.Para obter mais informações, consulte Como: alterar configurações de seleção.

Depois de abrir o Visual Studio, você poderá identificar as janelas de ferramenta, os menus e barras de ferramentas e o espaço da janela principal.As janelas de ferramenta estão encaixadas nos lados esquerdo e direito da janela do aplicativo, com Início Rápido, a barra de menus e a barra de ferramentas padrão na parte superior.No centro da janela do aplicativo está a Página Inicial.Quando uma solução ou um projeto são carregados, os editores e designers aparecem neste espaço.Quando você desenvolver um aplicativo, passará a maior parte do seu tempo nesta área central.

Figura 2: IDE do Visual Studio

Você pode fazer personalizações adicionais no Visual Studio, como alterar a fonte e o tamanho do texto no editor ou o tema de cores do IDE, usando a caixa de diálogo Opções.Dependendo da combinação de configurações que você tiver aplicado, alguns itens na caixa de diálogo poderão não aparecer automaticamente.Você pode garantir que todas as opções possíveis apareçam escolhendo a caixa de seleção Mostrar todas as configurações.

Figura 3: Caixa de diálogo Opções

Nesse exemplo, você irá alterar o tema de cor do IDE de iluminado para escuro.

Para alterar o tema de cores do IDE

1. Abra a caixa de diálogo Opções.

   

2. Altere Tema de cores para Escuro e então clique em OK.

   

As cores no Visual Studio devem corresponder à seguinte imagem:

O tema de cor usado no restante desta explicação passo a passo no tela de luz.Para obter mais informações sobre personalização do IDE, consulte Personalizando o ambiente de desenvolvimento.

Criar um aplicativo simples

Criar o projeto

Quando você cria um aplicativo no Visual Studio, primeiro cria um projeto e uma solução.Para este exemplo, você criará uma solução do Windows Presentation Foundation.

Para criar o projeto WPF

1. Crie um novo projeto.Na barra de menu, escolha Arquivo, Novo, Projeto.

   

   Você também pode digitar Novo Projeto na caixa Início Rápido fazer a mesma coisa.

   

2. Escolha Visual Basic ou o modelo Aplicativo WPF do Visual C# e então nomeie o projeto como HelloWPFApp.

   

   OU

   

O projeto e a solução de HelloWPFApp são criados e os arquivos diferentes aparecem no Gerenciador de Soluções.O WPF Designer mostra um modo de exibição de design e um modo de exibição XAML de MainWindow.xaml em modo divisão.(Para obter mais informações, consulte WPF Designer para desenvolvedores do Windows Forms).Os seguintes itens aparecem no Gerenciador de Soluções:

Figura 5: Itens de projeto

Depois de criar o projeto, você poderá personalizá-lo.Usando a janela Propriedades, você pode exibir e alterar opções para itens de projeto, controles e outros itens em um aplicativo.Usando as propriedades e as páginas de propriedades do projeto, você pode exibir e alterar opções para projetos e soluções.

Para alterar o nome de MainWindow.xaml

1. No procedimento a seguir, você dará a MainWindow um nome mais específico.No Gerenciador de Soluções, selecione MainWindow.xaml.Você deve ver a janela Propriedades para este arquivo sob a janela .Se você não vir a janela Propriedades, selecione MainWindow.xaml no Gerenciador de Soluções, abra o menu de atalho (clicando com o botão direito do mouse) e selecione Propriedades.Altere a propriedade Nome do arquivo para Greetings.xaml.

   

   O Gerenciador de Soluções mostra que o nome do arquivo agora é Greetings.xaml e que o nome MainWindow.xaml.vb ou MainWindow.xaml.cs é agora Greetings.xaml.vb ou Greetings.xaml.cs.

2. No Gerenciador de Soluções, abra Greetings.xaml no modo Designer e selecione a barra de título da janela.

3. Na janela Propriedades, altere o valor da propriedade Título de Greetings.

   Cuidado
   Essa alteração causa um erro que você aprenderá a depurar e corrigir em uma etapa posterior.

A barra de título de MainWindow.xaml agora exibe Saudações.

Criar a interface do usuário (IU)

Adicionaremos três tipos de controles a este aplicativo: um controle TextBlock, dois controles RadioButton e um controle Button.

Para adicionar um controle TextBlock

1. Abra a janela Caixa de Ferramentas.Você deve encontrá-la no lado esquerdo da janela Designer.Você também pode abri-lo no menu Exibir ou digitando CTRL+ALT+X.

2. Na Caixa de Ferramentas, procure pelo controle TextBlock.

   

3. Adicione um controle TextBlock à superfície de design e centralize o controle próximo à parte superior da janela.

Sua janela deve se parecer com a ilustração a seguir:

Figura 7: Janela Saudações com controle TextBlock

A marcação XAML deve ter uma aparência semelhante a esta:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Para personalizar o texto no bloco de texto

1. No modo de exibição XAML, localize a marcação para TextBlock e altere o atributo Texto: Text=”Select a message option and then choose the Display button.”

2. Se o TextBlock não expandir para caber no modo Design, amplie o controle TextBlock de modo que ele exiba todo o texto.

3. Salve as alterações.

Em seguida, você adicionará dois controles RadioButton ao formulário.

Para adicionar botões de opção

1. Na Caixa de Ferramentas, procure pelo controle RadioButton.

   

2. Adicione dois controles RadioButton à superfície de design e mova-os de forma que apareçam lado a lado sob o controle TextBlock.

   A sua janela deve se parecer com esta:

   Figura 8: RadioButtons na janela Saudações.

   

3. Na janela Propriedades para o controle RadioButton esquerdo, altere a propriedade Nome (a propriedade na parte superior da janela Propriedades) para RadioButton1.

4. Na janela Propriedades para o controle RadioButton direito, altere a propriedade Nome para RadioButton2 e então salve suas alterações.

Agora você pode adicionar o texto exibido para cada controle RadioButton.O procedimento a seguir atualiza a propriedade Conteúdo para um controle RadioButton.

Para adicionar o texto exibido para cada botão de opção

1. Na superfície de design, abra o menu de atalho para RadioButton1, escolha Editar Texto e então digite Hello.

2. Abra o menu de atalho para RadioButton2, escolha Editar Texto e então digite Goodbye.

O elemento final da interface do usuário que você adicionará é um controle Botão.

Para adicionar o controle de botão

1. Na Caixa de Ferramentas, procure pelo controle Botão e então o adicione à superfície de design, nos controles RadioButton.

2. No modo de exibição XAML, altere o valor de Conteúdo para o controle Botão de Content=”Button” para Content=”Display” e então salve as alterações.

   A marcação deve se parecer com o exemplo a seguir: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Sua janela deve se parecer com a ilustração a seguir.

Figura 9: Interface do usuário de Saudações Finais

Adicionar código ao botão Exibir

Quando o aplicativo é executado, uma caixa de mensagem aparece depois que um usuário escolhe pela primeira vez um botão de opção e clica no botão Exibir.Uma caixa de mensagem será exibida para Hello e outra para Goodbye.Para criar esse comportamento, você adicionará código ao evento Button_Click em Greetings.xaml.vb ou em Greetings.xaml.cs.

Adicionar código a caixas de mensagem de exibição

1. Na superfície de design, clique duas vezes no botão Exibir.

   Greetings.xaml.vb ou Greetings.xaml.cs é aberto, com o cursor no evento Button_Click.Você também pode adicionar um manipulador de eventos como a seguir:

   Para o Visual Basic, o manipulador de eventos deve ser assim:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   Para o Visual C#, o manipulador de eventos deve ser assim:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. Para o Visual Basic, insira o código a seguir:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Para o Visual C#, insira o código a seguir:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Salve o aplicativo.

Depurar e testar o aplicativo

Em seguida, você depurará o aplicativo para procurar erros e testar se ambas as caixas de mensagem são exibidas corretamente.Para obter mais informações, consulte Criando um aplicativo WPF (WPF) e Depuração do WPF.

Localizar e corrigir erros

Nesta etapa, você encontrará o erro que nós causamos anteriormente alterando o nome do arquivo XAML da janela principal.

Para iniciar a depuração e localizar o erro

1. Inicie o depurador selecionando Depurar e então em Iniciar Depuração.

   

   Uma caixa de diálogo aparece, indicando que um IOException ocorreu: não é possível localizar o recurso 'mainwindow.xaml'.

2. Escolha o botão OK e então pare o depurador.

   

Nós renomeamos Mainwindow.xaml a Greetings.xaml no início desta explicação, mas a solução ainda está apontando para Mainwindow.xaml como o URI de inicialização para o aplicativo, portanto o projeto não pode iniciar.

Para especificar Greetings.xaml como o URI de inicialização

1. No Gerenciador de Soluções, abra o arquivo App.xaml (no projeto C#) ou o arquivo Application.xaml (no projeto Visual Basic) no modo XAML (não pode ser aberto no modo Design).

2. Altere StartupUri="MainWindow.xaml" para StartupUri="Greetings.xaml" e então salve as alterações.

Inicie o depurador novamente.Você deve ver a janela Saudações do aplicativo.

Para depurar com pontos de interrupção

Ao adicionar alguns pontos de interrupção, você pode testar o código durante a depuração.Você pode adicionar pontos de interrupção escolhendo Depurar, Alternar Ponto de Interrupção na barra de menus ou clicando na margem esquerda do editor ao lado da linha de código onde você deseja que a quebra ocorra.

Para adicionar pontos de interrupção

1. Abra Greetings.xaml.vb ou Greetings.xaml.cs e selecione a linha a seguir: MessageBox.Show("Hello.")

2. Adicione um ponto de interrupção do menu ao selecionar Depurar e então Alternar Ponto de Interrupção.

   

   Um círculo vermelho aparece ao lado da linha de código na margem da extrema esquerda da janela do editor.

3. Selecione a linha a seguir: MessageBox.Show("Goodbye.").

4. Escolha a tecla F9 para adicionar um ponto de interrupção e então escolha a tecla F5 para iniciar a depuração.

5. Na janela Saudações, escolha o botão de opção Hello e então escolha o botão Exibir.

   A linha MessageBox.Show("Hello.") é realçada em amarelo.Na parte inferior do IDE, as janelas Automáticos, Locais e Inspeção são encaixadas no lado esquerdo e as janelas Pilha de Chamadas, Pontos de Interrupção, Comando, Imediato e Saída são encaixadas no lado direito.

6. Na barra de menu, escolha Depurar, Depuração Circular.

   O aplicativo retomará a execução e uma caixa de mensagem com a palavra "Hello" aparecerá.

7. Escolha o botão OK na caixa de mensagem para fechá-la.

8. Na janela Saudações, escolha o botão de opção Goodbye e então escolha o botão Exibir.

   A linha MessageBox.Show("Goodbye.") é realçada em amarelo.

9. Escolha a tecla F5 para continuar a depuração.Quando a caixa de mensagem aparecer, escolha o botão OK na caixa de mensagem para fechá-la.

10. Escolha as teclas SHIFT + F5 para parar a depuração.

11. Na barra de menu, escolha Depurar, Desabilitar Todos os Pontos de Interrupção.

Criar uma versão de lançamento do aplicativo

Agora que você selecionou que tudo funciona, poderá preparar uma compilação de lançamento do aplicativo.

Para limpar os arquivos de solução e criar uma versão de lançamento

1. Selecione Compilar e então Limpar solução para excluir arquivos intermediários e arquivos de saída criados durante compilações anteriores.

   

2. Alterar a configuração de compilação para HelloWPFApp de Depurar para Lançamento.

   

3. Crie a solução.

   

Parabéns por concluir esta explicação passo a passo!Se quiser explorar mais exemplos, consulte Amostras do Visual Studio.

Consulte também

Conceitos

Novidades no Visual Studio 2012

Guia de Introdução ao Visual Studio

Dicas de produtividade para o Visual Studio