André Carlucci

Skeptic .net development

Iniciando animações no ViewModel com Windows Phone

Muita gente me pergunta como iniciar animações no ViewModel usando o padrão MVVM. Neste post, vou mostrar como fiz no meu jogo Caça-Palavras.

Vamos fazer um grid qualquer brilhar verde ou vermelho, dependendo do que nosso ViewModel sinalizar.


Para isso, crie primeiro 2 Storyboards, coloque-os em Resources ou de sua página ou da aplicação:

[xml]
<Storyboard x:Name=”BlinkRed”>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty=”(Panel.Background).(SolidColorBrush.Color)”
Storyboard.TargetName=”MeuGrid”>
<EasingColorKeyFrame KeyTime=”0:0:0.0″ Value=”DarkRed”/>
<EasingColorKeyFrame KeyTime=”0:0:0.2″ Value=”DarkRed”/>
<EasingColorKeyFrame KeyTime=”0:0:0.5″ Value=”{StaticResource PhoneAccentColor}”/>
</ColorAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Name=”BlinkGreen”>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty=”(Panel.Background).(SolidColorBrush.Color)”
Storyboard.TargetName=”MeuGrid”>
<EasingColorKeyFrame KeyTime=”0:0:0.0″ Value=”Green”/>
<EasingColorKeyFrame KeyTime=”0:0:0.2″ Value=”Green”/>
<EasingColorKeyFrame KeyTime=”0:0:0.5″ Value=”{StaticResource PhoneAccentColor}”/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
[/xml]

E o grid que vamos fazer piscar:

[xml]
<Grid x:Name=”MeuGrid”
Background=”{StaticResource PhoneAccentBrush}”
Width=”100″
Height=”100″>

<i:Interaction.Triggers>
<ei:DataTrigger Binding=”{Binding State}” Value=”Wrong”>
<Media:ControlStoryboardAction Storyboard=”{StaticResource BlinkRed}”/>
</ei:DataTrigger>
<ei:DataTrigger Binding=”{Binding State}” Value=”Right”>
<Media:ControlStoryboardAction Storyboard=”{StaticResource BlinkGreen}”/>
</ei:DataTrigger>
</i:Interaction.Triggers>
</Grid>
[/xml]

Reparem na Attached Property que colocamos no Grid: “Interaction.Triggers”. Ela vem da Microsoft.Expression.Interactions.dll, então você deve adicioná-la no seu projeto e referenciá-la em sua view. Essa dll pode ser achada em C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Windows Phone\v7.0\Libraries.

Basicamente, estamos adicionando dois DataTriggers, que estão com Binding na propriedade “State” (pode ser uma enum por exemplo) que deve estar no ViewModel de sua View. Quando seu ViewModel notificar a View (usando INotifyPropertyChanged) que essa propriedade mudou, o trigger será disparado e o StoryBoard de nome “BlinkRed” ou “BlinkGreen” será chamado de acordo com o novo estado da enum (Wrong ou Right).

Simples, não? Deixamos o como a animação acontece somente na View, enquanto a lógica de quando acontece no ViewModel. E viva a testabilidade :)