using Siliverlight to animate one listbox sliding out and another sliding in ala iPhone

Question

I want to slide listBox1 out and listBox2 in in much the same way as the iPhone Ui navigates in Mail from accounts to folders, to messages etc.

I get the idea of recording storyboards in Blend, and triggering the play. What I'm stumped on at the moment is moving listBox1 out along the X axis, obviously I can change it's location but that doesn't "hide" it. Or to put it another way, how do I move it "off stage"

I should also add that the listbox is in the middle of the app, so just sliding off the edge of the application area doesn't fly as the desired result.

Answer 1

Nikhil Kothari has done some great work in this area.

His framework called Silverlight FX allows you to do animations as you describe.

Take a look here.

Answer 2

After further investigation the solution was very simple. To slide the element "off stage" a Clip area needs to be defined. For example:

   <Grid x:Name="slideContainer" Grid.Row="1" Grid.Column="1" Margin="0">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,640,480"/>
        </Grid.Clip>

Then create an animation that moves the element outside of the clip area.

With all that said, Nikhil Kothari is doing creat work in this area, as TreeUK answered.