Controlando objetos pelo teclado (Silverlight)

Introdução

Como todos sabem, a interação com o usuário é um dos fortes pontos em desenvolver uma aplicação RIA (Rich Interface Application). Podemos buscar esta interação de várias formas. Uma delas é dar o poder do usuário manipular seu layout. Dois métodos que podem ser usados para isto são:

Controlando objetos pelo teclado – o usuário pode movimentar os objetados digitando teclas específicas do teclado.

Neste artigo exploraremos a segunda opção.

Criando os objetos

Em nosso arquivo Page.xaml, criaremos um objeto do tipo Canvas e, dentro deste, um do tipo Rectangle. As propriedades de nosso Rectangle serão atribuídas com os valores exibidos no Quadro 1.

</Canvas>

</Grid>

Quadro 1: Objetos Canvas e Rectangle e suas propriedades.

Criando animações no C#

Com os objetos criados, criaremos as Storyboards que darão o movimento e animação ao nosso objeto Rectangle.

Nota: para um melhor entendimento deste procedimento, recomendo a leitura do seguinte artigo: http://www.linhadecodigo.com.br/Artigo.aspx?id=2281.

Trabalharemos com três tipos de animações, porém podemos utilizar apenas uma Storyboard que receberá como parâmetro o valor final de nossa animação e o tipo de animação. Para isto serão recebidos valores do tipo double e PropertyPath. O Quadro 2 ilustra nosso método.

private void Animacao(double dbTo, PropertyPath ppPropriedade)

{

Storyboard sb = new Storyboard();

DoubleAnimation anim = new DoubleAnimation();

anim.To = dbTo;

anim.Duration = new Duration(TimeSpan.FromMilliseconds(200));

Storyboard.SetTarget(anim, MyRec);

Storyboard.SetTargetProperty(anim, ppPropriedade);

sb.Children.Add(anim);

sb.Begin();

}

Quadro 2: Storyboard responsável pelo movimento vertical de nosso objeto.

Identificando as teclas

Agora criaremos um evento para identificar quando o usuário digitar alguma tecla. O Quadro 3 ilustra nosso método KeyDown, responsável por fazer esta identificação.

public Page()

{

InitializeComponent();

KeyDown += new KeyEventHandler(Page_KeyDown);

}

void Page_KeyDown(object sender, KeyEventArgs e)

{

}

Quadro 3: Método que verificará quando o usuário digitar alguma tecla.

Dentro deste método, vamos capturar a posição atual de nosso Rectangle pelo método GetValue e armazenar seu Canvas.Top e Canvas.Left em variáveis do tipo double. Com estas variáveis armazenas, devemos utilizar a instrução switch para identificar se a tecla digitada é uma das definidas e chamar a animação correspondente.

Nossas teclas e suas respectivas funções estão listadas no Quadro 4.

: responsável por mover nosso objeto para cima.

Down: responsável por mover nosso objeto pra baixo.
Left: responsável por mover nosso objeto para esquerda.
Right: responsável por mover nosso objeto para direita.
Escape: responsável por deixar nosso objeto invisível.
Enter: responsável por deixar nosso objeto visível.

Quadro 4: Tabela de teclas e funções que serão utilizadas em nosso exemplo.

As teclas Up e Down irão utilizar o mesmo tipo de animação (vertical). Então iremos passar como parâmetro PropertyPath o valor Canvas.TopProperty. Quando a tecla clicada pro para cima, iremos subtrair 5 unidades da posição atual relativa ao topo. Quando for para baixo, iremos adicionar 5.

As teclas Left e Right irão trabalhar com a animação horizontal. Para isto o valor passado por parâmetro será o Canvas.LeftProperty e, quando para esquerda iremos subtrair 5 unidades da posição atual relativa ao canto esquerdo. E quando para direita, iremos adicionar 5.

Já as teclas Escape e Enter irão trabalhar com a opacidade de nosso objeto. O tipo de animação será Canvas.OpacityProperty e o valor passado para o nosso dbTo será de 0 quando a tecla for Escape e 1 quando a tecla for Enter.

O Quadro 5 ilustra nosso método que irá verificar qual tecla foi digita e chamar nossa animação com os parâmetros correspondentes.

void Page_KeyDown(object sender, KeyEventArgs e)

{

Double dbCanvasLeft = Convert.ToDouble(MyRec.GetValue(Canvas.LeftProperty));

Double dbCanvasTop = Convert.ToDouble(MyRec.GetValue(Canvas.TopProperty));

switch (e.Key.ToString().ToLower())

{

case "down":

Animacao(dbCanvasTop + 5, new PropertyPath(Canvas.TopProperty));

break;

case "up":

Animacao(dbCanvasTop - 5, new PropertyPath(Canvas.TopProperty));

break;

case "left":

Animacao(dbCanvasLeft - 5, new PropertyPath(Canvas.LeftProperty));

break;

case "right":

Animacao(dbCanvasLeft + 5, new PropertyPath(Canvas.LeftProperty));

break;

case "escape":

Animacao(0, new PropertyPath(Canvas.OpacityProperty));

break;

case "enter":

Animacao(1, new PropertyPath(Canvas.OpacityProperty));

break;

}

Quadro 5: método responsável por verificar a tecla digitada pelo usuário e chamar nossa animação com os parâmetros correspondentes.

Conclusão

Quando utilizamos o teclado para interagir com os elementos de nossa aplicação, abrimos um leque com uma infinidade de opções para potencializar nosso sistema. Uma das opções é a criação de jogos, uma grande diferenciação para nossa aplicação. Buscar recursos novos e diferentes é um grande investimento para um cenário tão concorrido como se encontra nossa Web atualmente.

Desenvolvimento - Silverlight

Leia também