Question

I’m trying to build an animation effect where pressing a “button” at the bottom of the screen, causes an animated “slide up” of a StackPanel – a bit like the slide up that’s achieved by an Application Bar when the menu is shown.

I’ve been trying a few effects based on the sample at http://www.cespage.com/silverlight/tutorials/wp7tut24.html which uses animations like:

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                                </Storyboard>

However, using this sample, doesn’t give me the desired effect – as the content container height “jumps” even though the content scale itself is animated.

I’ve also played with animating the container/content height:

                                    <DoubleAnimation Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Height" To="200" Duration="0"/>

… but this doesn’t really work as the Height is overwritten by the StackPanel (and I can’t use MaxHeight as that’s not the right sort of Property for animation).

Any ideas/pointers about what I should be animating?

---

Note – before anyone comments about WP7 design guidelines… this is the customer design/spec and it does seem to fit OK within Metro 🙂

Answer 1

Thanks for the suggestion – I tried a few things… and in the end I went with:

• I placed the expander and its Content inside a container (a Border)
• I used a Grid layout to place this expander on the screen
• I animated a TranslateTransform to slide this expander on/off the screen.

Some condensed code:

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ViewStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="0" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BorderTranslateTransform"
                                                     Storyboard.TargetProperty="Y" To="154" Duration="0"></DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Background="{TemplateBinding Background}"
                            Margin="0,0,0,0">
                        <Border.RenderTransform>
                            <TranslateTransform x:Name="BorderTranslateTransform"></TranslateTransform>
                        </Border.RenderTransform>
                        <Grid>
                            // stuff here
                        </Grid>
                    </Border>