Question

I have a path defined as such:

<Viewbox Visibility="Collapsed"  x:Name="Tick" Grid.Column="1" Grid.Row="1">
   <Canvas MaxWidth="100" MaxHeight="100"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                         Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
         <Path ...Fill="#FF00B800" x:Name="MyPath" (path dimensions, lines, etc) .../>
   </Canvas>
</Viewbox>

Now what I’d like to do is manipulate fill such that it will cause the path to have a fade in/fade out effect. Basically make fills alpha component either move towards opaque or transparent based on whether or not the viewbox the path is inside is Visible. So when visible the path fades in, when collapsed the path fades out.

Answer 1

The effect you are trying achieve is a classy one but there is a serious problem with your current plan. When the Visibility of a higher-level element, Viewbox in this case, is set to Visibility.Collapsed, the element and all sub-elements are immediately no longer visisble. It is at this point that you want the fade-out of the Path to begin.

So the Path is already not visible and starting an animation to gradually reduce its opacity will no do any good because it is already gone. In other words, by the time the visibility is set to Visiblity.Collapsed, it is too late to do anything useful with things inside the element because the user won’t see them. If you could, you would want to see into the future and know that you are going to change the visibility and start an animation so that it finishes before you “close the curtain” on the element.

The same problem doesn’t apply to when we make the element visible because everything is perfect: we become visible and start the fade-in animation. But since half of the effect is not going to work, we still have a big problem.

The solution to this problem is move up a level and see what we’re trying to do. In the XAML we only have passive elements, Viewbox, Canvas, and Path. But maybe these are acting more like controls or assisting controls, for example being the check for a CheckBox or a checkbox-like control.

A control can have states:

• Normal, MouseOver
• Pressed, Disabled
• Unfocused, Focused

and those states can have transition effects, thanks to the VisualStateManager.

So if the fade-in and fade-out effects are part of control behavior, then we have a whole sophisticated powerful toolset available to solve our problem. I don’t know if this is the case in your situation.

Even if it is not the case, a very workable approach to transition effects on Silverlight is to transform your elements into a lookless control, solely for the purpose of utilizing the VisualStateManager, because it makes things so easy. Perhaps this alternative can work in your situation.