Tutorial: Criar um aplicativo WPF com o Visual Basic

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

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

O WPF faz parte do .NET, portanto, se você já criou aplicativos com .NET usando ASP.NET ou Windows Forms, a experiência de programação deve ser familiar. O WPF usa o XAML da Linguagem de Marcação de Aplicativo Extensível para fornecer um modelo declarativo para programação de aplicativos. Para obter mais informações, consulte a visão geral do .NET do WPF.

Pré-requisitos

Você precisa do Visual Studio para concluir este tutorial. Visite a página de downloads do Visual Studio para obter uma versão gratuita.

Criar o projeto

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

1. Abra o Visual Studio.

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

   

3. Na janela Criar um novo projeto , pesquise "WPF" e selecione Visual Basic na lista suspensa Todos os idiomas . Escolha Aplicativo WPF (.NET Framework) e escolha Avançar.

   

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

   O Visual Studio cria o projeto e a solução HelloWPFApp. Gerenciador de Soluções mostra os vários 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.

Observação

Para obter mais informações sobre xAML (linguagem de marcação de aplicativo eXtensible), consulte a visão geral de 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. No 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 IDE do Visual Studio, selecione a guia Caixa de Ferramentas. Se não aparecer, selecione Exibir>Caixa de Ferramentas na barra de menus ou pressione Ctrl+Alt+X.

4. Expanda controles comuns do WPF ou insira Texto 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.

   

   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 Arquivo>Salvar Tudo na barra de menus ou pressione Ctrl+Shift+S. É 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ê adicionará o código do Visual Basic ao 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.

   

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 HelloButton e GoodbyeButton para "Hello" e "Goodbye" 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 Botão e arraste um botão para a superfície de design sob os controles RadioButton.

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

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

   Sua janela deve ser semelhante à imagem a seguir.

   

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

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

   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, você depura 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. No Gerenciador de Soluções, clique com o botão direito do mouse em MainWindow.xaml e escolha Renomear. 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.

   

3. Interrompa o depurador escolhendo Depurador>Interromper 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. No Gerenciador de Soluções, abra o arquivo Application.xaml .

5. Altere StartupUri="MainWindow.xaml" para StartupUri="Greetings.xaml"

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

   

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 Criar um aplicativo WPF (WPF) e Depurar 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: MessageBox.Show("Hello.")

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: MessageBox.Show("Goodbye.").

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 MessageBox.Show("Hello.") 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ção>Sair.

   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 MessageBox.Show("Goodbye.") 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 Depurar>Desabilitar Todos os Pontos de Interrupção.

Criar uma versão de lançamento

Agora que você verificou que tudo funciona, você pode preparar um build de versão do seu aplicativo.

1. Selecione Compilar>Limpar 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 Criar>Criar 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óximas etapas

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

Criar um aplicativo do Windows Forms

Links relacionados

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

• dicas de produtividade