Compartilhar via


Tutorial: Criar um aplicativo WPF simples com C#

Ao concluir este 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", cria a interface do usuário, adiciona códigos e erros de depuração, enquanto aprende a trabalhar no ambiente de desenvolvimento integrado (IDE).

Pré-requisitos

  • Se você ainda não tiver instalado o Visual Studio, acesse a página Downloads do Visual Studio para instalá-lo gratuitamente.
  • Verifique se você tem a carga de trabalho Desenvolvimento de área de trabalho do .NET instalada. Você pode verificar essa configuração no Instalador do Visual Studio.
  • Você pode usar o .NET Framework ou o .NET Core para este tutorial. O .NET Core é a estrutura mais recente e moderna. O .NET Core exige o Visual Studio 2019 versão 16.3 ou posterior.

O que é o WPF?

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

O WPF faz parte do .NET; portanto, se você tiver criado aplicativos anteriormente com o .NET usando o ASP.NET ou o Windows Forms, a experiência de programação deverá ser conhecida. O WPF usa a linguagem XAML para fornecer um modelo declarativo para programação de aplicativos. Para obter mais informações, confira Visão geral do WPF .NET.

Configurar o IDE

Quando você inicia o Visual Studio, a janela de início é aberta primeiro. Selecione Continuar sem código para abrir o ambiente de desenvolvimento. Você vê janelas de ferramentas, menus e barras de ferramentas e o espaço principal da janela. As janelas de ferramentas são encaixadas à esquerda e à direita da janela do aplicativo. A caixa de pesquisa, a barra de menus e a barra de ferramentas padrão estão na parte superior. Quando você carrega uma solução ou um projeto, os editores e designers são exibidos no espaço central da janela do aplicativo. Ao desenvolver um aplicativo, você passa a maior parte do tempo nessa área central.

Criar o projeto

Ao criar um aplicativo no Visual Studio, você cria primeiro 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 tela Iniciar, selecione Criar projeto.

    View the 'Create a new project' window

  3. Na tela Criar um projeto, pesquise por "WPF" e escolha Aplicativo WPF e, em seguida, escolha Avançar.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na próxima tela, dê o nome HelloWPFApp ao projeto e escolha Avançar.

    Screenshot of the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  5. Na janela Informações adicionais, o .NET Core 3.1 já deve estar selecionado para sua estrutura de destino. Caso contrário, selecione .NET Core 3.1. Em seguida, escolha Criar.

    Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected as the target framework for the new project.

O Visual Studio cria o projeto e a solução HelloWPFApp e o Gerenciador de Soluções mostra os diversos arquivos. O Designer do WPF mostra um modo de exibição de Design e um modo de exibição XAML de MainWindow.xaml em um modo divisão. É possível deslizar o divisor para mostrar mais ou menos de cada exibição. É possível optar por ver apenas a exibição visual ou apenas a exibição XAML.

WPF project and solution in the IDE

Observação

Para saber mais informações sobre XAML (eXtensible Application Markup Language), confira a página Visão geral do XAML para WPF.

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

Properties window

  1. Abra o Visual Studio.

  2. Na tela Iniciar, selecione Criar um novo projeto.

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  3. Na tela Criar um projeto, pesquise por "WPF" e escolha Aplicativo WPF e, em seguida, escolha Avançar.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na próxima tela, dê o nome HelloWPFApp ao projeto e escolha Avançar.

    Screenshot that shows the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

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

    Screenshot that shows the Additional information window in Visual Studio with .NET 8.0 selected as the target framework for the new project.

O Visual Studio cria o projeto e a solução HelloWPFApp e o Gerenciador de Soluções mostra os diversos arquivos. O Designer do WPF mostra um modo de exibição de Design e um modo de exibição XAML de MainWindow.xaml em um modo divisão. É possível deslizar o divisor para mostrar mais ou menos de cada exibição. É possível optar por ver apenas a exibição visual ou apenas a exibição XAML.

Screenshot of the HelloWPFApp project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer.

Observação

Para saber mais informações sobre XAML (eXtensible Application Markup Language), confira a página Visão geral do XAML para WPF.

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

Screenshot of the Properties window showing the Misc section of the Solution Properties for the HelloWPFApp project.

Criar a interface do usuário

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

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

Adicionar um controle TextBlock

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

  2. No Caixa de Ferramentas, expanda o nó Controles Comuns do WPF para ver o controle TextBlock.

    Toolbox with the TextBlock control highlighted

  3. Adicione um controle TextBlock à superfície de design escolhendo o item TextBlock e arrastando-o para a janela na superfície de design. Centralize o controle próximo à parte superior da janela. No Visual Studio 2019 e posteriores, você pode usar as diretrizes vermelhas para centralizar o controle.

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

    TextBlock control on the MainWindow form

    A marcação XAML deve ter uma aparência semelhante ao exemplo a seguir:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    
  1. Pressione Ctrl+Q para ativar a caixa de pesquisa e digite Caixa de ferramentas. Escolha Exibir > Caixa de ferramentas na lista de resultados.

  2. No Caixa de Ferramentas, expanda o nó Controles Comuns do WPF para ver o controle TextBlock.

    Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls.

  3. Adicione um controle TextBlock à superfície de design escolhendo o item TextBlock e arrastando-o para a janela na superfície de design. Centralize o controle próximo à parte superior da janela. Você pode usar as diretrizes para centralizar o controle.

    Sua janela deve se parecer com a seguinte imagem:

    Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control.

    A marcação XAML deve ter uma aparência semelhante ao exemplo a seguir:

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

Personalizar o texto no bloco de texto

  1. Na exibição XAML, localize a marcação TextBlock e altere o atributo Text de TextBox para Select a message option and then choose the Display button.

    A marcação XAML deve ter uma aparência semelhante ao exemplo a seguir:

    <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. Se necessário, centralize novamente o TextBlock e salve as alterações pressionando Ctrl+S ou usando o item de menu Arquivo.

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

Adicionar botões de opção

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

    Toolbox window with RadioButton control selected

  2. Adicione dois controles RadioButton à superfície de design escolhendo o item RadioButton e arrastando-o para a janela na superfície de design. Mova os botões (selecionando-os e usando as teclas de direção) para que os botões sejam exibidos lado a lado sob o controle TextBlock. Use as diretrizes vermelhas para alinhar os controles.

    A sua janela deve se parecer com esta:

    MainWindow form with TextBlock and two radio buttons

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

    RadioButton properties window

  4. Na janela Propriedades do controle RadioButton direito, altere a propriedade Name para GoodbyeButton e, em seguida, salve as alterações.

Em seguida, você adiciona texto de exibição para cada controle RadioButton. O procedimento a seguir atualiza a propriedade Conteúdo de um controle RadioButton.

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

    Screenshot of the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. Adicione dois controles RadioButton à superfície de design escolhendo o item RadioButton e arrastando-o para a janela na superfície de design. Mova os botões (selecionando-os e usando as teclas de direção) para que os botões sejam exibidos lado a lado sob o controle TextBlock. Você pode usar as diretrizes para alinhar os controles.

    A sua janela deve se parecer com esta:

    Screenshot of the Design window for Greetings.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface.

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

    Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to HelloButton.

  4. Na janela Propriedades do controle RadioButton direito, altere a propriedade Name para GoodbyeButton e, em seguida, salve as alterações.

Em seguida, você adiciona texto de exibição para cada controle RadioButton. O procedimento a seguir atualiza a propriedade Conteúdo de um controle RadioButton.

Adicionar o texto de exibição de cada botão de opção

  1. Atualize o atributo Conteúdo para os dois botões de opção HelloButton e GoodbyeButton para "Hello" e "Goodbye" no XAML. A marcação XAML deve agora ser semelhante ao exemplo a seguir:

    <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 que um botão de opção faça check-in por padrão

Nesta etapa, definimos HelloButton para ser verificado por padrão para que um dos dois botões de opção esteja sempre selecionado.

  1. Na exibição XAML, localize a marcação HelloButton.

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

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

    <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>
    

O elemento final da interface do usuário que você adiciona é um controle Button.

Adicionar o controle de botão

  1. Na Caixa de Ferramentas, localize o controle de Botão e, em seguida, adicione-o à superfície de design sob os controles RadioButton, arrastando-o para o formulário no modo de exibição de Design. Se você estiver usando o Visual Studio 2019 ou posterior, uma linha vermelha ajudará você a centralizar o controle.

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

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

    MainWindow form with control labels

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

    <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>
    
  1. Na Caixa de Ferramentas, localize o controle de Botão e, em seguida, adicione-o à superfície de design sob os controles RadioButton, arrastando-o para o formulário no modo de exibição de Design. As diretrizes podem ajudar você a centralizar o controle.

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

    Sua janela deve se parecer com a captura de tela a seguir.

    Screenshot of the Design window for Greetings.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'.

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

    <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 um código ao botão de exibição

Quando esse aplicativo é executado, uma caixa de mensagem é exibida depois que um usuário escolhe um botão de opção e, em seguida, escolhe o botão Exibir. Uma caixa de mensagem aparece para Olá e outra aparece para Até logo. Para criar esse comportamento, adicione código ao evento Button_Click em MainWindow.xaml.cs.

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

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

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Insira o seguinte código:

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

Quando esse aplicativo é executado, uma caixa de mensagem é exibida depois que um usuário escolhe um botão de opção e, em seguida, escolhe o botão Exibir. Uma caixa de mensagem aparece para Olá e outra aparece para Até logo. Para criar esse comportamento, adicione código ao evento Button_Click em MainWindow.xaml.cs.

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

    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 deve agora ser semelhante ao exemplo a seguir:

    <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. Insira 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, você depura o aplicativo para procurar erros e testar se ambas as caixas de mensagem aparecem corretamente. As instruções a seguir descrevem como criar e iniciar o depurador, mas, posteriormente, leia Compilar um aplicativo WPF (WPF) e Depurar o WPF para obter mais informações.

Alterar o nome de MainWindow.xaml

Vamos dar um nome mais específico para MainWindow. Em Gerenciador de Soluções, clique com o botão direito do mouse em MainWindow.xaml e escolha Renomear. Renomeie o arquivo para Greetings.xaml.

Localizar e corrigir erros

Nesta etapa, você encontrará o erro que causamos anteriormente alterando o nome do arquivo MainWindow.xaml.

Iniciar a depuração e localizar o erro

  1. Inicie o depurador pressionando F5 ou selecionando Depurar e depois Iniciar Depuração.

    Uma janela do Modo de interrupção é exibida e a janela Saída indica que ocorreu um IOException: não é possível localizar o recurso mainwindow.xaml.

    IOException message

  2. Interrompa o depurador escolhendo Depurador>Interromper a Depuração.

Renomeamos o MainWindow.xaml como 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.

  1. Inicie o depurador pressionando F5 ou selecionando Depurar e depois Iniciar Depuração.

    Uma janela do Modo de interrupção é exibida e a janela Saída indica que ocorreu um IOException: não é possível localizar o recurso mainwindow.xaml.

    Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml.

  2. Interrompa o depurador escolhendo Depurador>Interromper a Depuração.

Renomeamos o MainWindow.xaml como Greetings.xaml no início deste tutorial, 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.

Especificar 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 uma etapa opcional, evita confusão ao alterar o título da janela do aplicativo para corresponder a esse novo nome.

  1. No Gerenciador de Soluções, abra o arquivo 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). Você agora deverá ver a janela Saudações do seu aplicativo.

Screenshot of running app

Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

Agora, feche a janela do aplicativo para parar a depuração.

Depurar com pontos de interrupção

Você pode testar o código durante a depuração ao adicionar alguns pontos de interrupção. Você pode adicionar pontos de interrupção escolhendo Depurar>Ativar/Desativar Ponto de Interrupção, clicando na margem esquerda do editor ao lado da linha de código em que você deseja que a interrupção ocorra ou pressionando F9.

Adicionar pontos de interrupção

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

  2. Adicione um ponto de interrupção por meio do menu selecionando Depurar e, em seguida, Ativar/Desativar 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 F5 para iniciar a depuração.

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

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

    Breakpoint in the debugger

  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 depois 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. Feche a janela do aplicativo para parar a depuração.

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

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

  2. Adicione um ponto de interrupção por meio do menu selecionando Depurar e, em seguida, Ativar/Desativar 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 F5 para iniciar a depuração.

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

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

    Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow.

  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 depois 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. Feche a janela do aplicativo para parar a depuração.

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

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

No aplicativo em execução, você deverá ver um widget que aparece na parte superior da janela. O widget é um auxiliar de runtime que fornece acesso rápido a alguns recursos úteis de depuração. Selecione o primeiro botão, Acessar Árvore Visual Dinâmica. Você deve 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 que você adicionou.

Screenshot of Live Visual Tree window

Screenshot of the Live Visual Tree window, showing the tree of visual elements in HelloWPFApp.exe while it's running.

Criar uma versão de lançamento do aplicativo

Agora que você verificou que tudo está funcionando, já pode preparar um build de versão do aplicativo.

  1. No menu principal, selecione Build>Limpar solução para excluir arquivos intermediários e arquivos de saída criados durante builds anteriores. Essa etapa não é necessária, mas limpa as saídas de build de depuração.

  2. Altere a configuração de build de HelloWPFApp, de Depuração para Versão, usando o controle suspenso na barra de ferramentas (no momento, seu nome é “Depuração”).

  3. Compile a solução escolhendo Compilar>Compilar solução.

Parabéns por concluir este tutorial. Encontre o .exe compilado na solução e no diretório do projeto (...\HelloWPFApp\HelloWPFApp\bin\Release).

Próximas etapas

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

Confira também