Tutorial: Criar um aplicativo WPF com C#

Neste tutorial, você se familiariza com muitas das ferramentas, caixas de diálogo e designers que você pode usar ao desenvolver aplicativos com o Visual Studio. Você cria um aplicativo "Olá, Mundo", projeta a interface do usuário, adiciona código e depura erros. Ao mesmo tempo, saiba mais sobre como trabalhar no ambiente de desenvolvimento integrado do Visual Studio (IDE).

• Configurar a IDE
• Criar um projeto
• Projetar a interface do usuário
• Depurar e testar o aplicativo

Pré-requisitos

• Se não tiver o Visual Studio, aceda à página de downloads do Visual Studio para o instalar gratuitamente.
• Verifique se a workload de desenvolvimento de desktop .NET está instalada. Você pode verificar essa configuração no Visual Studio Installer.
• Você pode usar o .NET Framework ou o .NET Core para este tutorial. O .NET Core é a estrutura mais nova e moderna. O .NET Core requer o Visual Studio 2019 versão 16.3 ou posterior.

O que é o Windows Presentation Foundation?

Windows Presentation Foundation (WPF) é uma estrutura de interface do usuário (UI) que cria aplicativos cliente de área de trabalho. A plataforma de desenvolvimento WPF suporta um amplo conjunto de recursos de desenvolvimento de aplicativos, incluindo um modelo de aplicativo, recursos, controles, gráficos, layout, vinculação de dados, documentos e segurança.

O WPF faz parte do .NET. Se você criou anteriormente aplicativos com .NET usando ASP.NET ou Windows Forms, a experiência de programação deve ser familiar. O WPF usa o Extensible Application Markup Language (XAML) para fornecer um modelo declarativo para programação de aplicativos. Para obter mais informações, consulte Desktop Guide (WPF .NET).

Configurar o IDE

Quando você inicia o Visual Studio, a janela Iniciar é aberta. Selecione Continuar sem código para abrir o ambiente de desenvolvimento. Você vê as janelas de ferramentas, os menus e barras de ferramentas e o espaço da janela principal. As janelas de ferramentas estão encaixadas nas laterais da janela do aplicativo. A caixa de pesquisa, a barra de menus e a barra de ferramentas padrão estão localizadas na parte superior. Quando você carrega uma solução ou projeto, editores e designers aparecem no espaço central da janela do aplicativo. Quando você desenvolve um aplicativo, você passa a maior parte do seu tempo nesta área central.

Criar o projeto

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

1. Abra o Visual Studio.

2. Na janela Iniciar, escolha Criar um novo projeto.

   

3. No ecrã Criar um novo projeto, procure WPF. Escolha WPF Applicatione, em seguida, escolha Next.

   

4. Na próxima tela, dê um nome ao projeto, HelloWPFAppe escolha Next.

   

5. Na janela Informações adicionais, verifique se .NET 8.0 está selecionado para sua estrutura de destino. Em seguida, escolha Criar.

   

O Visual Studio cria o projeto e a solução HelloWPFApp. Gerenciador de Soluções mostra os vários arquivos. O WPF Designer mostra uma vista de design e uma vista XAML de MainWindow.xaml numa vista dividida. Você pode deslizar o divisor para mostrar mais ou menos de qualquer um dos modos de exibição. Você pode optar por ver apenas o modo de exibição visual ou somente o modo de exibição XAML.

Observação

Para obter mais informações sobre a Extensible Application Markup Language (XAML), consulte a visão geral XAML para WPF.

Depois de criar o projeto, você pode personalizá-lo. Para fazer isso, escolha Janela Propriedades no menu Vista ou pressione F4. Em seguida, você pode exibir e alterar opções para itens de projeto, controles e outros itens em um aplicativo.

Projetar a interface do usuário

Se o designer não estiver aberto, selecione MainWindow.xaml e selecione Shift+F7 para abrir o designer.

Neste tutorial, você adiciona três tipos de controles a este aplicativo: um controle TextBlock, dois controles RadioButton e um controle Button.

Adicionar um controle TextBlock

Siga estas etapas para adicionar um TextBlock.

1. Selecione Ctrl+Q para ativar a caixa de pesquisa e digite Caixa de Ferramentas. Escolha Exibir > Caixa de Ferramentas na lista de resultados.

2. Na Caixa de Ferramentas , expanda o nó Common WPF Controls para ver o controlo TextBlock.

   

3. Adicione um controle TextBlock à superfície de design. Escolha o item TextBlock e arraste-o para a janela na área de design. Centralize o controle perto da parte superior da janela. Você pode usar as diretrizes para centralizar o controle.

   Sua janela deve ser semelhante a esta imagem:

   

   A marcação XAML deve ser semelhante a este exemplo:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Personalizar o texto no bloco de texto

Você pode alterar o texto que o TextBlock exibe.

1. Na vista XAML, localize o markup para TextBlock e altere o atributo Text de TextBlock para Select a message option and then choose the Display button..

   A marcação XAML deve ser semelhante a este exemplo:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Centralize o TextBlock novamente e salve as alterações selecionando Ctrl+S ou usando o item de menu Arquivo .

Adicionar botões de opção

Em seguida, adicione dois controles RadioButton ao formulário.

1. Na Caixa de Ferramentas, localize o controlo RadioButton.

   

2. Adicione dois controlos RadioButton na superfície de design. Escolha o item RadioButton e arraste-o para a janela na superfície de desenho. Mova os botões selecionando-os e usando as teclas de seta. Organize-os de modo que os botões apareçam lado a lado sob o controle TextBlock. Você pode usar as diretrizes para alinhar os controles.

   Sua janela deve ter esta aparência:

   

3. Na janela Properties para o controlador RadioButton esquerdo, na parte superior, altere a propriedade Name para HelloButton.

   

4. Na janela Properties para o controlo RadioButton do lado direito, altere a propriedade Name para GoodbyeButtone, em seguida, salve as alterações.

Adicionar texto de exibição para cada botão rádio

Em seguida, adicione texto de exibição para cada controle RadioButton. O procedimento a seguir atualiza a propriedade Content para um controle RadioButton.

• Atualize o atributo Content para os dois botões de opção HelloButton e GoodbyeButton para "Hello" e "Goodbye" no XAML. A marcação XAML agora deve ser semelhante a este exemplo:

  <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
       <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
       <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
  </Grid>
  

Definir um botão de opção para ser verificado por padrão

Nesta etapa, defina o HelloButton para ser selecionado por padrão para que um dos dois botões de rádio seja sempre selecionado.

1. No modo de exibição XAML, localize a marcação para HelloButton.

2. Adicione um atributo IsChecked e defina-o como True. Especificamente, adicione IsChecked="True".

   A marcação XAML agora deve ser semelhante a este exemplo:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Adicionar o controle de botão

O elemento final da interface do utilizador que adiciona é um controlo de botão .

1. Na Caixa de Ferramentas, localize o controle do Botão. Adicione-o à superfície de design sob os controles RadioButton arrastando-o para o formulário na visualização de design. As diretrizes podem ajudá-lo a centralizar o controle.

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

   Sua janela deve ser semelhante a esta captura de tela:

   

   A marcação XAML agora deve ser semelhante a este exemplo:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Adicionar código ao botão de exibição

Quando esta aplicação é executada, uma caixa de mensagem aparece depois de um utilizador escolher um botão de rádio e, em seguida, escolher o botão Exibir. Uma caixa de mensagem aparece para Olá e outra aparece para Adeus. Para criar esse comportamento, você adiciona código ao evento Button_Click no MainWindow.xaml.cs.

1. Na superfície de desenho, faça duplo clique no botão Exibir.

   MainWindow.xaml.cs é aberto, com o cursor no evento Button_Click.

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

   Quando você clica duas vezes no botão Exibir, Click="Button_Click" é adicionado ao XAML.

   A marcação XAML agora deve ser semelhante a este exemplo:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Dentro das chaves Button_Click, adicione o seguinte código:

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

3. Salve o aplicativo.

Depurar e testar o aplicativo

Em seguida, depure o aplicativo para procurar erros e testar se ambas as caixas de mensagem aparecem corretamente. As instruções a seguir informam como criar e iniciar o depurador. Para obter mais informações, consulte Build a WPF application (WPF) e Debug WPF.

Alterar o nome de MainWindow.xaml

Dê ao MainWindow um nome mais específico. No Explorador de Soluções , clique com o botão direito sobre MainWindow.xaml e escolha Renomear. Renomeie o arquivo para Greetings.xaml. Neste exemplo, essa alteração cria um erro usado posteriormente para demonstrar a resolução de erros.

Localizar e corrigir erros

Nesta etapa, você encontrará o erro que foi causado anteriormente pela alteração do nome do arquivo MainWindow.xaml.

Comece a depuração e encontre o erro

1. Inicie o depurador selecionando F5 ou selecionando Depurare, em seguida, Iniciar Depuração.

   Uma janela Modo de Interrupção é exibida, e a janela de saída indica que foi gerada uma IOException: Não é possível localizar o recurso mainwindow.xaml.

   

2. Interrompa o depurador selecionando Debug>Stop Debugging.

Você renomeou MainWindow.xaml para Greetings.xaml, mas o código ainda se refere a MainWindow.xaml como o URI de inicialização do aplicativo, portanto, o projeto não pode ser iniciado.

Especifique Greetings.xaml como o URI de inicialização

1. No Gerenciador de Soluções , abra o arquivo App.xaml.

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

Como etapa opcional, evita confusão alterar o título da janela do aplicativo para corresponder a esse novo nome.

1. No Gerenciador de Soluções , abra o arquivo de Greetings.xaml que você acabou de renomear.

2. Altere o valor da propriedade Window.Title de Title="MainWindow" para Title="Greetings"e salve as alterações.

Inicie o depurador novamente (pressione F5). Agora você deve ver a janela Saudações do seu aplicativo.

Para parar a depuração, feche a janela da aplicação

Depurar com pontos de interrupção

Você pode testar o código durante a depuração adicionando alguns pontos de interrupção. Você pode adicionar pontos de interrupção escolhendo Depurar>Alternar ponto de interrupção, clicando na margem esquerda do editor ao lado da linha de código onde deseja que a quebra ocorra ou pressionando F9.

Adicionar pontos de interrupção

1. Abra Greetings.xaml.cse selecione esta linha: MessageBox.Show("Hello.")

2. Adicione um ponto de interrupção no menu selecionando Depurare, em seguida, Alternar ponto de interrupção.

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

3. Selecione esta linha: MessageBox.Show("Goodbye.").

4. Pressione a tecla F9 para adicionar um ponto de interrupção e selecione F5 para iniciar a depuração.

5. Na janela Saudações, escolha o rádio botão Olá e, em seguida, escolha o botão Exibir.

   A linha MessageBox.Show("Hello.") está realçada a amarelo. Na parte inferior do IDE, as janelas Autos, Locais e Watch estão encaixadas juntas no lado esquerdo. As janelas Call Stack, Breakpoints, Exception Settings, Command, Immediatee Output estão encaixadas no lado direito.

   

6. Na barra de menus, escolha Depurar>Sair.

   O aplicativo retoma a execução e uma caixa de mensagem com a palavra "Olá" aparece.

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

8. Na janela Saudações, escolha o botão de opção Adeus e, em seguida, escolha o botão Exibir.

   A linha MessageBox.Show("Goodbye.") está realçada a amarelo.

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

10. Para parar a depuração, feche a janela da aplicação.

11. Na barra de menus, escolha Depurar>Desativar todos os pontos de interrupção.

Exibir uma representação dos elementos da interface do usuário

No aplicativo em execução, você verá um widget que aparece na parte superior da janela. O widget é um auxiliar de tempo de execução que fornece acesso rápido a alguns recursos de depuração úteis. Selecione o primeiro botão, Ir para a Árvore Visual ao Vivo. Você verá uma janela com uma árvore que contém todos os elementos visuais da sua página. Expanda os nós para localizar os botões adicionados.

Criar uma versão de lançamento do aplicativo

Depois de verificar se tudo funciona, podes preparar uma compilação final da aplicação.

1. No menu principal, selecione Compilar solução>Limpar solução para excluir arquivos intermediários e arquivos de saída que foram criados durante compilações anteriores. Esta etapa não é necessária, mas limpa as saídas de compilação de depuração.

2. Altere a configuração de compilação para HelloWPFApp de Debug para Release usando o controle suspenso na barra de ferramentas. Diz Debug atualmente.

3. Crie a solução escolhendo Build>Build Solution.

Parabéns por concluir este tutorial! Você pode encontrar o .exe que você construiu em sua solução e diretório de projeto (...\HelloWPFApp\HelloWPFApp\bin\Release).

Conteúdo relacionado

• Dicas de produtividade

Próximo passo

Parabéns por concluir este tutorial! Para saber ainda mais, continue com os tutoriais a seguir.

Continue com mais tutoriais do WPF