Partilhar via

Tutorial: Crie uma aplicação WPF com Visual Basic

Neste tutorial, cria uma aplicação usando o Visual Basic no ambiente integrado de desenvolvimento (IDE) do Visual Studio. O seu programa irá utilizar o framework de interface do Windows Presentation Foundation (WPF). Use este tutorial para se familiarizar com muitas das ferramentas, caixas de diálogo e designers que pode usar no Visual Studio.

Neste tutorial, aprenderás 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, é um framework de interface de utilizador (UI) que cria aplicações cliente de ambiente de trabalho. A plataforma de desenvolvimento WPF suporta um amplo conjunto de funcionalidades de desenvolvimento de aplicações, incluindo:

  • Um modelo de aplicação
  • Recursos
  • Controlos
  • Gráficos
  • Esquema
  • Vinculação de dados
  • Documentos
  • Segurança

O WPF faz parte do .NET. Se anteriormente criou aplicações com .NET usando ASP.NET ou Windows Forms, a experiência de programação deverá ser familiar. WPF utiliza a Extensible Application Markup Language XAML para fornecer um modelo declarativo para programação de aplicações. Para mais informações, consulte WPF .NET visão geral.

Pré-requisitos

Precisas do Visual Studio para completar este tutorial. Para uma versão gratuita, veja Visual Studio downloads.

Criar o projeto

Quando crias uma aplicação no Visual Studio, crias primeiro um projeto. Neste tutorial, crie um projeto Windows Presentation Foundation.

  1. Abre o Visual Studio.

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

    Captura de ecrã da janela de início em Visual Studio com a opção 'Criar um novo projeto' destacada.

  3. Na janela Criar um novo projeto, procure por WPF e selecione Visual Basic na lista Todas as línguas. Escolha WPF Aplicação (.NET Framework) e depois escolha Próximo.

    Captura de ecrã do diálogo 'Criar um novo projeto' com 'WPF' introduzido na caixa de pesquisa, 'Visual Basic' selecionado na lista de línguas e o modelo do projeto 'WPF App (.NET Framework)' destacado.

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

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

    Captura de ecrã mostrando os ficheiros no projeto e solução HelloWPFApp na Explorador de Soluções.

O WPF Designer mostra uma vista de design e uma vista XAML de MainWindow.xaml numa vista dividida.

  1. Abre o Visual Studio.

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

    Captura de ecrã da janela de início em Visual Studio de 2022 com a opção 'Criar um novo projeto' destacada.

  3. Na janela Criar um novo projeto, procure por WPF e selecione Visual Basic na lista Todas as línguas. Escolha WPF Aplicação (.NET Framework) e depois escolha Próximo.

    Captura de ecrã do diálogo 'Criar um novo projeto' com 'WPF' introduzido na caixa de pesquisa, 'Visual Basic' selecionado na lista de línguas e o modelo do projeto 'WPF App (.NET Framework)' destacado.

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

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

    Captura de ecrã mostrando os ficheiros no projeto HelloWPFApp e a solução na Explorador de Soluções em Visual Studio 2022.

O WPF Designer mostra uma vista de design e uma vista XAML de MainWindow.xaml numa vista dividida.

Observação

Para mais informações sobre a Extensible Application Markup Language (XAML), consulte a visão geral 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 Explorador 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 da Visual Studio IDE, selecione o separador Toolbox. Se não o vires, seleciona View>Toolbox na barra de menu ou Ctrl+Alt+X.

  4. Expanda Common WPF Controls ou introduza Text na barra de pesquisa para encontrar TextBlock.

    Captura de ecrã mostrando a janela Toolbox com o controlo TextBlock destacado na lista de Controlos de WPF Comuns.

    Captura de ecrã mostrando a janela Toolbox em Visual Studio 2022 com o controlo TextBlock destacado na lista de Controlos Comuns de WPF.

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

    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 exemplo a seguir:

    <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 para o TextBlock e altere o atributo Text :

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

    Centralizar novamente o TextBlock se necessário.

  7. Salve seu aplicativo escolhendo o botão da barra de ferramentas Salvar tudo . Como alternativa, para guardar a aplicação, escolha ArquivoGuardar Tudo na barra de menus ou pressione CtrlShiftS. É uma boa prática poupar cedo e com frequência.

Adicionar botões e código

Seu aplicativo usa dois botões de opção e um botão. Use estas etapas para os adicionar. Também adicionas código Visual Basic ao botão. Esse código refere-se à seleção do botão de rádio.

  1. Na Caixa de Ferramentas, localize RadioButton.

    Captura de ecrã mostrando a janela Toolbox com o controlo RadioButton selecionado na lista de Controlos Comuns de WPF.

    Captura de ecrã a mostrar a janela Toolbox em Visual Studio 2022 com o controlo RadioButton selecionado na lista de Controlos Comuns WPF.

  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 seta. 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 rádio.

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

    Captura de ecrã que mostra a janela de propriedades do Explorador de Soluções para o 'HelloButton', o RadioButton.

    Captura de ecrã que mostra a janela de Propriedades do Explorador de Soluções no Visual Studio 2022 para o RadioButton 'HelloButton'.

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

  5. Atualize o atributo Content em 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. Na 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 está marcado por padrão. Esta definição significa que o botão de opção está sempre selecionado, mesmo quando o programa é iniciado.

  7. Na Caixa de Ferramentas, localize o controlo do Botão. Depois, arraste um botão até à superfície de design sob os controlos do RadioButton.

  8. No modo de exibição XAML, altere o valor de Content para o 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 o TextBlock, RadioButtons rotulados como 'Olá' e 'Adeus', e o controle Button rotulado 'Display', todos posicionados no formulário.

  9. Na superfície de desenho, clique duas vezes no botão Mostrar.

    MainWindow.xaml.vb abre, com o cursor dentro do 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, o primeiro passo introduz deliberadamente um erro no programa.

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

  2. Inicie o depurador pressionando F5 ou selecionando Depurar e, em seguida, Iniciar Depuração.

    Aparece uma janela de Modo de Interrupção, e a janela de Saída indica que ocorreu uma exceção.

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

  3. Interrompa o depurador escolhendo DepurarParar 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 Explorador de Soluções, abra o ficheiro Application.xaml.

  5. Altere para .

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

    Captura de ecrã da janela de Saudações com os controlos TextBlock, botões de rádio e botão visíveis. O botão de rádio 'Olá' está selecionado.

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

Para mais informações, consulte Compile a WPF Application e Debug WPF.

Depurar com pontos de interrupção

Você pode testar o código durante a depuração adicionando 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, 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 a seguinte linha: .

  4. Prima a tecla F9 para adicionar um ponto de interrupção e, em seguida, prima 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 a amarelo. Na parte inferior do IDE, as janelas Autos, Locals e Watch estão encaixadas no lado esquerdo. As janelas Call Stack, Breakpoints, Exception Settings, Command, Immediatee Output estão todas encaixadas juntas no lado direito.

  6. Na barra de menus, escolha DepurarStep Out.

    O aplicativo é reiniciado. Aparece um diálogo com a palavra "Olá".

  7. Escolhe o botão OK para fechar o diálogo.

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

    A linha está realçada a amarelo.

  9. Escolha a tecla F5 para continuar a depuração. Quando o diálogo aparece, escolhe OK para fechar o diálogo.

  10. Feche a janela da aplicação para parar a depuração.

  11. Na barra de menus, escolha DepurarDesativar todos os breakpoints.

Criar uma versão de lançamento

Depois de confirmares que tudo funciona, podes preparar uma versão de release da tua aplicação.

  1. Selecione BuildClean solution para excluir arquivos intermediários e arquivos de saída que foram criados durante compilações anteriores.

  2. Altere a configuração de compilação do HelloWPFApp de Debug para Release usando o menu dropdown na barra de ferramentas.

  3. Selecione 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\bin\Release).

Próximo passo

Avance para o próximo artigo para aprender como criar uma aplicação Windows Forms no Visual Studio com o Visual Basic.

Criar uma aplicação Windows Forms

Para mais informações sobre o Visual Studio, veja:

  • Dicas de produtividade
  • Last updated on