Search code examples
storyboarddatatrigger

use data trigger control the storyboard, but only trigger one time


I use a data trigger to control some storyboards, but it only can be trigger one time.

 <Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">           
        <Setter Property="Width" Value="200" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding para}" Value="0">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
              To="500" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>                 
            </DataTrigger>
            <DataTrigger Binding="{Binding para}" Value="1">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
              To="200" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>                   
            </DataTrigger>            
        </Style.Triggers>
    </Style>
<Button Style="{StaticResource PropertyTriggerExampleButtonStyle}">
        button width will be changed
    </Button>

The para is a variable (already implement INotifyPropertyChanged interface)which will be control by another button. its value is 0 or 1.

But when I click the button to change the para value, the storyboard only trigger one time for every value(0 and 1). It will never trigger later.

If I put the second storyboard into ExitActions tag of the first data trigger. it will work well. But I have more than 2 storyboard need control......

following code works well,but I need control many storyboard (more than 2) according to different value....

<Style.Triggers>
            <DataTrigger Binding="{Binding para}" Value="0">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" To="500" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>     
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>                       
        </Style.Triggers>

Solution

  • You can use System.Windows.Interaction.Interactivity with condition to launch storyboards.

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

    <Border x:Name="brd" MinWidth="20" Height="20">
    <TextBlock Text="{Binding Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Border.Resources>
        <Storyboard x:Key="Story" Duration="1000"
                Storyboard.TargetName="brd"
                Storyboard.TargetProperty="Background">
            <ObjectAnimationUsingKeyFrames>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="#81bb8c" />
                <DiscreteObjectKeyFrame KeyTime="0:0:0.9" Value="{x:Null}" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Story2" Duration="1000"
                Storyboard.TargetName="brd"
                Storyboard.TargetProperty="Background">
            <ObjectAnimationUsingKeyFrames>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="#bb818c" />
                <DiscreteObjectKeyFrame KeyTime="0:0:0.9" Value="{x:Null}" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Border.Resources>
    <i:Interaction.Triggers>
        <ei:DataTrigger Binding="{Binding LastClick}" Value="0"
                Comparison="GreaterThan">
            <ei:ControlStoryboardAction 
                 Storyboard="{StaticResource Story}" ControlStoryboardOption="Play" />
        </ei:DataTrigger>
        <ei:DataTrigger Binding="{Binding LastClick}" Value="0"
                Comparison="LessThan">
            <ei:ControlStoryboardAction 
                 Storyboard="{StaticResource Story2}" ControlStoryboardOption="Play" />
        </ei:DataTrigger>
    </i:Interaction.Triggers></Border>