WPF - Criando uma aplicação básica (para iniciantes)


Este é um tutorial para iniciantes cujo objetivo é mostrar alguns recursos básicos da WPF; nele veremos como criar uma aplicação WPF usando os recursos básicos desta tecnologia.

Recursos usados:

Criando o Projeto

Abra o VB 2010 Express Edition e no menu File-> New Project selecione o template WPF Application, informe o nome Wpf_Intro1 e clique em OK;

Será criado uma solução WPF com um projeto onde podemos visualizar os seguintes recursos:

  1. A janela Solution Explorer exibindo a solução e os arquivos Application.xaml e MainWindow.xaml ;
  2. A janela de Propriedades que exibe as propriedades do controle selecionado;
  3. A barra de ferramentas (ToolBox) que exibe os controles disponíveis para sua aplicação WPF e que você pode arrastar e soltar no descritor WPF;
  4. O descritor WPF exibindo a interface visual da sua aplicação;
  5. A janela de código XAML que representa o código usado pela API WPF no formato de tags XML;

Os controles podem ser adicionados a um aplicativo usando a caixa de ferramentas ou editando o texto XAML diretamente no editor do XAML.

Várias técnicas podem ser usadas para adicionar um controle a partir da ToolBox.

1- Selecione um controle da caixa de ferramentas em seguida clique na superfície do descrito onde deseja que o controle seja criado.
2- Selecione um controle da caixa de ferramentas clicando sobre ele e, em seguida desenhe o controle na superfície de descritor onde deseja que o controle seja criado;
3- Clique e arraste um controle da Toolbox para a superfície do descrito.
4- Com o controle de destino selecionado na superfície do descrito, clique duas vezes no controle na ToolBox.

O descritor WPF Designer exibe adornos para o controle na superfície do descritor para ajudar os desenvolvedores a utilizar o mouse para mover ou redimensionar um controle. Os adornos também fornecem feedback visual sobre o alinhamento de controle e outras informações de controle específicas.

Ao arrastar um controle da ToolBox para o descritor, a janela XAML exibe o código gerado, sendo que você pode alterar os valores das propriedades também na janela de código XAML.

A janela de propriedades possui a caixa Search que pode lhe ajudar a encontrar uma propriedade ou evento bastando para isso digitar os caracteres iniciais para que seja realizado um filtro exibindo apenas as propriedades/eventos que contem os caracteres informados.

Vamos criar uma aplicação WPF básica que apresente uma janela com um formulário de pesquisa usando alguns controles da ToolBox.

Vamos incluir no descritor WPF a partir da ToolBox um controle TextBlock com alinhamento vertical Top (no topo da janela) com o Texto : Pesquisa;

Vamos incluir mais alguns controles em nossa interface WPF.

Inclua quatro controles, conforme figura abaixo : dois Labels, TextBox e ComboBox.

1- Alinhe todos os controles como Top e Left;
2- Use o snaplines(linhas guias horizontais e verticais) dos controles para auxiliar no alinhamento e posicionamento dos controles;
3- Selecione o TextBox. Usando a janela de propriedades mude o nome para txtNome;
4- Selecione o ComboBox. e mude o nome para cboProduto;

Selecione o controle Label:

- Use a janela de Propriedades e o recurso Search de pesquisa do Windows e digite, "con".
- Altere a propriedade de conteúdo para "_Nome".

Repita o procedimento para a outra Label e informe o nome _Produto:

O controle Label usa a propriedade Content para mostrar o seu texto. Você pode estar pensando: "porque é que o texto da Label usa a propriedade Content e o texto para o controle TextBlock usa a propriedade Text ? " .Isso ocorre porque as duas propriedades são diferentes tipos de dados com diferentes características associadas.

Vamos agora implementar um chave de acesso a Label  e uma atribuição de Target Control.

A declaração "_N" associa a combinação de teclas ALT + N com esta chave de acesso à Label. Quando o usuário mantém pressionada a tecla ALT, a Label será exibida como "Nome".

Nas etapas seguintes, vamos criar o que é chamado de "nome do elemento de ligação." Vinculações com nome do elemento permitem a um controle se vincular a propriedade de outro objeto nomeado.

Vamos testar a nossa chave de acesso ALT+N. Execute o aplicativo e pressione ALT+N. O foco deverá ser movido para o controle TextBox.

Repita os passos acima para a Label do produto, associando ALT+P com o ComboBox como Destino(Target).

Assim você tem as Labels vinculadas às suas TextBox para permitir acesso via seleção do controle usando chave de acesso. (ALT+N e ALT+P)

Vamos incluir itens na Combobox:

Usando o Editor de coleção, na abaixo, adicione três itens, definindo a propriedade Content com o seguinte texto:- Notebook HP , Pen Drive 4 GB e IPhone 16 MB;

Neste momento se você olhar a janela de código XAML poderá ver o código gerado conforme figura a seguir:

Vamos agora usar um GroupBox para mostrar RadioButtons. Os controles RadioButtons são mutuamente exclusivos, o que significa que quando um é selecionado o RadioButton selecionado anteriormente é desmarcada automaticamente.

Iremos também introduzir um novo painel de controle, o StackPanel. O controle StackPanel empilha seus controles filhos horizontalmente ou verticalmente com base em sua propriedade Orientation.

Obs: Quando os controles são adicionados à superfície do descrito WPF usando a ToolBox algumas propriedades recebem valores padrão;

Depois de criar o StackPanel a superfície do descritor será semelhante a figura abaixo. Observe no Editor XAML a Estrutura do Documento e note que o StackPanel é um filho do GroupBox :

Desejamos que o StackPanel ocupe todo o espaço no interior do GroupBox e para isso vamos usar a janela de Propriedades para alcançar este objetivo;

Um poderoso recurso do descrito WPF é a capacidade de selecionar vários controles e editar os valores das propriedades comuns.

Neste momento se dermos uma olhada no código XAML gerado iremos ver o seguinte resultado:

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Pesquisa - WPF" Height="338" Width="382" Margin="3,5">
    <Grid>
        <TextBlock Height="28" HorizontalAlignment="Stretch"
                   Margin="11,11,0,0" Name="TextBlock1" 
                   Text="Pesquisa" VerticalAlignment="Top" 
                   Width="337" />
        <Label Content="_Nome" Height="27" HorizontalAlignment="Left" Margin="35,45,0,0" Name="Label1" 
               VerticalAlignment="Top" 
               Width="69" Target="{Binding ElementName=txtNome}" />
        <Label Content="_Produto" Height="28" HorizontalAlignment="Left" Margin="35,0,0,193" Name="Label2" 
               VerticalAlignment="Bottom" Width="69" Target="{Binding ElementName=cboProduto}" />
        <TextBox Height="27" HorizontalAlignment="Right" Margin="0,45,52,0" Name="txtNome" 
                 VerticalAlignment="Top" Width="198" />
        <ComboBox Height="24" HorizontalAlignment="Left" Margin="110,82,0,0" Name="cboProduto" 
                  VerticalAlignment="Top" Width="198" SelectedIndex="0">
            <ComboBoxItem Content="NoteBook LG" />
            <ComboBoxItem Content="Pen Drive 4 GB" />
            <ComboBoxItem Content="IPhone 16 MB" />
        </ComboBox>
        <GroupBox Header="Valor" Height="119" HorizontalAlignment="Left" 
                  Margin="44,122,0,0" Name="GroupBox1" 
                  VerticalAlignment="Top" Width="264">
            <StackPanel Name="StackPanel1">
                <RadioButton Content="Excelente" Height="16" Name="RadioButton1" Margin="3,5" />
                <RadioButton Content="Boa" Height="16" Name="RadioButton2" Margin="3,5" />
                <RadioButton Content="Insuficiente" Height="16" Name="RadioButton3" Margin="3,5" />
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

Para completar a nossa aplicação vamos incluir dois controles Button abaixo do controle GroupBox.

Incluindo código na aplicação WPF

Nossa última tarefa, antes de rodar a aplicação, é definir código nos eventos Click dos botões de comando.

Podemos incluir código em um evento de controle das seguintes formas:

Vamos clicar duas vezes sobre o botão Cancelar e incluir o código abaixo no seu evento Click:

Private Sub btnCancelar_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnCancelar.Click
    Me.Close()
End Sub

Em seguida clique duas vezes sobre o botão OK e incluir o código abaixo no seu evento Click:

 Private Sub btnOK_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnOK.Click
        MessageBox.Show("Macoratti.net - Quase tudo para Visual Basic")
    End Sub

Agora é só alegria...

Execute a aplicação pressionando F5 (ou clicando na seta )

1- Use a tecla de acesso ALT + N para ajustar o foco para o TextBox;
2- Agora, use ALT + P para definir o foco para o ComboBox;
3- Use as setas para alterar o valor ComboBox;
4- Pressione F4 para abrir a caixa de combinação suspensa;
5- Clique no RadioButtons para ver como apenas um é selecionado;
6- Clique em OK para que a MessageBox exiba sua mensagem;
7- Clique em Cancelar para fechar o aplicativo;

Você acabou de criar com sucesso uma singela aplicação WPF na qual pode aprender como usar os recursos básicos. A WPF possui muitos mais recursos que iremos desvendando aos poucos nos demais artigos.

Aguarde...

Pegue o projeto completo aqui: Wpf_Intro1.zip

"Passará o céu e a terra, mas as minhas palavras jamais passarão." (Mateus 24:35)

Referências:


José Carlos Macoratti