Visibility animation

12-20-2007 12:23 PM |

Is there (or please could there be in future versions) a way to animate the visibility of an element?

Setting visibility to collapsed is recommended practice for improving performance of silverlight applications. As a work around at the moment I'm getting the event for the end of the storyboard and using this to set Visibility = Collapsed on critical items that have had opacity set to 0, and setting Visibility=Visible before the storyboard that makes them visible again. The ability to set visibility in a storyboard would improve separation between the design and the code.

Thanks,
John.

Re: Visibility animation

01-21-2008 7:43 AM |

Yes - this isn't a point about something impossible, it'd just be good to make it more rounded so that it could be handed off to the interaction design environment. 

I definitely agree this isn't something that double animation should be handling. Similarly, adding in a specific visibility animation type would open the door to a lot of others and make a very polluted namespace, so that wouldn't be a good way to go.

I don't know what impact allowing a string animation class would have - I can imagine it having pretty wide impact on the animation system, not to mention confusion over two ways to do somehting and any additional limitations occuring, but it would allow us to control any property through the animation system and I'm left wondering what other scenarios might be enhanced by this broad capability.

 John

Re: Visibility animation

01-24-2008 12:38 AM |

Hi John

You can use the eventhandeler for storyboard completed, in that eventhandeling function u can set the visibility property of object to visible or collapsed.

means when storyboard will completed u r object is vissible or collapsed

Re: Visibility animation

07-11-2008 1:31 PM |

Consider this another request for being able to animate UIElement.Visibility in Silverlight using ObjectAnimationUsingKeyFrames. Doing this Storyboard completed workaround is extremely undesirable especially in situations dealing with WPF XAML compatibility, or dealing with loose SL XAML files when you don't have any code-behind (pretty common for our scenarios). Also, there are effects that are much easier to accomplish by being able to freely animate both properties independently. As a quick example imagine a fade-in strobe effect. You would want to have two separate animations one that simply fades in the object while a secondary animation is constantly flicking on-off visibility. It might not be the best effect but it's a valid one that our customers might want to use, and currently can in WPF quite easily. Currently to implement this effect in SL just using Opacity would require a painstaking amount of KeyFrames... There are workarounds using Clip or maybe OpacityMask, but this seems like a very simple request, and I feel best practices as mentioned above and WPF compatibility should be reasons enough to include this ASAP.

Re: Re: Visibility animation

09-25-2008 6:26 PM |

This storyboard can modify visibility in SL:

<Storyboard x:Name="VisStory">
   <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="00:00:00">
     <DiscreteObjectKeyFrame.Value>
      <Visibility>Collapsed</Visibility>
     </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    <DiscreteObjectKeyFrame KeyTime="00:00:01">
     <DiscreteObjectKeyFrame.Value>
      <Visibility>Visible</Visibility>
     </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
   </ObjectAnimationUsingKeyFrames>
  </Storyboard>

Re: Re: Visibility animation

01-13-2009 10:00 AM |

I have a grid, which i made collapsed by default, in code behind i change its visibility to visible, at that point i want to display it in simple double animation way from bottom to top by using its height property, any suggestion to solve this problem ?

Re: Re: Visibility animation

01-13-2009 10:10 AM |

Your best bet now would be to use visual state manager. Rather than trying to tie additional changes to the visibility change you would set the new state from code and let the storyboards for the new state take care of both the visibility animation and the height change.

Re: Re: Visibility animation

01-13-2009 10:18 AM |

can you please give me little example, i could not understand how i can control this by using view state manager.

I think you are saying that i check the visibility by using view state manager and then call my normal double animation story board if visibility is visible ?

Re: Re: Visibility animation

01-13-2009 10:30 AM |

Do both the object animation and height from the same visual state. Then use code to set the visual state only: 

VisualStateManager.GoToState(this, "Extended", useTransitions);

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="TheStates">

<vsm:VisualState x:Name="Extended">

<Storyboard Duration="00:00:00.25">

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TheElement" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheElement" Storyboard.TargetProperty="Height">

<LinearDoubleKeyFrame KeyTime="00:00:00.25" Value="100"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualState x:Name="Collapsed">

<Storyboard Duration="00:00:00.25">

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TheElement" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.25">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheElement" Storyboard.TargetProperty="Height">

<LinearDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualStateManager.VisualStateGroups>

Re: Re: Visibility animation

01-13-2009 10:37 AM |

thanks for your reply, i simply call storyboard.begin() in my code right after where i make visibility visible of that grid and it works fine.

thanks for your reply.

Re: Re: Visibility animation

10-30-2009 11:06 AM |

Thanks InEir .... This works fine in Silverlight 3

<Storyboard x:Name="VisStory">
   <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="00:00:00">
     <DiscreteObjectKeyFrame.Value>
      <Visibility>Collapsed</Visibility>
     </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    <DiscreteObjectKeyFrame KeyTime="00:00:01">
     <DiscreteObjectKeyFrame.Value>
      <Visibility>Visible</Visibility>
     </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
   </ObjectAnimationUsingKeyFrames>
  </Storyboard>