wpf databinding datatrigger to animate a rectangle - wpf

Question

I am using MVVM so I need to bind a rectangle shape a property which will eventually animate it.
I've found few solutions and tried to replicate their approach but the storybroad doesnt kick in
I am including my source code
<Rectangle x:Name="RectangleCompleted" HorizontalAlignment="Left" Height="50" Margin="440,178,0,0" VerticalAlignment="Top" Width="100" Stroke="#FF0BB3AE" StrokeThickness="5" RadiusX="8" RadiusY="7" >
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding Path=Animation}" Value="ON" Comparison="Equal">
<ei:ControlStoryboardAction
Storyboard="{StaticResource MyAnimation}" ControlStoryboardOption="Play"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
<Rectangle.Effect>
<DropShadowEffect RenderingBias="Quality" ShadowDepth="3" Color="#FFD2D6D8"/>
</Rectangle.Effect>
<Rectangle.Fill>
<SolidColorBrush Color="#FFE7F4F6"/>
</Rectangle.Fill>
</Rectangle>
<Window.Resources>
<Storyboard x:Key="MyAnimation">
<DoubleAnimation
Storyboard.TargetName="RectangleCompleted"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
RepeatBehavior="Forever"
AutoReverse="True"/>
</Storyboard>
</Window.Resources>

Answer 1

Is your Animation property a bool or string? If it's a bool you need the value in your trigger check for True or False. If it's a string, then you should be fine with what you got. Provided your implementation of INPC and the Animation property is right this should work fine.
I've put together an example with the code you've posted and you should see it work fine. Download Link
I've made two small change. I've added a Button to toggle the animation to either start or stop and put the entire thing in a StackPanel. Secondly I made the Animation property a bool so just had the Triggers to check for "True" or "False" than the "ON" value you were checking for.
<StackPanel x:Name="LayoutRoot">
<Rectangle x:Name="RectangleCompleted"
Width="100"
Height="50"
RadiusX="8"
RadiusY="7"
Stroke="#FF0BB3AE"
StrokeThickness="5">
<Rectangle.Resources>
<Storyboard x:Key="MyAnimation">
<DoubleAnimation AutoReverse="True"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="RectangleCompleted"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</Rectangle.Resources>
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding Path=Animation}"
Comparison="Equal"
Value="True">
<ei:ControlStoryboardAction ControlStoryboardOption="Play"
Storyboard="{StaticResource MyAnimation}" />
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding Path=Animation}"
Comparison="Equal"
Value="False">
<ei:ControlStoryboardAction ControlStoryboardOption="Stop"
Storyboard="{StaticResource MyAnimation}" />
</ei:DataTrigger>
</i:Interaction.Triggers>
<Rectangle.Effect>
<DropShadowEffect RenderingBias="Quality"
ShadowDepth="3"
Color="#FFD2D6D8" />
</Rectangle.Effect>
<Rectangle.Fill>
<SolidColorBrush Color="#FFE7F4F6" />
</Rectangle.Fill>
</Rectangle>
<Button Command="{Binding ToggleCommand}"
Content="Toggle Animation" />
</StackPanel>
and all ToggleCommand does is:
ToggleCommand = new RelayCommand(() => Animation = !Animation);
Update:
If you just want to trigger your animation when the window loads, all you need is:
<Window.Resources>
<Storyboard x:Key="MyAnimation">
<DoubleAnimation AutoReverse="True"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="RectangleCompleted"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource MyAnimation}" />
</EventTrigger>
</Window.Triggers>