How can I animate a property dynamically in a Silverlight 4 UserControl?

Question

I've run into a puzzling limitation in a Silverlight 4 UserControl.

What I'm trying to achieve is to have a panel, which slides out from a minimised state when a button is pressed, but the title bar of it should be draggable with which this maximised state can be resized.

What I've done for the sliding out is to animate the MaxHeight property of the parent Grid of this panel which works quite well even with no hardcoded Height for the panel, but I don't know how can I make this dynamic.

Trying to bind a variable from the code-behind to the 'To' parameter of the 'DoubleAnimation' didn't work, it just silently gets ignored.

As I'm creating UserControls to represent Views, the elements with x:Name properties won't get autogenerated.

I tried to work around this using the code below which mimics what happens in the autogenerated code (with the added bonus of only being done after the layout is actually loaded):

public DoubleAnimation PanelOpenMaxHeightDoubleAnimation;

private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)

{

    var LayoutRootreference = sender as Grid;

    PanelOpenMaxHeightDoubleAnimation = ((DoubleAnimation)(LayoutRootreference.FindName("PanelOpenMaxHeightDoubleAnimation")));

    PanelOpenMaxHeightDoubleAnimation.To = 383;

}

This however breaks when trying to set the value of To, as FindName returns null (I have x:Name manually set in XAML for this particular animation to "PanelOpenMaxHeightDoubleAnimation"). I have the sneaking suspicion FindName can't pick DoubleAnimations up from VisualStates, only actual layout children?

I did find the documentation about XAML Namescopes at http://msdn.microsoft.com/en-us/library/cc189026(v=VS.95).aspx#UserControls, but didn't really understand what my options are from this paragraph (other than being very limited):

For the case of a UserControl, there is no equivalent template part attribute convention for parts of the UserControl in the definition XAML, nor is there a template applied at all. Nevertheless, the namescopes between definition and usage remain disconnected, because the definition namescope is defined and then effectively sealed when you package your UserControl into an assembly for reuse. A best practice here is to define your UserControl such that any value that needs to be set to modify the definition XAML is also exposed as a public property of the UserControl.

What does it mean by the last sentence?

Wondering can I do next? Should I try to generate the entire state from code?

dain dain · Accepted Answer · 2010-11-18T12:15:38

Well, managed to work it out so I'm sharing the solution.

Instead of trying to get a reference to the DoubleAnimation in Resources, I named the Grid in the layout I want to animate and get a reference to that using the code in the original question:

var SlidePanel = ((Grid)(LayoutRootreference.FindName("SlidePanel")));

This does return the element and using that it's possible to create a DoubleAnimation and a Storyboard from scratch purely in code. I just used this code example as a starting point: http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx#procedural_code

Best part is, you can change the DoubleAnimation.To parameter even after setting everything up in the Storyboard, so now what I'm doing is just resetting that to my calculated value every time before calling Storyboard.Begin().

It's a bit fiddly to set all these up manually, but at least it works nicely once you do.

How can I animate a property dynamically in a Silverlight 4 UserControl?

1 Answers