WPF TextBlock 动画闪烁不起作用答案

【问题标题】：WPF TextBlock animation blinking not workingWPF TextBlock 动画闪烁不起作用
【发布时间】：2019-05-18 17:14:48
【问题描述】：

我有一个 WPF 文本块。 TextBlock 绑定到 MVVM 布尔属性。我正在尝试使其可见或不可见并根据此 MVVM 布尔属性值闪烁。如果是真的，我让它可见并显示 TextBlock 闪烁（我启动情节提要动画），否则，我使它不可见并且不闪烁并停止情节提要动画。下面的代码不起作用。有什么问题？

<Window.Resources>
            <BooleanToVisibilityConverter x:Key="BoolToVis" />

            <Storyboard x:Key="BlinkingAnimation" Duration="0:0:1" RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Black" />
                    <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" />
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red" />
                    <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Style x:Key="BlinkingAnimationStyle" TargetType="{x:Type TextBlock}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=BlinkOn}" Value="true">
                        <DataTrigger.EnterActions>                            
                            <BeginStoryboard x:Name="BlinkingAnimation_BeginStoryboard" Storyboard="{StaticResource BlinkingAnimation}" />                            
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=BlinkOn}" Value="false">
                        <DataTrigger.EnterActions>
                            <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style> 
</Window.Resources>

<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
    <TextBlock x:Name="lblStoryboard" 
               Padding="5"                           
               Width="480"
               Style="{StaticResource BlinkingAnimationStyle}"
               Text="Hey there! I am Blinking!!!" 
               TextWrapping="WrapWithOverflow"
               Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
    </TextBlock>
</Border>

查看模型：

private bool _blinkOn = false;
public bool BlinkOn
{
    get
    {
        return _blinkOn;
    }

    set
    {
        if (_blinkOn== value) return;
        _blinkOn= value;

        OnPropertyChanged("BlinkOn");
    }
}

【问题讨论】：

1) 您使用不同的属性 AlertOn 和 BlinkOn 和 2) 绑定到视图模型属性，您必须使用数据上下文作为绑定源，而不是 RelativeSource.Self跨度>
@dymanoid 天哪！很抱歉！这是在此处键入示例时引入的错误。我已经纠正了我的问题。只有 BlinkOn 属性存在，并且绑定到数据触发器、Border 和 TextBlock。上面的例子它不起作用。

标签： c# wpf mvvm storyboard .net-3.5

【解决方案1】：

您的绑定路径无效。你应该删除RelativeSource={x:Static RelativeSource.Self}。
您需要将Label 的Background 和Foreground 属性设置为SolidColorBrushes，因为您的Storyboard 正在尝试为这些设置动画。

这应该可行：

<Style x:Key="BlinkingAnimationStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=BlinkOn}" Value="true">
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="BlinkingAnimation_BeginStoryboard" Storyboard="{StaticResource BlinkingAnimation}" />
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
            </DataTrigger.ExitActions>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=BlinkOn}" Value="false">
            <DataTrigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

【讨论】：