当通过绑定更改 TextBox 文本时启动 Storyboard答案

【问题标题】：Start Storyboard when TextBox Text changed via binding当通过绑定更改 TextBox 文本时启动 Storyboard
【发布时间】：2016-04-10 19:13:22
【问题描述】：

我正在编写一个适用于 Windows (W10 + WP10) 的通用应用程序，并想启动一个情节提要，然后显示作为绑定的文本已更改。

第一次尝试：

<TextBlock Text="{Binding ASH}">
 <TextBox.Triggers>
  <EventTrigger RoutedEvent="Binding.TargetUpdated" >
   <BeginStoryboard >
    <Storyboard>
     <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" From="Red" To="Transparent" Duration="0:1:0" />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </TextBox.Triggers>
</TextBlock>

第二次尝试：

<TextBlock Text="{Binding ASH}">
 <TextBox.Triggers>
  <EventTrigger RoutedEvent="TextBlock.DataContextChanged" >
   <BeginStoryboard >
    <Storyboard>
     <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" From="Red" To="Transparent" Duration="0:1:0" />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </TextBox.Triggers>
</TextBlock>

谁有想法，如何开始故事板？

谢谢。

【问题讨论】：

您是否只需要 XAML 并安装了行为包？您可以使用 ControlStoryboardAction 行为。

标签： xaml triggers textbox storyboard uwp

【解决方案1】：

EventTrigger 在 UWP 应用中不受支持，正如 @Chris W. 所说，如果您只想使用 XAML 执行此操作，则可以使用 ControlStoryboardAction 行为。

但在使用之前，您必须将 Microsoft.Xaml.Behaviors.Uwp.Managed 包添加到应用的引用中。要添加此引用，您可以从 NuGet 获取。

您也可以使用x:Bind 和后面的代码来执行此操作。我在下面写了一个示例，第一个名为“txt”的TextBox 使用x:Bind，第二个名为“DataTriggerTB”的TextBox 使用ControlStoryboardAction 行为。

XAML：

<Page
    x:Class="StoryBoardApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StoryBoardApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
    mc:Ignorable="d">

    <Page.Resources>
        <Storyboard x:Name="StoryboardSample">
            <ColorAnimation Duration="0:0:3" To="Transparent" From="Red"
                Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                Storyboard.TargetName="DataTriggerTB" />
        </Storyboard>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Storyboard x:Key="std" x:Name="std" >
                <ColorAnimation Storyboard.TargetName="brush" Storyboard.TargetProperty="Color" From="Red" To="Transparent" Duration="0:0:3" />
            </Storyboard>
        </Grid.Resources>
        <TextBox x:Name="txt"  Text="{x:Bind text, Mode=TwoWay}" Width="300" Height="200" >
            <TextBox.Background>
                <SolidColorBrush x:Name="brush"/>
            </TextBox.Background>
        </TextBox>


        <TextBox VerticalAlignment="Bottom" Width="300" Height="200" x:Name="DataTriggerTB">
            <Interactivity:Interaction.Behaviors>
                <Interactions:DataTriggerBehavior Binding="{Binding Text, ElementName=DataTriggerTB}" ComparisonCondition="NotEqual" Value="{Binding Text, ElementName=DataTriggerTB}">
                    <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardSample}" />
                </Interactions:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </TextBox>
    </Grid>
</Page>

后面的代码：

public sealed partial class MainPage : Page, INotifyPropertyChanged
{

    public MainPage()
    {
        this.InitializeComponent();                       
    }

        public event PropertyChangedEventHandler PropertyChanged;

        private string _text;

        public string text
        {
            get { return _text; }
            set
            {
                if (value != _text)
                {
                    _text = value;
                    OnPropertyChanged();
                }
            }
        }

        private void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (this.PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                this.std.Begin();
            }
        }
}

但如果你使用的是 MVVM 模式，this.std.Begin(); 中的 x:Bind 方法会破坏 MVVM 模式。

【讨论】：