当TextBox文本通过绑定更改时启动情节提要



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

谁有主意,如何开始故事板?

谢谢。

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模式,x:Bind方法中的this.std.Begin();将破坏MVVM模式。

最新更新