情节提要的交互行为和DataTrigger无法正常运行

时间:2019-06-28 08:22:15

标签: c# xaml mvvm uwp

我正在开发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的值更改时,Animation无法正常工作。除非绝对必要,否则我将尽可能避免任何直接的代码隐藏。这甚至是正确的方法吗?我是Xaml Behaviors的新手,因此希望在实现它方面有所帮助。

如果有一种更完善的方法可以实现上述目的,我很乐意了解。谢谢。

1 个答案:

答案 0 :(得分:0)

当行为绑定的数据满足指定条件时,将触发DataTriggerBehavior。您仅绑定到该属性,而未指定任何条件来触发此行为。

  

基本上,当绑定的值在运行时更改时,我试图运行一个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>