How do I properly animate my Border to move to the right

Question

So I have this style that targets my ToggleButton, and I am trying to change the HorizontalAlignment of the border named ThumbCircle from Left to Right, I did read that changing that property is not as easy as just changing the value, I'm going to have to do some sort of LayoutTransform, however that didn't seem to work, when I click my button nothing happens, it doesnt move.

So my question is, how do I get the ThumbCircle to move to the right side of the Border that it's currently placed a.

Corentin Pane · Accepted Answer

Why nothing is showing up

The reason why you don't see anything moving is because you're targeting the (LayoutTransform).(ScaleTransform.ScaleX) property of your ThumbCircle, but it doesn't have any value set to its LayoutTransform property.

If you add this to your ThumbCircle Border:

Then you will see something happening. But you'll see a scaling, not a translation! What you want is to translate from one side to the other.

The intuitive fix doesn't work...

The easiest way would have been to first replace the LayoutTransform with a RenderTransform and the ScaleTransform with a TranslateTransform like this:

Then give a name to your Grid like this:

...

And then animating the X property of the TranslateTransform from 0 to your Grid.ActualWidth like this:

But it is not possible to achieve this as it is not possible to set a Binding on any property of an Animation when used like this, because WPF makes some optimizations that prevent this as explained here.

A XAML-intensive way to do it

So a way to do it is to define proxy elements whose property we animate from 0 to 1 ,and we make the multiplication with MyGrid.ActualWidth at another location.

So your whole XAML style becomes:

And you would need to define two IValueConverter to perform some basic arithmetic operations on your Bindings:

One for multiplying all supplied values in a MultiBinding:

/// 
/// Defines a converter which multiplies all provided values.
/// The given parameter indicates number of arguments to multiply.
/// 
public class MultiMultiplierConverter : IMultiValueConverter {
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
        double result = 1;
        int count = int.Parse((string)parameter);
        for (int i = 0; i < count; i++) {
            result *= (double)values[i];
        }
        return result;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) {
        throw new NotSupportedException("Cannot convert back");
    }
}

And one to multiply the input by -1:

/// 
/// Defines a converter which multiplies the provided value by -1
/// 
public class OppositeConverter : IValueConverter {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
        return (dynamic)value * -1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
        throw new NotSupportedException("Cannot convert back");
    }
}

This is not an elegant way but it works!

How to implement back and forth animations?

So far we managed to animate the thumb to the right, on click. But that's not the whole point, is it?

What we are templating is a ToggleButton: at every click, an animation to the opposite side should be triggered. More exactly, whenever the IsChecked property gets True, we should trigger an animation to the right, and whenever the IsChecked property gets False, we should trigger an animation to the left.

This is possible by adding some Trigger objects in the ControlTemplate.Triggers collection. The Trigger shall be hooked to the IsChecked property (which we have no control over) and listen to its changes. We can specify an EnterAction which is our animation to the right, and an ExitAction which is our animation to the left.

The full Style becomes:

Note that this Trigger is only accepted inside a ControlTemplate.Triggers collection, it is not possible to put such a Trigger in the original Border.Triggers collection, you can read more about it here.

How do I properly animate my Border to move to the right

Answers (1)

Related Questions