Silverlight : Add a visual transition between the states visible and invisible

Question

I would like to add a visual effect (such as fade in, fade out) on a control which the Visibility can change.

I have no idea where to start to do it. I've read a bit about the VisualStateManager and VisualTransform but I still don't know if it's possible and what to do. Can you help me ?

Thanks

Answer 1

What you want is possible.

You need a VisualStateManager which defines a ShowState and a HideState. These in turn define a Storyboard which controls the visibility.

You then call

VisualStateManager.GoToState(uiElement, "ShowState", true);

on your element to send into the "ShowState" with animation. Replacing the state name with "HideState" will hide the element.

The XAML we use for the VisualStateManager is below. It animates the opacity as well so there is a fade in/fade out.

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStates">
            <VisualState x:Name="ShowState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HideState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:01">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

NOTE The KeyTime values on these may need tweaking for your application. Looking at these again I see that the "HideState" times are both 0, which may not give you the effect you want. AnthonyWJones may well have found an error in our application!