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

时间:2016-01-06 16:05:16

标签: xaml triggers textbox storyboard uwp

我正在编写适用于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>

谁有想法,如何启动故事板?

感谢。

1 个答案:

答案 0 :(得分:2)

UWP应用程序不支持

EventTrigger,因为@Chris W.说,如果您只想使用XAML执行此操作,则可以使用ControlStoryboardAction行为。

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

您也可以使用x:Bind和后面的代码执行此操作。我在下面写了一个示例,第一个TextBox名为“txt”使用x:Bind,第二个TextBox名为“DataTriggerTB”使用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模式。