Instruções passo a passo: criar um aplicativo simples com o Visual C# ou o Visual Basic

Ao concluir este passo a passo, você estará familiarizado com vários designers, ferramentas e caixas de diálogo que poderão ser usados no desenvolvimento de aplicativos com o Visual Studio.Você vai criar um aplicativo simples no estilo "Olá, Mundo", criar uma interface de usuário, adicionar código e depurar erros enquanto aprende mais sobre como trabalhar no IDE (ambiente de desenvolvimento integrado).

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

Configurar o IDE

Criar um aplicativo simples

Depurar e testar o aplicativo

Observação

Este passo a passo se baseia no Visual Studio Professional, que oferece o modelo de aplicativo WPF no qual você criará o projeto.O Visual Studio Express para Windows Desktop também oferece esse modelo, mas o Visual Studio Express para Windows e Visual Studio Express for Web, não.Para obter informações introdutórias sobre como usar o Visual Studio Express para Windows, consulte o Developer Center para aplicativos da Windows Store.Para obter informações introdutórias sobre como usar o Visual Studio Express para Web, consulte Introdução ao ASP.NET.Além disso, sua edição do Visual Studio e as configurações que você usa determinam os nomes e os locais de alguns elementos da interface do usuário.Consulte Personalizando configurações de desenvolvimento no Visual Studio.

Configurar o IDE

Quando você iniciar o Visual Studio pela primeira vez, o Visual Studio solicita que você entrar com um serviço conta MSA (Microsoft), entrar no Visual Studio.Você não precisa entrar e pode fazer isso posteriormente.

Sobre o lançamento do Visual Studio, em seguida escolha uma combinação de configurações que aplica um conjunto de personalizações predefinidas ao IDE.Cada combinação de configurações foi desenvolvida para facilitar o desenvolvimento de aplicativos.

Este passo a passo supõem que você aplicou configurações gerais de desenvolvimento, que se aplica a menor quantidade de personalização ao IDE.Se você já tiver escolhido o c# ou Visual Basic (ambas são boas opções), você não precisa alterar suas configurações.Se você quiser alterar suas configurações, você pode usar o Import and Export Settings Wizard.Consulte Personalizando configurações de desenvolvimento no Visual Studio.

Depois de abrir o Visual Studio, você poderá identificar as janelas de ferramenta, os menus e as barras de ferramentas, bem como o espaço da janela principal.As janelas de ferramentas 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 você carrega uma solução ou projeto, editores e designers aparecem no espaço onde o Start Page é.Ao desenvolver um aplicativo, você passará a maior parte do seu tempo nessa á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 da cor 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.É possível 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ê vai alterar o tema da cor do IDE, de claro para escuro.Você poderá pular para criar um projeto se desejar.

Para alterar o tema da cor do IDE

1. Abra o opções caixa de diálogo, escolhendo o ferramentas menu na parte superior e, em seguida, o opções... item.

   

2. Altere Tema da cor para Escuro e clique em OK.

   

As cores no Visual Studio devem corresponder à seguinte imagem:

O tema de cor usado para imagens no restante deste passo a passo é o tema no claro.Para obter mais informações sobre como personalizar o IDE, consulte Personalizando configurações de desenvolvimento no Visual Studio.

Criar um aplicativo simples

Criar o projeto

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

Para criar o projeto WPF

1. Crie um novo projeto.Na barra de menus, escolha arquivo, novo, projeto....

   

   Você também pode digitar Novo Projeto na caixa Início Rápido para obter o mesmo resultado.

   

2. Escolha do Visual Basic ou o modelo de aplicativo do Visual c# WPF escolhendo no painel esquerdo instalado, modelos, Visual C#, Windows, por exemplo, em seguida, escolhendo o aplicativo do WPF no painel central.Nomeie o projeto HelloWPFApp na parte inferior da caixa de diálogo Novo projeto.

   

   OU

   

O Visual Studio cria o projeto HelloWPFApp e a solução e o Solution Explorer mostra vários arquivos.O WPF Designer mostra um modo de exibição de design e um modo de exibição XAML de MainWindow. XAML em um modo divisão.Você pode deslizar o divisor para mostrar mais ou menos de dois modos de exibição.Você pode optar por ver apenas a exibição visual ou apenas o modo de exibição XAML.(Para obter mais informações, consulte WPF Designer for Windows Forms Developers.)Os seguintes itens aparecem no Gerenciador de Soluções:

Figura 5: Itens do projeto

Depois de criar o projeto, você poderá personalizá-lo.Usando o propriedades janela (encontrados no exibição menu), você pode exibir e alterar as opções de 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 o propriedades janela, mas se você não fizer isso, escolha o exibição menu e o janela propriedade item.Altere a propriedade Nome do arquivo para Greetings.xaml.

   

   Gerenciador de soluções mostra que o nome do arquivo agora é Greetings. XAML e, se você expandir o nó de MainWindow. XAML (por colocar o foco no nó e pressionando a tecla de seta para a direita), você verá o nome MainWindow.xaml.vb ou MainWindow.xaml.cs agora é Greetings.xaml.vb ou Greetings.xaml.cs.Esse arquivo de código está aninhado sob o nó do arquivo. XAML para mostrar a que eles estão intimamente relacionados uns aos outros.

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

2. Em Solution Explorer, abra Greetings. XAML no modo de exibição Designer (pressionando a tecla Enter enquanto o nó tem foco) e selecione a barra de título da janela com o mouse.

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

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

Criar a interface do usuário

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

Para adicionar um controle TextBlock

1. Abra o Toolbox janela escolhendo o exibição menu e o Toolbox item.

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

   

3. Adicione um controle TextBlock à superfície de design, escolhendo o item de TextBlock e arrastando-o para a janela na superfície de design.Centralize o controle na 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 ajustar o modo de exibição de Design, aumente o controle TextBlock (usando as captura alças nas bordas) para que ele exiba todo o texto.

3. Salve suas alterações pressionando Ctrl-s ou usando o arquivo item de menu.

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 no design da superfície escolhendo o item RadioButton e arrastando-a janela na superfície de design duas vezes e mover os botões (selecionando-as e usando as teclas de direção) para que os botões são exibidos 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 do controle RadioButton esquerdo, altere a propriedade Nome (a propriedade na parte superior da janela Propriedades) para RadioButton1.Verifique se que você selecionou o RadioButton e não o plano de fundo grade no formulário; o campo tipo de janela de propriedade no campo nome deve dizer RadioButton.

4. No propriedades janela controle RadioButton direito, altere o nome propriedade RadioButton2e, em seguida, salve as alterações pressionando Ctrl-s ou usando o arquivo item de menu.Verifique se que você selecionou o RadioButton antes de alterar e salvar.

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

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

1. Na superfície de design, abra o menu de atalho de RadioButton1 pressionando o botão direito do mouse enquanto selecionando o RadioButton1, escolha editar textoe, em seguida, digite Hello.

2. Abra o menu de atalho de RadioButton2, pressionando o botão direito do mouse enquanto seleciona RadioButton2, escolha editar textoe, em seguida, 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. No Toolbox, procure o botão controlar e adicioná-lo à superfície de design nos controles RadioButton selecionando o botão e arrastando-o para o formulário no modo design.

2. No modo de exibição XAML, altere o valor de conteúdo para o controle de botão de Content=”Button” para Content=”Display”e, em seguida, salve as alterações (Ctrl-s ou use o arquivo menu).

   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 final de Saudações

Adicionar código ao botão Exibir

Quando esse aplicativo é executado, uma caixa de mensagem aparece depois que um usuário escolhe pela primeira vez um botão de opção e escolhe o botão Exibição.Uma caixa de mensagem será exibida para Olá e outra para Até logo.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 Exibição.

   Greetings.xaml.vb ou Greetings.xaml.cs é aberto, com o cursor no evento Button_Click.Você também pode adicionar um manipulador de eventos da seguinte maneira (se o código colado tiver um rabisco vermelho em todos os nomes, você provavelmente não selecionar os controles RadioButton na superfície de design e renomeá-las):

   No Visual Basic, o manipulador de eventos deve se parecer com este:

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

   No Visual C#, o manipulador de eventos deve se parecer com este:

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

2. No 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
   

   No 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.As instruções a seguir descrevem como criar e iniciar o depurador, mas posteriormente você pode ler Compilando um aplicativo WPF (WPF) e Depurando WPF para obter mais informações.

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 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 pare o depurador.

   

Renomeamos MainWindow. XAML para Greetings. XAML no início deste passo a passo, mas o código ainda se refere a MainWindow. XAML como o URI de inicialização para o aplicativo, para que o projeto não pode ser iniciado.

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

1. Em Solution Explorer, abra o arquivo App. XAML (no projeto do c#) ou o arquivo Application XAML (no projeto do Visual Basic) no modo de exibição XAML (ele não pode ser aberto no modo Design) selecionando o arquivo e pressionando Enter ou clicando nele duas vezes.

2. Alterar StartupUri="MainWindow.xaml" para StartupUri="Greetings.xaml"e, em seguida, salve as alterações com Ctrl-s.

Inicie o depurador novamente (pressione F5).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 no menu principal, em seguida, alternar ponto de interrupção ou clicando na margem esquerda do editor ao lado da linha do 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 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. Pressione a tecla F9 para adicionar um ponto de interrupção e, em seguida, pressione a tecla F5 para iniciar a depuração.

5. Na janela Saudações, escolha o botão de opção Olá e escolha o botão Exibição.

   A linha MessageBox.Show("Hello.") é realçada em amarelo.Na parte inferior do IDE, Autos, locais e inspeção janelas 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 menus, escolha Depurar, Depuração Circular.

   O aplicativo retomará a execução e uma caixa de mensagem com a palavra "Olá" será exibida.

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 Até logo e escolha o botão Exibição.

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

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

10. Pressione SHIFT + F5 chaves (pressione shift primeiro e, ao mesmo tempo, mantendo-a pressionada, pressione F5) para parar a depuração.

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

Criar uma versão de lançamento do aplicativo

Agora que você verificou que tudo está funcionando, já pode preparar uma versão de lançamento do aplicativo.

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

1. No menu principal, selecione Build, em seguida, limpar solução para excluir arquivos intermediários e arquivos de saída que foram criados durante compilações anteriores.Isso não é necessário, mas ele limpa as saídas de compilação de depuração.

   

2. Alterar a configuração de compilação de HelloWPFApp, de depurar para versão usando o controle de lista suspensa na barra de ferramentas (ela diz "Depuração" no momento).

   

3. Criar a solução escolhendo criar, em seguida, Build Solution ou pressione a tecla F6.

   

Parabéns por concluir este passo a passo!Você pode encontrar o .exe criado no diretório do projeto e solução (... \HelloWPFApp\HelloWPFApp\bin\Release\).Se desejar explorar mais exemplos, consulte Amostras do Visual Studio.

Consulte também

Conceitos

Novidades no Visual Studio 2013

Guia de Introdução ao Visual Studio

Dicas de produtividade para o Visual Studio