Given a View such as a Label, if I want to animate a change of BackgroundColor (not Opacity) from one Color to another, how can this be done?
Hello there, I kind of solved your issue with a simple solution. Well you basically make two copies of the element you want to change the background color of , then place them on top of each other (the easiest way to do that is to place them in the same location of the grid ). After that you just start fading the top control to 0 and then back to 1 .
Notice how both labels are in the same position inside the grid, both are in Row 0 and Column 1 , notice that the one you define later will come on the top of the eariler.
In the code behind you do this ,
private async void StartAnimation()
await WhiteLabel.FadeTo(0, 2000);
await WhiteLabel.FadeTo(1, 2000);
I think that you can just use a BoxView. Make sure that your backgroundView is in a Grid and place this boxview on top of it. Next make the boxview the same size as your backgroundView and set the TranslationXof the boxview with the new color to "minus" yourBackgroundView.Width. Then call TranslateXTo(0) on the boxview.
try the ColorTo extension described here: https://blog.xamarin.com/building-custom-animations-in-xamarin-forms/
@JohnHardman - never done it before but I am going to guess Animations is the place to start looking. But I figure you already know that and looking into it further, I am suspecting that Fade, Scale and Rotate are about all you can do in forms.
Hence its custom extension time
Or you can cheat and set a timer to update the color but its a dirty hack.
Never created a custom extension before, so will be back to give it a shot if you don't figure it out in the meantime. So busy at the moment, next time I decide to do a 14 post series on my blog, I need to take a week off.
@ahmadmadi - Many thanks for your answer. Unfortunately, I asked the wrong question, or at least didn't make it as precise as it needed to be. The effect that I'm after is for the old background color to slide sideways, with the new background color sliding in to replace it (so, for instance, the old color sliding out to the right, being replaced by the new color sliding in from the left).
I'll mark your answer as accepted, as it answered the question as I had worded it. If you have any thoughts about the how to implement the sliding background color, that would be much appreciated.
Well the only thing that crosses my mind without trying , is to place two BoxViews on top of each other (over laying each other ) and you keep moving the one on the top (by using translating which will uncover the one below and you will have what you need. This is theory speaking .
@ahmdamadi - a Label with a transparent background color, with two BoxViews behind (one of which is moved using Translate) should do the trick. Thanks again.
@JensDemey - Yes, as the Label and BoxView(s) would be in a Grid with its own BackgroundColor property, the second BoxView is not required. Thanks.
Oh sorry, I was typing this post a few hours ago but I forgot to post it and didn't notice the other answer. Slap myself
Xamarin Inc., as a wholly-owned Microsoft subsidiary acting as a separate legal entity, adheres to the Microsoft Privacy Statement: Privacy & cookies