creating a view within a custom control to hide parts

I'm creating a custom Silverlight control for Silverlight (specifically wp7). My control is mostly a button ,and when someone taps the button , I want to animate a tall rectangle filled with other contents that flys out from behind the button.

The issue is I do not know how to hide or only draw parts of this rectangle as I comes out. For ex开发者_如何转开发ample, when this rectangle is half way out,only the top half is showing while the rest is hidden. How can I do this without having to write some complex code? Presumably I just need to be able to define some sort of 'view' where only things inside this view are rendered to the screen.

Thoughts? Any help is appreciated!

---

You can use VisualStateManager to define possible visual states for your view. In addition, you can define transitions between those states (incuding animations). In your button's Click event handler you'd need to tell the VisualStateManager to transit to a different state - and you're done.

http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.gotostate%28v=vs.95%29.aspx

This would probably look like this in your view's code behind :

void OnClick(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "StateName", true);
}

In order to easily define the animations, you can use Expression Blend 4

---

In order to ensure that only the parts of the animating rectangle that are within the parent container are shown and nothing outside of that, you need to be able to clip the parent's children to it's bounds. Unfortunately, there is no ClipToBounds property in Silverlight, but you can use Colin Eberhardt's clipping attached behavior to achieve the same effect.