Criando uma interface de usuário para um aplicativo WPF (Visual Basic)

Artigo
08/25/2010

Nesta lição, você aprenderá como criar um aplicativo WPF e adicionar controles para a interface do usuário.

Criar um aplicativo Windows Presentation Foundation (WPF) é como projetar um aplicativo Windows Forms; você adiciona controles a um superfície de design.Mas há várias diferenças.Além de ter um designer, janela Properties e Toolbox, há uma janela que contém XAML.XAML significa Extensible Application Markup Language.Esta é uma linguagem de marcação que é usada para criar uma interface do usuário.A ilustração a seguir mostra o local padrão do editor XAML.Para obter mais informações, consulte Demonstra Passo a passo: Editando o XAML no WPF designer.

Editor XAML

Quando você cria um aplicativo tradicional Windows Forms, você pode arrastar um controle a partir de ToolBox para um Windows Form, ou se quiser, você pode escrever código para criar o controle.Ao arrastar o controle ao formulário, o código é gerado automaticamente para você.Da mesma forma, quando você cria um aplicativo WPF, você pode criar um controle escrevendo marcação XAML, ou você pode também arrastar o controle para uma janela WPF.

A marcação XAML é organizada em elementos que aparecem em um formato hierárquico.Os elementos são colocados entre colchetes angulares, e há normalmente um elemento de abertura e fechamento.Por exemplo, você poderia ter um simples Button elemento que aparece sistema autônomo segue: <Button></Button>.Normalmente você descreve a aparência de um elemento definindo atributos, como sua localização, altura e largura.Atributos de um elemento se parecem com propriedades de um objeto porque eles são descrições de aparência física ou estado.Os atributos aparecem dentro dos colchetes de abertura e de fechamento do elemento de abertura.Eles consistem no nome do atributo, no símbolo de atribuição (=) e no valor do atributo entre aspas.Você pode especificar a altura, por exemplo, de um elemento botão da seguinte maneira: <Button Height="23"></Button>.

Quando você arrasta controles WPF a partir de ToolBox para o designer, o Visual Basic Express Edition gera automaticamente a marcação XAML para o controle.Por exemplo, a marcação XAML a seguir é gerada quando você clica duas vezes em um controle System.Windows.Controls.Button para adicioná-lo a uma janela WPF.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

Observe que o elemento Button possui o atributo Height definido como "23" e seu elemento HorizontalAlignment definido como "Left".Há também vários outros atributos que descrevem o elemento.Você pode alterar esses atributos alterando os valores diretamente na marcação XAML.(Por padrão, esses atributos são exibidos em fonte vermelha.) Você também pode alterar as propriedades do controle usando a janela Properties.

Tente!

Para criar um aplicativo WPF

On the Arquivo menu, clicar Novo projeto.
Na caixa de diálogo New Project, no painel Templates, clique em WPF Application.
No Nome na caixa, digite WPFWindow e, em seguida, clicar OK.

Um novo projeto Windows Presentation Foundation é criado.Uma nova janela chamada Window1 será exibida.Sua marcação XAML está visível no editor XAML do ambiente de desenvolvimento integrado (IDE) do Visual Basic e aparece da seguinte maneira:
```
<Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Clique em Window1 para selecioná-la.
No editor XAML, altere o atributo Title do elemento Window de Window1 para WPF Application.

A marcação XAML aparecerá da seguinte maneira:
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
O texto na barra de título de Window1 muda para WPF Application.

Tente alterar outros atributos da janela, como Width e Height.Quando você estiver pronto, continue com o próximo procedimento.

Adicionando controles à janela do WPF

Nesse procedimento, você adicionará controles ao seu aplicativo.Isso será feito clicando no controle na Toolbox, normalmente localizado no lado esquerdo do IDE do Visual Basic e, em seguida, arrastando o controle para a janela do WPF.Você irá definir algumas propriedades para o controle e em seguida, ajustar a marcação XAML para alterar o texto e o tamanho do controle.

Para adicionar um controle para a janela do WPF

Da Toolbox, arraste um controle TextBox para o lado direito superior da janela do WPF.
Selecione o controle TextBox.
Na janela Properties, clique na primeira seta (esquerda) para a propriedade HorizontalAlignment, conforme mostrado na ilustração a seguir.

Propriedade HorizontalAlignment

Move o TextBox do lado direito da janela do WPF para o lado esquerdo.
Configure as seguintes propriedades para o objeto TextBox.

Propriedade

Valor

VerticalAlignment

Início

Width

75

Height

26
No editor XAML, altere o atributo Width do elemento TextBox para 140 e altere o elemento Margin para 30, 56, 0, 0, conforme mostrado no exemplo a seguir.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
A largura e local do TextBox são alterados após você digitar os novos valores.
Adicione um controle Button para a janela do WPF, próximo a TextBox.
Altere o texto entre as marcas de abertura e fechamento de Button de Button para Submit, conforme mostrado no exemplo a seguir.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
O texto no botão muda depois de você inserir o novo valor.
Pressione F5 para executar o programa.É exibida uma janela que contém o botão e a caixa de texto que você acabou de adicionar.Observe que você pode clicar no botão e digitar na caixa de texto.Você deve adicionar manipuladores de eventos para os controles e, em seguida, escrever código que instrui o computador sobre o que fazer quando o botão é clicado.

Propriedade	Valor
VerticalAlignment	Início
Width	75
Height	26

Próximas etapas

Nesta lição, você aprendeu a criar um aplicativo WPF e adicionar controles nele.Você também aprendeu como definir propriedades dos controles na janela Properties e alterar os atributos da janela do WPF e os controles na exibição XAML.Na próxima lição, você aprenderá sobre alguns dos outros controles que estão disponíveis na Toolbox.

Próxima Lesson: Usando controles comuns do WPF.