Criando um aplicativo de desenho usando o WPF

Artigo
08/25/2010

Nesta lição, você aprenderá como criar um aplicativo Windows Presentation Foundation (WPF) que permite que você desenhe imagens.Criar um aplicativo WPF é como criar um aplicativo do Windows Forms.Você arrasta os controles a partir da Toolbox para a superfície de design e, em seguida, escreve código para manipular os eventos dos controles.

Para uma demonstração de vídeo, consulte Vídeo How to: Criando um aplicativo de desenho com o WPF.

Tente-o!

Para criar um aplicativo WPF

On the Arquivo menu, clicar Novo projeto.

A caixa de diálogo New Project será exibida.Esta caixa de diálogo lista os tipos de aplicativos padrão que você pode criar usando o Visual Basic Express Edition.
Selecione WPF Application como o tipo de projeto.
Alterar o nome do seu aplicativo para tinta PAD e, em seguida, clicar OK.

O Visual Basic Express Edition cria uma nova pasta para o seu projeto.A pasta tem o mesmo nome que o título do projeto.Visual Basic Express Edition Exibe também sua nova janela do WPF, intitulada Window1, no modo de modo de exibição de Design. Você pode ir para o Editor de Códigos a qualquer momento, clicando com o botão direito do mouse na superfície de design e clicando em View Code.Por padrão, o editor XAML é exibido sob o designer, mas você pode ver a exibição do XAML em tela inteira, clique com o botão direito do mouse na superfície de design e clicando em View XAML.

Para criar a interface do usuário

Se você não conseguir ver a janela Properties, no menu View, clique em Properties Window.Esta janela lista as propriedades do formulário selecionado ou controle.Você pode alterar os valores de propriedade existentes nesta janela.
Altere o tamanho da janela do WPF definindo as propriedades Height para 550 e Width para 370 na janela Properties.
Altere a propriedade de título da janela do WPF ao quadro de tinta.
Alterar o Plano de fundo propriedade da janela do WPF à cor marrom clicando Brown na caixa suspensa e, em seguida, pressionando ENTER.

Observação:

Como alternativa, você pode modificar a marcação XAML diretamente adicionando um Plano de fundo atributo e definindo seu valor como Brown: Background="Brown"
Para abrir a Toolbox, no menu View, clique em Toolbox.
Clique com o botão direito do mouse na Toolbox e clique em Choose Items.

A caixa de diálogo Choose Toolbox Items é aberta.
Na guia WPF Components da caixa de diálogo Choose Toolbox Items, role para baixo até InkCanvas e selecione-o de modo que uma marca de seleção apareça na caixa de seleção.
Clique em OK para adicionar o controle InkCanvas para a Toolbox.
Arraste um controle InkCanvas da ToolBox para a superfície de design.
Defina as propriedades do controle InkCanvas a seguir na janela Properties:

Propriedade

Valor

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
Altere a cor do controle InkCanvas para amarelo definindo sua propriedade Background como LightYellow.

O cor do plano de fundo do controle InkCanvas ficará amarelo claro em tempo de execução.
Arraste dois controles Button para a janela WPF, posicionando-os sob o controle InkCanvas.Coloque button1 na esquerda e button2 no lado direito.
Selecione button1 e altere a marcação XAML no modo XAML, como mostrado na seguinte marcação.Esta marcação define a propriedade Text como Clear.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
Selecione button2 e altere a marcação XAML como mostrado na seguinte marcação.Esta marcação define a propriedade Text como Close.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
O aplicativo WPF deve se parecer com o aplicativo Ink Pad na ilustração a seguir.

Aplicativo WPF Ink Pad

Observação:
Como alternativa, você pode modificar a marcação XAML diretamente adicionando um Plano de fundo atributo e definindo seu valor como Brown: Background="Brown"

Propriedade	Valor
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

Para adicionar código aos manipuladores de eventos para os botões

Clique duas vezes em Clear e, em seguida, adicione o código a seguir para o manipulador de eventos Click gerado:
```
    Me.InkCanvas1.Strokes.Clear() 
```
Retorne ao modo de design, clicando com o botão direito do mouse no Editor de códigos e clicando em Designer.
Clique duas vezes em Close e, em seguida, adicione o código a seguir para o manipulador de eventos Click gerado:
```
    Me.Close()
```
Pressione F5 para executar o projeto.
Quando o aplicativo for iniciado, desenhe uma figura no controle InkCanvas.Se você cometer um erro, você pode clicar em Clear para começar novamente.
Clique em Close para sair do aplicativo.