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

animation, wpf

Solution

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));
    }
}

Problem

Original source