如何在WinRT XAML中更改其值时为TextBlock设置动画?

时间:2014-05-19 19:28:56

标签: c# xaml windows-runtime winrt-xaml

我有以下Storyboard

<Storyboard x:Name="DeleteStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="StatusTextBlock">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

以及以下TextBlock

<TextBlock x:Name="StatusTextBlock" Text="{Binding Status}">

两者都在SettingsFlyout而非Page

我希望在Storyboard值更改时启动TextBlock

我正在使用MVVM,所以除非绝对必要,否则请不要使用代码隐藏的东西。

我尝试搜索提示并尝试了BehaviorsTriggersVisualState的不同组合,但无处可去。

1 个答案:

答案 0 :(得分:6)

再次,不确定我们是否100%同意。但是,仍然是,你可以做到这一点:

public class MyViewModel : INotifyPropertyChanged
{
    public string Text { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;
}

public void Loaded()
{
    var myBox = new TextBox();
    var myAni = new Storyboard();
    var MyVvm = new MyViewModel();

    // sensible approach
    myBox.TextChanged += (s, e) => myAni.Begin();

    // forced approach
    MyVvm.PropertyChanged += (s, e) =>
    {
        if (e.PropertyName.Equals("Text"))
            myAni.Begin();
    };
}

最后,您是自己应用的开发者。不是我。

如果您愿意使用行为,您也可以这样做:

<Page.Resources>
    <Storyboard x:Name="FadeAway">
        <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBox" d:IsOptimized="True"/>
    </Storyboard>
</Page.Resources>

<TextBox x:Name="textBox">
    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="TextChanged">
            <Media:ControlStoryboardAction Storyboard="{StaticResource FadeAway}"/>
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</TextBox>

我想你可以拥有纯净的&#34;使用行为的MVVM方法。它让你100%XAML,这让一些开发人员感到温暖和模糊;我明白了。而且,我喜欢行为。看。我不想在这里与你争辩,只是顶级方法肯定不是&#34;错误&#34;。

  

详细了解行为:http://blog.jerrynixon.com/2013/10/everything-i-know-about-behaviors-in.html

祝你好运。