CODEWITHSUNDEEP
c#wpf
Martyn Ball
Martyn Ball

Reputation: 4895

Slide Border onto screen

I need to make a border slide from the bottom of the screen into view, however i'm having issues getting the ActualHeight of my border control. Because this is animation code i'm putting it in the code-behind as it's the Views responsibility.

My Border has got it's Loaded event tied to this:

private void NotifcationWindow_Loaded(object sender, RoutedEventArgs e)
{
    SlideFromBottom(sender);
}

The Sender is the Border object, so the SlideFromBottom method SHOULD be able to use this object and get it's height as it has already been rendered.

public void SlideFromBottom(object sender)
{
    //The Notification container
    Border notification = (sender as Border);

    //The screen size
    var workingArea = SystemParameters.WorkArea;

    Storyboard sb = new Storyboard();
    var animation = new DoubleAnimation()
    {
        BeginTime = TimeSpan.FromSeconds(0),
        Duration = TimeSpan.FromSeconds(5),

        // Get the height and turn it to a negative value, and add screen height. 
        From = (notification.ActualHeight * -1),

        //Slide the border into view
        To = notification.ActualHeight
    };
    Storyboard.SetTarget(animation, notification);
    Storyboard.SetTargetProperty(animation, new PropertyPath("(Margin.Bottom)"));

    sb.Begin();
}

I'm not receiving any errors, but the animation isn't playing, have I got something wrong? The Border is Vertically Aligned to the bottom, so the negative margin should take it off the screen.

Upvotes: 0

Views: 105

Answers (1)

Nico Schertler
Nico Schertler

Reputation: 32637

The reason why you're not seeing anything is that you haven't added the animation to the storyboard:

sb.Children.Add(animation);

Then there are some more problems. Such that a part of the margin cannot be animated separately. You would need a ThicknessAnimation.

But there is an easier solution. Use the RenderTransform. If you give your border the following render transform:

<Border>
    <Border.RenderTransform>
        <TranslateTransform/>
    </Border.RenderTransform>
</Border>

, then you can animate it as follows:

// ...
var animation = new DoubleAnimation()
{
    BeginTime = TimeSpan.FromSeconds(0),
    Duration = TimeSpan.FromSeconds(5),                

    From = notification.ActualHeight,

    To = 0
};
Storyboard.SetTarget(animation, notification);
Storyboard.SetTargetProperty(animation, new PropertyPath("RenderTransform.Y"));

sb.Children.Add(animation);
// ...

Upvotes: 1

Related Questions