How to animate the content of a Label with several fixed values using WPF?

Question

I'd like to animate the text in red in the following connection dialog, so the label content would show...

Frame 1: Connecting
Frame 2: Connecting.
Frame 3: Connecting..
Frame 4: Connecting...
Go to frame 1 if connection isn't established yet.
When connection is established: display "Connected".

I have found tutorials about animating text, but not about text content. Is it something easily doable using WPF? Any help/tutorial links would be appreciated.

Here's the WPF code that I used to generate the screenshot.

<Window x:Class="radar_test_ui.SerialConnectionWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Connection" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Content="COM:" Margin="5,0,5,0" />
        <ComboBox Grid.Row="1" Margin="10,0,10,0">
            <ComboBoxItem Content="COM1" IsSelected="True" />
            <ComboBoxItem Content="COM2" />
            <ComboBoxItem Content="COM3" />
        </ComboBox>
        <Label Grid.Row="2" Content="Baud rate:" Margin="5,10,5,0" />
        <ComboBox Grid.Row="3" Margin="10,0,10,0">
            <ComboBoxItem Content="9600" IsSelected="True" />
            <ComboBoxItem Content="19200" />
        </ComboBox>
        <Separator Grid.Row="4" Margin="0,15,0,15" />
        <Grid Grid.Row="5" Margin="10,0,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Label Content="Connecting..." FontSize="10" Width="100" VerticalAlignment="Bottom" Margin="0,0,0,-5" Name="LabelStatus" />
            <Button Grid.Column="1" Content="Connect" Padding="10,3,10,3" Margin="0,0,10,0" Click="ConnectClick" />
            <Button Grid.Column="2" Content="Cancel" Padding="10,3,10,3" Click="CancelClick" />
        </Grid>
    </Grid>
</Window>

Answer 1

You could use ObjectAnimationUsingKeyFrames and set whatever Duration you like for the key frames.

Here's a simple example. When you click the connect button the Label animation for "Connecting.." will start and when you click it again the Label will say "Connected".

<Label Name="LabelStatus" FontSize="10" Width="100" VerticalAlignment="Bottom" Margin="0,0,0,-5">
    <Label.Style>
        <Style TargetType="Label">
            <Setter Property="Content" Value="Connecting..."/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Connecting}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Content">
                                <ObjectAnimationUsingKeyFrames Duration="00:00:04"
                                                                RepeatBehavior="Forever">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00"
                                                            Value="Connecting"/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:01"
                                                            Value="Connecting."/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:02"
                                                            Value="Connecting.."/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:03"
                                                            Value="Connecting..."/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetProperty="Content">
                                <ObjectAnimationUsingKeyFrames Duration="00:00:00">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00"
                                                            Value="Connected"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Label.Style>
</Label>
<Button Grid.Column="1" Content="Connect" Padding="10,3,10,3" Margin="0,0,10,0"
        Click="ConnectClick"/>

And in the code behind I added the boolean property Connecting and implemented INotifyPropertyChanged.

Update
PropertyChanged is null because the window doesn't have a DataContext.

public MainWindow()
{
    InitializeComponent();
    this.DataContext = this;
}

private bool _connecting;
public bool Connecting
{
    get { return _connecting; }
    set
    {
        _connecting = value;
        OnPropertyChanged("Connecting");
    }
}

private void ConnectClick(object sender, RoutedEventArgs e)
{
    Connecting = !Connecting;
}

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