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

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:

Visual Basic 2010 Express Edition

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:

A janela Solution Explorer exibindo a solução e os arquivos Application.xaml e MainWindow.xaml ;
A janela de Propriedades que exibe as propriedades do controle selecionado;
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;
O descritor WPF exibindo a interface visual da sua aplicação;
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".

Na WPF o controle Target é atribuído usando o databinding;
A janela Propriedades Data Binding Builder fornece a interface do usuário para criar os dados necessários de ligação.

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.

Selecione o controle TextBox e digite "tar" na janela de propriedades da caixa de pesquisa;
Clique no marcador de propriedades e no menu de contexto é exibido;
Selecione Apply Data Binding… ...

Na tab Source, selecione ElementName. A lista de controles de interface do usuário nomeado será exibida;
Selecione txtNome. Observe o título da página de origem é atualizado à medida que executa as seleções;
- A vinculação Target não requer que um Path seja atribuído;

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:

Selecione o controle Combobox - cboProduto;
Localize a propriedade Items na janela de propriedades e clique no ícone do botão ... para incluir itens;

Clique no botão Add.
Localize a propriedade Content e alterar o valor.
Você também pode ordenar ou remover um item.

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.

A partir da ToolBox inclua abaixo da ComboBox controle GroupBox;
O controle GroupBox pode conter um controle filho único. O descrito WPF adiciona automaticamente um controle filho Grid no StackPanel para você.(ver figura abaixo)

Selecione o Grid adicionado e pressione o botão Delete para excluir este controle filho que foi adicionado automaticamente;
A seguir vamos adicionar um StackPanel como um filho do GroupBox para isso arraste o controle StackPanel da ToolBox para o GroupBox;

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;

Com o StackPanel selecionado, procure por "wid" na janela de propriedades;
Clique no marcador de propriedade para a propriedade Width e selecione o valor Reset. Isso vai mudar a o valor da propriedade Width para Auto;
Repita este procedimento para a propriedade Height de forma que o seu valor também seja definido como Auto;

Procure por "align". Reset o valor da propriedade para as propriedades HorizontalAlignment e VerticalAlignment. Quando reiniciar, o seu valor será alterado para Stretch.
O controle StackPanel agora deve ocupar todo o espaço no interior do GroupBox;
Selecione o GroupBox e altere a valor de sua propriedade Header para : Valor;
Selecione o controle StackPanel e inclua três controles RadioButtons e os inclua como controles filhos do controle StackPanel clicando duas vezes no controle RadioButton da TooBox 3 vezes;

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

Selecione as três RadioButtons e mantenha a tecla CTRL Pressionada.(Ctrl+clique);
Na janela de Propriedades vamos definir os valores das propriedades a altura e largura para a RadioButtons selecionados;
Na janela de Propriedades, procure por "margin" e defina o valor para 3,5. Dependendo do tamanho do seu GroupBox a definição da propriedade Margin pode fazer com que umm ou mais RadioButtons desapareça;

Use a janela de Propriedades para atribuir os seguintes valores para as três propriedades Content dos controles RadioButtons: Excelente, Boa e Insuficiente;

Vamos definir um valor padrão para a ComboBox, atribuindo um valor à propriedade SelectedIndex;
Selecione a Combobox e na janela de propriedades defina o valor de SelectedIndex como igual a 0;

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.

A partir da ToolBox inclua dois controles Buttons arrastando-os para baixo do controle GroupBox;
A seguir altere as propriedades Content dos controles para OK e Cancelar e alterar o nome dos controles para btnCancelar e btnOK, conforme figura abaixo:

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:

Clicando duas vezes sobre o controle irá abrir o evento padrão na janela de código;
Usar na janela de Propriedades, a guia Events, e localizar o evento desejado dando um duplo clique na região indicada;
Usar o Editor XAML para criar um novo manipulador de eventos ou selecionar um método;

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