CODEWITHSUNDEEP
.netwpfxamlanimationellipsis
Drew Noakes
Drew Noakes

Reputation: 310917

Animating ellipsis in XAML

Imagine some text:

<TextBlock>Loading...</TextBlock>

I'd like a simple animation of the ellipsis (the ... characters) where it oscillates between ., .. and ... in a slow cycle in order to give the impression that something's happening.

Is there a simple way to do this in XAML for WPF?

Upvotes: 1

Views: 1574

Answers (2)

Lee Louviere
Lee Louviere

Reputation: 5262

If you need something you can sandbox and play with.

class LoadingElipsis : INotifyPropertyChanged
{
    public LoadingElipsis()
    {
        Thread thread = new Thread(this.Spin);
        thread.Start();
    }

    public string Display
    {
        get
        {
            switch(DateTime.Now.Second % 3)
            {
                default: return "Loading.";
                case 1: return "Loading..";
                case 2: return "Loading...";
            }
        }
    }

    protected void Spin()
    {
        while (true)
        {
            Thread.Sleep(1000);
            Notify("Display");
        }
    }

    protected void Notify(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

And the XAML

<Window.Resources>
    <project:LoadingElipsis x:Key="loading" />
</Window.Resources>    
<Grid DataContext="{StaticResource ResourceKey=loading}">
    <TextBlock Text="{Binding Display}" Background="Red"/>
</Grid>

Disclamer: Not a full example, with a formal background thread that can cancel, but with some effort you can get it to report information back from what you're loading, etc.

For those scenarios where a simple XAML animation isn't enough.

Upvotes: 0

Clemens
Clemens

Reputation: 128061

A pure XAML solution might look like this:

<TextBlock>
    <TextBlock.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard Duration="0:0:3" RepeatBehavior="Forever">
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Loading."/>
                        <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="Loading.."/>
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="Loading..."/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>

Upvotes: 8

Related Questions