WPF panel slide in from left animation

Question

I'm trying to get a Panel to animate a sliding in behavior in WPF. I'm new to animations and am having some trouble. The panel with fills from the center out rather than from the left and it only animates the first time. I know I'm doing something wrong so any help would be appreciated. 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>

Answer 1

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)