Tutorial: Criar um aplicativo WPF com Visual Basic

Neste tutorial, você criará um aplicativo usando Visual Basic no IDE (ambiente de desenvolvimento integrado) Visual Studio. Seu programa usará a estrutura de interface do usuário Windows Presentation Foundation (WPF). Use este tutorial para se familiarizar com muitas das ferramentas, caixas de diálogo e designers que você pode usar em Visual Studio.

Neste tutorial, você aprenderá como:

• Criar o projeto
• Configurar janela e adicionar texto
• Adicionar botões e código
• Depurar e testar o aplicativo
• Depurar com pontos de interrupção
• Criar uma versão de lançamento

O que é WPF?

WPF, ou Windows Presentation Foundation, é uma estrutura de UI que cria aplicativos cliente desktop. A plataforma de desenvolvimento WPF dá suporte a um amplo conjunto de recursos de desenvolvimento de aplicativos, incluindo:

• Um modelo de aplicativo
• Recursos
• Controles
• Graphics
• Layout
• Vinculação de dados
• Documentos
• Segurança

WPF faz parte do .NET. Se você criou aplicativos com .NET usando ASP.NET ou Windows Forms, a experiência de programação deve ser familiar. WPF usa a Linguagem extensível de marcação de aplicativo XAML para fornecer um modelo declarativo para programação de aplicativos. Para obter mais informações, consulte WPF .NET visão geral.

Pré-requisitos

Você precisa Visual Studio para concluir este tutorial. Para obter uma versão gratuita, consulte Visual Studio downloads.

Criar o projeto

Ao criar um aplicativo no Visual Studio, você cria primeiro um projeto. Neste tutorial, crie um projeto de Windows Presentation Foundation.

1. Abra Visual Studio.

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

   

3. Na janela Criar um novo projeto janela, pesquise WPF e selecione Visual Basic na lista Todos idiomas. Escolha WPF App (.NET Framework) e escolha Next.

   

4. Dê um nome ao projeto, HelloWPFApp e selecione Criar.

   Visual Studio cria o projeto HelloWPFApp e a solução. Gerenciador de Soluções mostra os vários arquivos.

   

O WPF Designer mostra uma exibição de design e uma exibição XAML de MainWindow.xaml em um modo de exibição dividido.

Observação

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

Configurar janela e adicionar texto

Usando a janela Propriedades , você pode exibir e alterar opções para itens de projeto, controles e outros itens.

1. Em Gerenciador de Soluções, abra o MainWindow.xaml.

2. No modo de exibição XAML, altere o valor da propriedade Window.Title de Title="MainWindow" para Title="Greetings".

3. No lado esquerdo do Visual Studio IDE, selecione a guia Toolbox. Se você não vê-lo, selecione View>Toolbox na barra de menus ou Ctrl+Alt+X.

4. Expanda Common WPF Controls ou insira Text na barra de pesquisa para localizar TextBlock.

   

5. Selecione o item TextBlock e arraste-o para a janela na superfície de design. Você pode mover o controle TextBlock arrastando-o. Use as diretrizes para colocar o controle.

   Captura de tela mostrando o controle TextBlock posicionado no formulário Saudações com as diretrizes visíveis.

   A marcação XAML deve ser semelhante ao seguinte exemplo:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. No modo de exibição XAML, localize a marcação do TextBlock e altere o atributo Text :

   Text="Select a message option and then choose the Display button."
   

   Centralize o TextBlock novamente, se necessário.

7. Salve seu aplicativo escolhendo o botão Salvar Todas as barras de ferramentas. Como alternativa, para salvar seu aplicativo, escolha ArquivoSalvar Tudo na barra de menus ou pressione CtrlShiftS. É uma prática recomendada salvar no início e com frequência.

Adicionar botões e código

Seu aplicativo usa dois botões de rádio e um botão. Utilize os seguintes passos para adicioná-los. Você também adiciona o código do Visual Basic no botão. Esse código refere-se à seleção do botão rádio.

1. Na Caixa de Ferramentas, localize RadioButton.

   

2. Adicione dois controles RadioButton à superfície de design selecionando o item RadioButton e arrastando-o para a superfície de design. Mova os botões selecionando-os e usando as teclas de direção. Coloque os botões lado a lado sob o controle TextBlock.

   Captura de tela mostrando o formulário Saudações com um controle TextBlock e dois botões de opção.

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

   

4. Na janela Propriedades do controle RadioButton à direita, altere a propriedade Name para GoodbyeButton.

5. Atualize o atributo Content de e para e no XAML.

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

6. No modo de exibição XAML, localize a marcação para HelloButton e adicione um atributo IsChecked :

   IsChecked="True"
   

   O atributo IsChecked com o valor True significa que HelloButton é verificado por padrão. Essa configuração significa que o botão de opção está sempre selecionado, mesmo quando o programa é iniciado.

7. Na Caixa de Ferramentas , localize o controle do Botão . Em seguida, arraste um botão para a superfície de design abaixo dos controles RadioButton.

8. No modo de exibição XAML, altere o valor do conteúdo do controle Button de para .

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   Sua janela deve ser semelhante à imagem a seguir.

   Captura de tela mostrando o formulário Saudações com TextBlock, RadioButtons rotulados como "Olá" e "Adeus", e o controle de botão rotulado como "Exibição", tudo posicionado no formulário.

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

   MainWindow.xaml.vb é aberto, com o cursor no evento .

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

10. Adicione o seguinte código:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Depurar e testar o aplicativo

Em seguida, depure o aplicativo para procurar erros e testar se ambas as caixas de mensagem aparecem corretamente. Para ver como esse processo funciona, a primeira etapa apresenta deliberadamente um erro no programa.

1. Em Gerenciador de Soluções, clique com o botão direito do mouse em MainWindow.xaml e escolha Rename. Renomeie o arquivo para Greetings.xaml.

2. Inicie o depurador pressionando F5 ou selecionando Depurar e, em seguida, inicie a depuração.

   Uma janela do Modo de Interrupção é exibida e a janela Saída indica que ocorreu uma exceção.

   Captura de tela mostrando a janela "Exceção Sem Tratamento" com uma mensagem System.IO.Exception que diz "Não é possível localizar o recurso mainwindow.xaml".

3. Interrompa o depurador escolhendo DepuradorInterromper a Depuração.

   Você renomeou MainWindow.xaml para Greetings.xaml no início desta seção. 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.

4. Em Gerenciador de Soluções, abra o arquivo Application.xaml.

5. Altere para .

6. Inicie o depurador novamente (pressione F5). Você agora deverá ver a janela Saudações do seu aplicativo.

   Captura de tela da janela Saudações com os controles TextBlock, RadioButtons e Button visíveis. O botão de opção "Olá" está selecionado.

7. Selecione Olá e o botão Exibir e, em seguida, Adeus e o botão Exibir . Use o ícone fechar no canto superior direito para interromper a depuração.

Para obter mais informações, consulte Compilar um aplicativo WPF e Debug WPF.

Depurar com pontos de interrupção

Você pode testar o código durante a depuração ao adicionar alguns pontos de interrupção.

1. Abra Greetings.xaml.vb e selecione a seguinte linha:

2. Adicione um ponto de interrupção pressionando F9 ou selecionando Depurar e, em seguida, alterne o 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 a seguinte linha: .

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

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

   A linha está realçada em amarelo. Na parte inferior do IDE, as janelas Autos, Locais e Watch estão encaixadas juntas no lado esquerdo. As janelas Pilha de Chamadas, Pontos de Interrupção, Configurações de Exceção, Comando, Imediata e Saída são encaixadas no lado direito.

   

6. Na barra de menus, escolha DepuraçãoSair.

   O aplicativo é iniciado novamente. Uma caixa de diálogo com a palavra "Olá" é exibida.

7. Escolha o botão OK para fechar a caixa de diálogo.

8. Na janela Saudações, escolha o botão de opção Até logo e depois o botão Exibição.

   A linha está realçada em amarelo.

9. Escolha a chave F5 para continuar a depuração. Quando a caixa de diálogo for exibida, escolha OK para fechar a caixa de diálogo.

10. Feche a janela do aplicativo para parar a depuração.

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

Criar uma versão de lançamento

Depois de verificar se tudo funciona, você pode preparar uma compilação de versão do seu aplicativo.

1. Selecione CompilarLimpar solução para excluir arquivos intermediários e arquivos de saída que foram criados durante os builds anteriores.

2. Altere a configuração de build de HelloWPFApp, de Depuração para Versão, usando o controle suspenso na barra de ferramentas.

3. Selecione CriarCriar Solução.

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

Próxima etapa

Avance para o próximo artigo para saber como criar um aplicativo Windows Forms em Visual Studio com Visual Basic.

Criar um aplicativo Windows Forms

Para obter mais informações sobre Visual Studio, consulte:

• dicas de produtividade