Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Storyboard Trigger on property changed

I have a DataTemplate that is for a class that implements INotifyPropertyChanged. Is there any way to trigger a storyboard when a property changes and a different storyboard on different values (its a bool in this case)?

And is there any way to trigger a storyboard on startup depending on values on the class that the datatemplate is made for?

like image 777
Peter Avatar asked Jan 24 '23 19:01

Peter


2 Answers

Yes, you can do that.

Add a DataTrigger and bind to the respective property. Here's an example:

<DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=MyProperty}" Value="True">
        <BeginStoryboard Storyboard="{StaticResource myStoryboard}"/>
    </DataTrigger>
</DataTemplate.Triggers>

You can set the value to test for to anything you want. So you could set the storyboard to begin when your value changes to false. You can add as many DataTriggers (or other triggers) as you want.

Notice that in my example I reference a dummy property and storyboard.

When the property changes, the binding will be updated and will fire the trigger because of the databinding.

This technique should also work at startup.

like image 98
Josh G Avatar answered Jan 30 '23 14:01

Josh G


Similar to the poster above, I also used a DataTrigger and then bound it to a property in my ViewModel. The one thing I found confusing was where to put the data trigger. I put it directly in the root node (i.e. Window). I created it using Expression Blend which took care of the tag naming details for me.

Also make sure to include in your project a reference to "Microsoft.Expression.Interactions"

XAML: (this goes directly in the root node)

<Window
   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
   x:Name="window" >

    ...

    <i:Interaction.Triggers>
      <ei:DataTrigger Binding="{Binding FlashingBackground, Mode=OneWay}" Value="ON">
        <ei:ControlStoryboardAction Storyboard="{StaticResource MyAnimation}"     
                                                ControlStoryboardOption="Play"/>
      </ei:DataTrigger>
    </i:Interaction.Triggers>

    ...
</Window>

ViewModel:

 private void TurnOnFlashingBackround()
    {
        FlashingBackground = "ON";
    }

    private string _FlashingBackround = "OFF";

    public string FlashingBackground
    {
        get { return _FlashingBackround; }

        private set
        {
            if (FlashingBackground == value)
            {
                return;
            }

            _FlashingBackround = value;
            this.OnPropertyChanged("FlashingBackground");
        }
    }

    public new event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Finally, the Viewmodel must inherit from "INotifyPropertyChanged"

like image 36
CowboyBebop Avatar answered Jan 30 '23 14:01

CowboyBebop