WPF panel slide in from left animation

Question

I'm trying to get a Panel to animate a sliding in behavior in WPF. The panel with fills from the center out rather than from the left and it only animates the first time.

Below is the markup for my animation.

<Style.Triggers>
        <Trigger  Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="200" Duration="0:0:0.5"
                                         AccelerationRatio="0.2" DecelerationRatio="0.1"
                                         Storyboard.TargetProperty="Width"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>

How do I resolve to move in/out properly?

score 3 · Answer 1 · edited May 23 '17 at 12:13

3

Don't animate properties like "Width", that is what RenderTransforms are for.

To get the behavior you describe ("Sliding in") you want to animate a TranslateTransform from some X off the screen/page to the final position.

To get the behavior your XAML and the rest of your post indicates, you would use a ScaleTransform with the origin set to the left hand side of the panel.

You should also know that the targeting of render transforms can be a little tricky, see this question for more information

Here is the documentation for RenderTransforms (MSDN)

edited May 23 '17 at 12:13

Community

1
1

answered Mar 11 '14 at 16:49

BradleyDotNET

60,462
10
96
117

1

The other answer to this question is a good code example of what I am talking about. – BradleyDotNET Mar 11 '14 at 16:50
It's not appearing from the left side of the screen it's sliding out from another control. That's causing some of the issue. – Brian Triplett Mar 11 '14 at 18:33
@Brian Triplett Then perhaps you do end up wanting the scale transform. Using a ScaleTransform (the ScaleX property) will have the same visual effect as animating width, with the bonus that you can set the transform origin to the left side of the control, generating the effect you asked for. – BradleyDotNET Mar 11 '14 at 18:36
1

ScaleTransform just streches it in (looks more like a bad powerpoint effect). I was looking more for a slide in. I've seen this done with an Expander and may try that. – Brian Triplett Mar 11 '14 at 20:29
1

I agree, ScaleTransform isn't going to look very good. An expander may do you what you want. You may also be able to get away with using a translate transform and setting the parent control's ClipToBounds property to "true" (making it hide any child pieces outside its clip area). – BradleyDotNET Mar 11 '14 at 20:31

score 1 · Answer 2 · answered Jul 02 '20 at 00:57

One should apply and change the TransformTranslate coordinates of the control/panel to move and not its width.

For consideration I will use a Rectangle as our example and if one wanted to move it, we would first set up some anchor coordinates:

<Rectangle Width="100">
   <Rectangle.RenderTransform>
       <TranslateTransform X="0" Y="0" />
   </Rectangle.RenderTransform>
 </Rectangle>

Then to move it from its original position, change the X or Y transform as such. So if we wanted to move it to the right by it size of 100 pixels, we would do a StoryBoard as such:

<Storyboard x:Key="SlideRight">
    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                     From="0" To="100"
                     Duration="0:0:0.3" />
</Storyboard>

This post is one I found when I was trying to do a similar slide in/out process. Because each component is its own post, I wrote a blog article stepping the user through the whole process:

WPF – Panel Slide-In Animation From Left Or Right Side

WPF panel slide in from left animation

2 Answers2