Creating an animated line using WPF

Matt

9y3k

I would like to create an animated line using WPF where a different segment is shown depending on the option that is selected -- like the one on the BMW website:

https://www.bmwusa.com/byo.html#!/build/color/dflf5yci

On this website, when the user selects different options the animated line moves to the corresponding selection. If the newly selected option is further away, it accelerates more to get there faster.

What control would I use in WPF to achieve this?

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Gupta9y ago
Accepted answer
Hey Matt

Here is a small peice of code that I had chopped from my project
1. Moving Border code
double from = 0;
        void MoveBorder(System.Windows.Controls.Button currentButton)
        {
            var to = currentButton.Margin.Left - 30;
            TranslateTransform trans = new TranslateTransform();
            canBorder.RenderTransform = trans;
            var be = new BackEase();
            be.EasingMode = EasingMode.EaseInOut;
            DoubleAnimation da1 = new DoubleAnimation(from, to, TimeSpan.FromMilliseconds(800));
            da1.EasingFunction = be;
            //trans.BeginAnimation(TranslateTransform.XProperty,da);
            trans.BeginAnimation(TranslateTransform.XProperty, da1);
            from = to;
        }
2. Calling on button click
private void Button_Click(object sender, RoutedEventArgs e)
       {
           var btn = sender as System.Windows.Controls.Button;
           MoveBorder(btn);
       }
I had used BackEase() here for effect, you can change/remove as per your look and feel
BTW, If someone was working on it, it was glad to hear that, I donot understand why someone has downvoted my reply.

Anyway!!
The same has been attached for your information.

Do let me know, if it works for you
Matt9y ago
That is a great example - just what I needed to help figure this out! Thank you so much!
Matt9y ago
Thanks Amit - if you could share some example code that would be really helpful!
Amit Gupta9y ago
@Matt

Don't add borders to multiple stackpanel, it will not execute as smooth as possible.

Moving border should be one.

Well, I had made this type of animation in my past projects. If required I ll be glad to share it.

Do let me know, if it required.
Matt9y ago
Amit -
I've added a border to each stack panel and used DoubleAnimation to animate on BorderThickness. However, when the animation executes the border slowly gets drawn. It doesn't move across all of the options like the animation in the example video I attached. I'm trying to make it behave like that example.

Thanks
Amit Gupta9y ago
Hey Matt

This can be achieved using any shape like (line or border) and a use of DoubleAnimation

Just you need ro change the margin and it will do as per expectation.
Matt9y ago
Thanks for your reply. I've created a screen capture video demonstrating the functionality. At about 8 seconds into the video I begin clicking on the different configuration options. You'll see the bar slide under the option that I choose.

Thanks.
Nilesh Shah9y ago
it is not clear from your question which animation you mean.

I have seen the website but could not exactly identify which animation? the circle which rotates in middle? you can post a pic too.