与 Storyboard 的交互行为和 DataTrigger 不起作用答案

【问题标题】：Interaction Behaviors and DataTrigger with Storyboard not working与 Storyboard 的交互行为和 DataTrigger 不起作用
【发布时间】：2019-11-10 04:52:49
【问题描述】：

我正在开发一个 UWP 应用程序，并且我正在尝试实施 MVVM 方法。基本上，当 Binding 的值在运行时发生变化时，我会尝试运行 Storyboard。

到目前为止，我想出了以下几点：

<UserControl
    ...
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Media="using:Microsoft.Xaml.Interactions.Media">

    <UserControl.Resources>
        <Storyboard x:Name="cValueSB" AutoReverse="True" RepeatBehavior="3">
            <DoubleAnimation To="0" Duration="0:0:0.5" Storyboard.TargetName="cvalue" Storyboard.TargetProperty="(UIElement.Opacity)"/>
        </Storyboard>
        <Storyboard x:Name="hValueSB" AutoReverse="True" RepeatBehavior="3">
            <DoubleAnimation To="0" Duration="0:0:0.5" Storyboard.TargetName="hvalue" Storyboard.TargetProperty="(UIElement.Opacity)"/>
        </Storyboard>
        <Storyboard x:Name="lValueSB" AutoReverse="True" RepeatBehavior="3">
            <DoubleAnimation To="0" Duration="0:0:0.5" Storyboard.TargetName="lvalue" Storyboard.TargetProperty="(UIElement.Opacity)"/>
        </Storyboard>
        <Storyboard x:Name="nValueSB" AutoReverse="True" RepeatBehavior="3">
            <DoubleAnimation To="0" Duration="0:0:0.5" Storyboard.TargetName="nvalue" Storyboard.TargetProperty="(UIElement.Opacity)"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="large">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource ScreenWidthSixForty}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="cvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="hvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="lvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="nvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="cvalue.(Grid.Column)" Value="0"/>
                        <Setter Target="hvalue.(Grid.Column)" Value="1"/>
                        <Setter Target="lvalue.(Grid.Column)" Value="2"/>
                        <Setter Target="nvalue.(Grid.Column)" Value="3"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="middle">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource ScreenWidthThreeSixty}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="cvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="hvalue.(Grid.Row)" Value="2"/>
                        <Setter Target="lvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="nvalue.(Grid.Row)" Value="2"/>
                        <Setter Target="cvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="hvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="lvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="nvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="cvalue.(Grid.ColumnSpan)" Value="2"/>
                        <Setter Target="hvalue.(Grid.ColumnSpan)" Value="2"/>
                        <Setter Target="lvalue.(Grid.Column)" Value="2"/>
                        <Setter Target="nvalue.(Grid.Column)" Value="2"/>
                        <Setter Target="lvalue.(Grid.ColumnSpan)" Value="2"/>
                        <Setter Target="nvalue.(Grid.ColumnSpan)" Value="2"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="mobile">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource ScreenWidthZero}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="cvalue.(Grid.Row)" Value="1"/>
                        <Setter Target="hvalue.(Grid.Row)" Value="2"/>
                        <Setter Target="lvalue.(Grid.Row)" Value="3"/>
                        <Setter Target="nvalue.(Grid.Row)" Value="4"/>
                        <Setter Target="cvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="hvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="lvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="nvalue.HorizontalAlignment" Value="Right"/>
                        <Setter Target="cvalue.(Grid.ColumnSpan)" Value="4"/>
                        <Setter Target="hvalue.(Grid.ColumnSpan)" Value="4"/>
                        <Setter Target="lvalue.(Grid.ColumnSpan)" Value="4"/>
                        <Setter Target="nvalue.(Grid.ColumnSpan)" Value="4"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock
            Grid.ColumnSpan="4"
            Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"
            Text="{Binding Symbol, Mode=OneWay, UpdateSourceTrigger=Default}"/>
        <TextBlock
            Name="cvalue"
            Style="{StaticResource CaptionTextBlockStyle}">
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding CurrentValue, Mode=OneWay, UpdateSourceTrigger=Default}">
                    <Media:ControlStoryboardAction
                        Storyboard="{StaticResource cValueSB}"
                        ControlStoryboardOption="Play"/>
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <Run Text="Current value:"/>
            <Run Text="{Binding CurrentValue, Mode=OneWay, UpdateSourceTrigger=Default}"/>
        </TextBlock>
        <TextBlock
            Name="hvalue"
            Style="{StaticResource CaptionTextBlockStyle}">
            <Run Text="High value:"/>
            <Run Text="{Binding HighValue, Mode=OneWay, UpdateSourceTrigger=Default}"/>
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding HighValue, Mode=OneWay, UpdateSourceTrigger=Default}">
                    <Media:ControlStoryboardAction
                        Storyboard="{StaticResource hValueSB}"
                        ControlStoryboardOption="Play"/>
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </TextBlock>
        <TextBlock
            Name="lvalue"
            Style="{StaticResource CaptionTextBlockStyle}">
            <Run Text="Low value:"/>
            <Run Text="{Binding LowValue, Mode=OneWay, UpdateSourceTrigger=Default}"/>
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding LowValue, Mode=OneWay, UpdateSourceTrigger=Default}">
                    <Media:ControlStoryboardAction
                        Storyboard="{StaticResource lValueSB}"
                        ControlStoryboardOption="Play"/>
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </TextBlock>
        <TextBlock
            Name="nvalue"
            Style="{StaticResource CaptionTextBlockStyle}">
            <Run Text="Net change:"/>
            <Run Text="{Binding NetChangeValue, Mode=OneWay, UpdateSourceTrigger=Default}"/>
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{Binding NetChangeValue, Mode=OneWay, UpdateSourceTrigger=Default}">
                    <Media:ControlStoryboardAction
                        Storyboard="{StaticResource lValueSB}"
                        ControlStoryboardOption="Play"/>
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </TextBlock>
    </Grid>
</UserControl>

我面临的问题是当 Binding 的值发生变化时动画不起作用。除非绝对必要，否则我想尽可能避免任何直接的代码隐藏。这甚至是正确的方法吗？我是 Xaml 行为的新手，所以希望在实施它时得到一些帮助。

如果有更完善的方法来实现上述目标，我很乐意知道。谢谢。

【问题讨论】：

标签： c# xaml mvvm uwp

【解决方案1】：

当行为绑定的数据满足指定条件时触发DataTriggerBehavior。您只是绑定到该属性，但没有指定任何条件来触发此行为。

基本上，当 Binding 的值在运行时发生变化时，我会尝试运行 Storyboard。

根据您的要求，您需要添加ComparisonCondition="NotEqual"，如果您有固定值与绑定的属性值进行比较，您可以添加Value=xxx。

<Interactivity:Interaction.Behaviors>
    <Core:DataTriggerBehavior Binding="{Binding CurrentValue, Mode=OneWay, UpdateSourceTrigger=Default}" ComparisonCondition="NotEqual">
        <Media:ControlStoryboardAction
                    Storyboard="{StaticResource cValueSB}"
                    ControlStoryboardOption="Play"/>
    </Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>

【讨论】：