我如何淡出文字出来，改变它，并消除它回来？ [英] How do I fade text out, change it, and fade it back in?

问题描述

我用了一个DataTemplate一个TextBlock DataGrid中的单元格。我有一项规定，即当的单元格的值更改，文本应该：

I'm using a TextBlock in a datatemplate for a cell in a datagrid. I have a requirement that says when the value of the cell changes, the text should:

• 改变之前淡出


• 值应该更改


• 渐退再次

目前，我用TargetUpdated RoutedEvent触发动画使文本消失，然后再回来。但之后的文本已经在屏幕上改变价值褪色发生。

At the moment I use the TargetUpdated RoutedEvent to trigger an animation to make the text fade away and then come back. But the fade happens after the text has already changed value on screen.

<DataTemplate>
    <Border>
        <TextBlock Name="templateTextBlock" Text="{Binding Path=FirstName, NotifyOnTargetUpdated=True}" />
    </Border>
    <DataTemplate.Triggers>
        <EventTrigger RoutedEvent="Binding.TargetUpdated">
            <BeginStoryboard>
                <Storyboard AutoReverse="True">
                    <DoubleAnimation Storyboard.TargetName="templateTextBlock" Storyboard.TargetProperty="Opacity" To=".1" Duration="0:0:.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

我的问题是我怎么达到所需的效果 - 淡出，改文字，淡入

My question is how do I achieve the effect required - fade out, change text, fade in?

非常感谢。

推荐答案

写的互动行为，应该这样做：

Wrote an interactivity behavior which should do this:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

<TextBlock Text="{Binding Name, NotifyOnTargetUpdated=True}">
    <i:Interaction.Behaviors>
        <b:AnimatedTextChangeBehavior AnimationDuration="0:0:0.1" />
    </i:Interaction.Behaviors>
</TextBlock>

class AnimatedTextChangeBehavior : Behavior<TextBlock>
{
    public Duration AnimationDuration { get; set; }

    private string OldValue = null;
    private string NewValue = null;

    DoubleAnimation AnimationOut;
    DoubleAnimation AnimationIn;

    protected override void OnAttached()
    {
        base.OnAttached();

        AnimationOut = new DoubleAnimation(1, 0, AnimationDuration, FillBehavior.HoldEnd);
        AnimationIn = new DoubleAnimation(0, 1, AnimationDuration, FillBehavior.HoldEnd);
        AnimationOut.Completed += (sOut, eOut) =>
        {
            AssociatedObject.SetCurrentValue(TextBlock.TextProperty, NewValue);
            OldValue = NewValue;
            AssociatedObject.BeginAnimation(TextBlock.OpacityProperty, AnimationIn);
        };

        Binding.AddTargetUpdatedHandler(AssociatedObject, new EventHandler<DataTransferEventArgs>(Updated));
    }

    private void Updated(object sender, DataTransferEventArgs e)
    {
        string value = AssociatedObject.GetValue(TextBlock.TextProperty) as string;
        AssociatedObject.BeginAnimation(TextBlock.OpacityProperty, AnimationOut);
        NewValue =  value;
        if (OldValue == null)
        {
            OldValue = value;
        }
        AssociatedObject.SetCurrentValue(TextBlock.TextProperty, OldValue);
    }
}

如果你不想使用Blend SDK 的交互性这一点，你可以只取code和它重构为一个单独的类，并使用文本块的加载事件做设置。

If you do not want to use the Blend SDK's Interactivity for this you can just take the code and refactor it into a seperate class and use the TextBlock's Loaded event to do the setup.

这篇关于我如何淡出文字出来，改变它，并消除它回来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！