CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.ios
Alan2
Alan2

Reputation: 24572

Can I make the contents of a page fade-in and fade-out in Xamarin.Forms?

I have a content page that displays words. I get the words from the database, populate a view model which in turn changes label text through bindings and then this code makes the new words visible:

phrasesPageStackLayout.IsVisible = true;

After a few seconds this makes the words disappear:

phrasesPageStackLayout.IsVisible = false;

I get a new word and the process starts again.

In Xamarin.Forms is it possibly for me to make the words fade into view and fade out of view. For example over a period of 3 seconds?

Upvotes: 2

Views: 8419

Answers (3)

Philipp Sumi
Philipp Sumi

Reputation: 987

You may also want to have a look at Xamanimation - you'll get standard animations right out of the box: https://github.com/jsuarezruiz/Xamanimation

Upvotes: 1

Diego Rafael Souza
Diego Rafael Souza

Reputation: 5313

I prefer use reusable approaches, then I've created an extension method to handle with this kind of need:

public static class VisualElementExtensions
{
    public static async System.Threading.Tasks.Task FadeOut(this VisualElement element, uint duration = 400, Easing easing = null)
    {
        await element.FadeTo(0, duration, easing);
        element.IsVisible = false;
    }

    public static async System.Threading.Tasks.Task FadeIn(this VisualElement element, uint duration = 400, Easing easing = null)
    {
        await element.FadeTo(1, duration, easing);
        element.IsVisible = true;
    }
}

You can use it in any VisualElement you wish (Button, Label, Layouts and so on) like this:

phrasesPageStackLayout.FadeOut (); /* I guess 1.5 seconds is too much time to this kind of purpose, but you can do `phrasesPageStackLayout.FadeOut (3000)` if you need. */ 
// Or 
phrasesPageStackLayout.FadeIn (500, Easing.CubicOut)

I hope it helps you.

Upvotes: 2

Ax1le
Ax1le

Reputation: 6643

You can try to use animation to achieve your effect. For example use MyTextLabel.FadeTo(0, 3000); to achieve your FadeOut effect. If you want your label to FadeIn first and then FadeOut try this:

await MyTextLabel.FadeTo(1, 1500);
await MyTextLabel.FadeTo(0, 1500);

Upvotes: 9

Related Questions