Tutorial: Criar um aplicativo WPF com Visual Basic

Neste tutorial, você criará um aplicativo usando o Visual Basic no ambiente de desenvolvimento integrado (IDE) do Visual Studio. Seu programa usará a estrutura da interface do usuário do Windows Presentation Foundation (WPF). 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, 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, é uma framework de interface do usuário 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, portanto, se você já criou aplicativos com o .NET usando ASP.NET ou Windows Forms, a experiência de programação deve ser familiar. O WPF usa o XAML Extensible Application Markup Language para fornecer um modelo declarativo para programação de aplicativos. Para obter mais informações, consulte Visão geral do WPF .NET.

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

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

1. Abra o Visual Studio.

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

   

3. Na janela Criar um novo projeto , procure por "WPF" e selecione Visual Basic na lista suspensa Todos os idiomas . Escolha Aplicativo WPF (.NET Framework) e, em seguida, 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 WPF Designer mostra um modo de exibição de design e um modo de exibição XAML de MainWindow.xaml em um modo de exibição dividido.

Observação

Para obter mais informações sobre eXtensible Application Markup Language (XAML), consulte 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 o separador Caixa de Ferramentas. Se não o vir, selecione Ver>Caixa de Ferramentas na barra de menus ou Ctrl+Alt+X.

4. Expanda Controles WPF comuns ou digite 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. Siga as diretrizes para colocar o elemento de controlo.

   

   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 o TextBlock novamente, 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 Arquivo>Guardar Tudo na barra de menus ou pressione Ctrl+Shift+S. É 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. Você adicionará código do 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.

   

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.

   

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 direito, altere a propriedade Name para GoodbyeButton.

5. Atualize o atributo Content em 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. 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 controle Button 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 de Content para o 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 desenho, clique duas vezes no botão Mostrar.

   MainWindow.xaml.vb abre, com o cursor dentro do 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ê depurará 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. 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, Iniciar Depuração.

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

   

3. Interrompa o depurador escolhendo Depurar>Parar 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. Alterar StartupUri="MainWindow.xaml" para StartupUri="Greetings.xaml"

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

   

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 obter mais informações, consulte Build a WPF application (WPF) 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: MessageBox.Show("Hello.")

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

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 MessageBox.Show("Hello.") 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 Depurar>Step Out.

   O aplicativo é reiniciado. É apresentada uma caixa de diálogo com a palavra "Olá".

7. Escolha o botão OK para fechar a caixa de 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 MessageBox.Show("Goodbye.") está realçada a amarelo.

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

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

11. Na barra de menus, escolha Depurar>Desativar todos os breakpoints.

Criar uma versão de lançamento

Agora que verificou que tudo funciona, pode preparar um build de lançamento da sua aplicação.

1. Selecione Build>Clean 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 (Criar>solução de compilação).

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óximos passos

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

Criar um aplicativo do Windows Forms

Ligações relacionadas

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

• Dicas de produtividade