Usando VSM em Silverlight

O Visual State Manager chamado de VSM permite você habilitar facilmente o estado de qualquer UIElement  tal como Button, Elipse, Retângulo  ou até mesmo tudo que estiver dentro de um UserControl.  Você deve estar se perguntando, o que é isso? Um exemplo bem simples: Você pode definir e executar um estado quando o mouse estiver sobre um botão e executar outro estado quando ele não está sobre o botão. Com VSM pode criar estados altamente sofisticados, é só usar a criatividade. E para facilitar ainda mais, nada melhor que usar o Microsoft Blend para criar os estados dos elementos, e com uma linha chamar o estado.
Neste tutorial eu irei mostrar o estado de uma elipse, é bem simples e prático. Depois que você aprender mais sobre VSM, que tal mostrar para nós suas habilidades.

Projeto Silverlight

Crie um projeto em Silverlight utilizando o Microsoft Blend 3 ou 4

1 - Depois que o projeto Silverlight é criado, adicione uma elipse no workspace, como mostrado na Figura 01.

Figura 01 - Adicionando Elipse

2 – Mude a propriedade Fill da elipse para Verde, e a elipse deverá possuir o estado como traz a Figura 02.

Figura 02 - Mudando propriedade Fill

3- Mude a propriedade Name da Elipse para elipseVerde, como apresentado na Figura 03.

Figura 03 - Mudando propriedade Name

4- Localize no Microsoft Blend a o painel States. Deixe selecionada a elipse e adicione no painel States um grupo de Estados, conforme você pode observar na Figura 04.

Figura 04 - Painel States e adicionando grupo de estado

5 – O próximo passo é mudar o valor de 0s para 0,6. Isto significa que a transição acontecerá até completar 6 segundos.  Veja a Figura 05.

Figura 05 - Mudando o tempo

6 – Agora vamos adicionar dois estados, um para MouseEnter e outro para o MouseLeave. Conforme mostrado na Figura 06.

Figura 06 - Adicionando estados

7- Selecione o estado MouseEnter e mude a propriedade Fill da elipse para Azul.

Neste ponto já está criado os estados para a Elipse, a ideia é utilizar os eventos MouseEnter e MouseLeave da Elipse para chamar os estados que a ela pertence, o qual irá possibilitar a transição de estados da propriedade Fill de Verde para Azul.

8 – Compile a aplicação pressionando Ctrl +shift + b ou utilize o menu Project -> Build Project

9 – Salve a Aplicação e depois selecione a Page.xaml.cs para adicionar o código, conforme apresentado na Listagem 01.

Listagem 01 – Código para chamar os estados MouseLeave e MouseEnter

Analisando o código da Listagem 01, podemos ver que foi utilizada a classe VisualStateManager que gerencia os estados e a lógica para transição entre estados  e o método  GoToState requer três parâmetros: o objeto, a string com o nome do estado, e se existe efeito de transição entre dois estados.

Agora é só executar a aplicação F5

Abraços

Flávia Moreira