wpf - 如何使用 WPF 为具有多个固定值的标签内容设置动画？

Question

我想在以下连接对话框中为红色文本设置动画，以便标签内容显示...

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".

我找到了关于动画文本的教程，但没有找到关于文本内容的教程。使用 WPF 可以轻松实现吗？任何帮助/教程链接将不胜感激。

这是我用来生成屏幕截图的 WPF 代码。

<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

您可以使用 ObjectAnimationUsingKeyFrames并设置任何 Duration你喜欢关键帧。

这是一个简单的例子。当您单击连接按钮时，Label “正在连接...”动画将开始，当您再次单击它时 Label会说“已连接”。

<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"/>

在后面的代码中，我添加了 bool 属性 Connecting并实现 INotifyPropertyChanged .

更新 PropertyChanged为空，因为窗口没有 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));
    }
}