question

cronkropjc-6874 avatar image
0 Votes"
cronkropjc-6874 asked ·

Interaction DataTrigger doesn't work. Could anyone test this example. Perhaps I'm doing something wrong.

Hello everyone,
here's a simplest code the purpose of which is animation launching from ViewModel.
Some people claim that it is working code.
There are not any mistakes. exceptions and it doesn't work.
Could anyone test this example. perhaps I'm doing something wrong?

Note:
it's used wide known interactivity and interaction libraries. Be sure if you had performed a reference to them.
Also it's used MVVM light framework. It doesn't matter. You can create the Property by standard way with INPC.



Thanks for advance!

XAML

 <Window
     x:Class="Ellipse.Move.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
     xmlns:local="clr-namespace:Ellipse.Move"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:Ellipse.Move.ViewModel"
     Title="MainWindow"
     Width="525"
     Height="350"
     mc:Ignorable="d">
    
     <Window.DataContext>
         <vm:MainViewModel />
     </Window.DataContext>
    
     <Grid>
    
         <Canvas
             Name="CanvasWrapper"
             Width="525"
             Height="350">
             <Ellipse
                 Canvas.Left="10"
                 Canvas.Top="10"
                 Width="60"
                 Height="60"
                 Fill="Red">
                 <Ellipse.Resources>
                     <Storyboard x:Key="Movement">
                         <DoubleAnimation
                             Storyboard.TargetProperty="(Canvas.Left)"
                             To="440"
                             Duration="0:0:02" />
                         <DoubleAnimation
                             Storyboard.TargetProperty="(Canvas.Top)"
                             To="250"
                             Duration="0:0:02" />
                     </Storyboard>
                 </Ellipse.Resources>
                    
                 <!--  This trigger is just for testing and works fine!  -->
                 <Ellipse.Triggers>
                     <EventTrigger RoutedEvent="Ellipse.MouseEnter">
                         <EventTrigger.Actions>
                             <BeginStoryboard Storyboard="{StaticResource Movement}" />
                         </EventTrigger.Actions>
                     </EventTrigger>
                 </Ellipse.Triggers>
                    
                 <!--  This trigger doesn't works  -->
                 <i:Interaction.Triggers>
                     <ei:DataTrigger Binding="{Binding Move}" Value="true">
                         <ei:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Movement}" />
                     </ei:DataTrigger>
                 </i:Interaction.Triggers>
             </Ellipse>
         </Canvas>
    
     </Grid>
 </Window>


ViewModel

 using GalaSoft.MvvmLight;
    
 namespace Ellipse.Move.ViewModel
 {
        
     public class MainViewModel : ViewModelBase
     {
    
         // Property definition
         public const string MyPropertyPropertyName = "Move";
    
         private bool _move = true;
    
         public bool Move
         {
             get
             {
                 return _move;
             }
    
             set
             {
                 if (_move == value)
                 {
                     return;
                 }
    
                 _move = value;
                 RaisePropertyChanged(MyPropertyPropertyName);
             }
         }
    
    
           
         public MainViewModel()
         {
                
    
    
    
         }










windows-wpf
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered ·

Hi, you must set the Storyboard.TargetName. Try following demo, check the CheckBox.

 <Window x:Class="WpfApp1.Window30"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:WpfApp30"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
         mc:Ignorable="d"
         Title="Window30" Height="450" Width="800">
   <Window.DataContext>
     <local:MainViewModel />
   </Window.DataContext>
   <Grid>
     <Canvas
              Name="CanvasWrapper"
              Width="525"
              Height="350">
       <Ellipse x:Name="MyEllipse"
                  Canvas.Left="10"
                  Canvas.Top="10"
                  Width="60"
                  Height="60"
                  Fill="Red">
         <Ellipse.Resources>
           <Storyboard x:Key="Movement">
             <DoubleAnimation Storyboard.TargetName="MyEllipse"
                              Storyboard.TargetProperty="(Canvas.Left)"
                              To="440"
                              Duration="0:0:02" />
             <DoubleAnimation Storyboard.TargetName="MyEllipse"
                              Storyboard.TargetProperty="(Canvas.Top)"
                              To="250"
                              Duration="0:0:02" />
           </Storyboard>
         </Ellipse.Resources>
         <!--  This trigger works, if you set Storyboard.TargetName -->
         <i:Interaction.Triggers>
           <ei:DataTrigger Binding="{Binding Move}" Value="true">
             <ei:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource Movement}"/>
           </ei:DataTrigger>
         </i:Interaction.Triggers>
       </Ellipse>
     </Canvas>
     <CheckBox IsChecked="{Binding Move, Mode=TwoWay}"/>
   </Grid>
 </Window>


· 1 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

That works! Thanks.

0 Votes 0 · ·