Porkchops
Porkchops

Reputation: 23

Extend Width In Both Directions

I'm am trying to animate a box width to extend in both left and right direction. Of course it's only extending in the right direction, how would I have it extend in both. Most WPF codes are in C# so I can't really find an answer from Google.

Imports System.Windows.Media.Animation

Class MainWindow
    Private Sub EnlargeBtn_Click(sender As Object, e As RoutedEventArgs) Handles EnlargeBtn.Click

        Dim NewWidth = 300
        Dim widthAnimation As New DoubleAnimation(NewWidth, TimeSpan.FromMilliseconds(1000))
        Box.BeginAnimation(WidthProperty, widthAnimation)
    End Sub
End Class

Upvotes: 1

Views: 118

Answers (2)

Porkchops
Porkchops

Reputation: 23

Figured it out, had to set the HorizontalAlignment to Center and move the left and right margins by half the width

Imports System.Windows.Media.Animation

Class MainWindow
    Private Sub EnlargeBtn_Click(sender As Object, e As RoutedEventArgs) Handles EnlargeBtn.Click

        Dim NewWidth = 300
        Dim widthAnimation As New DoubleAnimation(NewWidth, TimeSpan.FromSeconds(1))
        Dim marginAnimation As New ThicknessAnimation(New Thickness(Box.Margin.Left - NewWidth / 2, Box.Margin.Top, Box.Margin.Right - NewWidth / 2, 0), TimeSpan.FromSeconds(1))
        Box.BeginAnimation(WidthProperty, widthAnimation)
        Box.BeginAnimation(MarginProperty, marginAnimation)

    End Sub
End Class

Upvotes: 0

ChrisF
ChrisF

Reputation: 137148

You need to animate the left position as well as the width.

If you can change the left position you'll need to change the width by twice the amount you're changing the left property by to get the box to grow uniformly in both directions.

If you can't change the left or X property of a Rectangle (because it doesn't appear to have one you can access - MSDN) then the only solution might be to put it inside another container (a Grid or Border) and set it's HorizontalAlignment to Center.

Upvotes: 2

Related Questions