One of the great things about WPF is its ability to let you use animation to enhance your user interface. (Or wreck it if you go too far!) In my opinion, subtle animations can go a long way towards improving the user experience.
One particular way is to fade colors in and out so that text seems to appear and disappear in a way that gives the impression of movement, but without any jarring visual effects.
Doing this in the XAML markup is well documented and you will find many examples around the place. However, I recently had a situation where I wanted to create this animation in the VB code behind. Now, I knew that anything that could be done in XAML can be done in VB, but when it came down to the task it actually caused me more problems than I'd expected. And when I started to search for answers, it took a while.
It turned out that the reason for my difficulty was a fundamental misunderstanding on my part. I was thinking "color" as being the element to change or animate; in reality it doesn't work quite like that. But after a good deal of trial and error, I eventually hit on the answer.
In this case I wanted to fade the text on a button from its original black to white. But because I would use this effect in a number of situations, including some where there was no user driven event to fire it, I decided that putting the animation instructions in the code behind was the way to go.
I'll start with the XAML though, as I think that in most cases this will be your preferred route. I'll cover the VB approach at the end.
here's the XAML:
<Button Margin="30,67,0,111" Name="Button1" Foreground="Black" HorizontalAlignment="Left">Animated Button</Button>
<Button HorizontalAlignment="Right" Margin="0,77,96,111" Name="Button2" Click="Button2_Click" Content="Animated Button" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard TargetProperty="Foreground.Color">
<ColorAnimation To="White" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Most of it is pretty straightforward:
1. Having first created the button and set its main visual properties, we create a Triggers block for the Button.
2. Next we identify the trigger to be used to fire this animation. In this case it is the Button's Click event.
3. The Storyboard is then created and we identify the Target Property which is the Foreground Color of the button.
4. Finally, the animation details which comprise the starting color, the ending color and the duration in seconds.
The remainder of that code snippet are closing tags.
Now it's the fact that the TargetProperty is identified as the Foreground.Color that threw me off the track when I came to create a VB version of this task. I was trying to find a way of assigning the animation directly to the Foreground Color of the button (or the Button.Content Color or various other permutations - none of which worked).
The reason is that you have to set the animation on a Brush, and not directly to the Foreground property. You then assign this brush as the one to be used for the Foreground. And finally, when you run the animation to change the color of the brush, the animation is then seen to be applied to the Foreground. I hope that makes sense!
Here's the VB code that does this:
' Create color animation sequence.
Dim blackToWhite As ColorAnimation = New ColorAnimation(Colors.White, New Duration(New TimeSpan(0, 0, 2)))
'Create a new brush and apply the color animation to the brush
Dim scb As SolidColorBrush = New SolidColorBrush(Colors.Black)
scb.BeginAnimation(SolidColorBrush.ColorProperty, blackToWhite)
'Assign the brush to Button's Foreground
Button1.Foreground = scb
Like all these little glitches and gotchas, you wonder how it seemed so difficult once you've seen the answer. But as we all know, it's really easy to set yourself off on the wrong mindset and find yourself needlessly chasing your tail trying to get the exact syntax for what you're trying to achieve. Hopefully if you need to run this kind of animation in code, you'll now be saved a bit of potential frustration.