Problème de Binding dans une animation

Version imprimable

J'utilise la modélisation MVVM

J'ai une animation d'un cerle qui se remplit en un temps X.
Une des propriété et de pouvoir définir son temps en seconde.

Dans mon animation je dois binder avec deux propriétés: le temps total (Time qui est une duration) et la moitié du temps (TimeHalf qui est un keytime)

Or bien qu'en debug il passe dans ma propriété, mon animation ne fonctionne pas. Come si le xaml était bindé au mauvais moment

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public Duration Time
        {
            get { return _time; }
            set
            {
                _time = value;
                OnPropertyChanged("Time");
                OnPropertyChanged("TimeHalf");
            }
        }
 
        public KeyTime TimeHalf
        {
            get {
               // var tmp = new TimeSpan(0, 0, 0, 0, (int)_time.TimeSpan.TotalSeconds * 500);
 
                return KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 0, (int)_time.TimeSpan.TotalSeconds * 500));
            }
 
        }

Code sans binding

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<Window x:Class="BuzzerGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas>
        <Path Canvas.Left="150"
              Canvas.Top="150"
              Fill="Blue"
              Stroke="Black">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0 0"
                                IsClosed="True">
                        <LineSegment Point="0 -100" />
                        <ArcSegment x:Name="arc"
                                    Size="100 100"
                                    SweepDirection="ClockWise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="arc"
                            AutoReverse="True"
                            RepeatBehavior="Forever">
                    <PointAnimationUsingPath
                            Storyboard.TargetProperty="Point"
                            Duration="0:0:5">
                        <PointAnimationUsingPath.PathGeometry>
                            <PathGeometry
                                Figures="M 0 -100 A 100 100 0 0 1 0 100
                                                  A 100 100 0 0 1 -1 -100" />
                        </PointAnimationUsingPath.PathGeometry>
                    </PointAnimationUsingPath>
 
                    <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsLargeArc"
                            Duration="0:0:5">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
                        <DiscreteBooleanKeyFrame KeyTime="0:0:2.5" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

Code avec binding

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<Window x:Class="BuzzerGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas>
        <Path Canvas.Left="150"
              Canvas.Top="150"
              Fill="Blue"
              Stroke="Black">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0 0"
                                IsClosed="True">
                        <LineSegment Point="0 -100" />
                        <ArcSegment x:Name="arc"
                                    Size="100 100"
                                    SweepDirection="ClockWise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="arc"
                            AutoReverse="True"
                            RepeatBehavior="Forever">
                    <PointAnimationUsingPath
                            Storyboard.TargetProperty="Point"
                            Duration="{Binding Path=Time}">
                        <PointAnimationUsingPath.PathGeometry>
                            <PathGeometry
                                Figures="M 0 -100 A 100 100 0 0 1 0 100
                                                  A 100 100 0 0 1 -1 -100" />
                        </PointAnimationUsingPath.PathGeometry>
                    </PointAnimationUsingPath>
 
                    <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsLargeArc"
                            Duration="{Binding Path=Time}">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
                        <DiscreteBooleanKeyFrame KeyTime="{Binding Path=TimeHalf}" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

13/04/2011, 20h34
binoo

Salut,

As-tu pensé à définir le DataContext de ta fenêtre ?

Oui, je définis bien mon DataContext. La première propriété Time fonctionne correctement, et je peux mettre le temps que je veux.

Voici le code complet

Window1.Xaml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Window x:Class="BuzzerGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas>
        <Path Canvas.Left="150"
              Canvas.Top="150"
              Fill="Blue"
              Stroke="Black">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0 0"
                                IsClosed="True">
                        <LineSegment Point="0 -100" />
                        <ArcSegment x:Name="arc"
                                    Size="100 100"
                                    SweepDirection="ClockWise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="arc"
                            AutoReverse="False">
                    <PointAnimationUsingPath
                            Storyboard.TargetProperty="Point"
                            Duration="{Binding Path=Time}">
                        <PointAnimationUsingPath.PathGeometry>
                            <PathGeometry
                                Figures="M 0 -100 A 100 100 0 0 1 0 100
                                                  A 100 100 0 0 1 -1 -100" />
                        </PointAnimationUsingPath.PathGeometry>
                    </PointAnimationUsingPath>
 
                    <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsLargeArc"
                            Duration="{Binding Path=Time}">
                        <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
                        <DiscreteBooleanKeyFrame KeyTime="{Binding Path=TimeHalf}" Value="True" />
                    </BooleanAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

Window1.xaml.cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
public partial class Window1 : Window
    {
        public Window1()
        {
           ucChronometerViewModel  viewModel =new ucChronometerViewModel(new System.Windows.Duration(new TimeSpan(0, 0, 4)));
            InitializeComponent();
 
            DataContext = viewModel;
 
            InitializeComponent();
        }
    }

ucChronometerViewModel .cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public class ucChronometerViewModel : ViewModelBase
    {
        private Duration _time;
 
        public ucChronometerViewModel(Duration time)
        {
            _time = time;
        }
 
        public Duration Time
        {
            get { return _time; }
            set
            {
                _time = value;
                OnPropertyChanged("Time");
                OnPropertyChanged("TimeHalf");
            }
        }
 
        public KeyTime TimeHalf
        {
            get {
 
 
                return KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 0, (int)_time.TimeSpan.TotalSeconds * 500));
            }
 
        }
    }

ViewModelBase.cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/// <summary>
    /// Base class for all ViewModel classes in the application. Provides support for 
    /// property changes notification.
    /// </summary>
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        /// <summary>
        /// Raised when a property on this object has a new value.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;
 
        /// <summary>
        /// Warns the developer if this object does not have a public property with
        /// the specified name. This method does not exist in a Release build.
        /// </summary>
        [Conditional("DEBUG")]
        [DebuggerStepThrough]
        public void VerifyPropertyName(string propertyName)
        {
            // verify that the property name matches a real,  
            // public, instance property on this object.
            if (TypeDescriptor.GetProperties(this)[propertyName] == null)
            {
                Debug.Fail("Invalid property name: " + propertyName);
            }
        }
 
        /// <summary>
        /// Raises this object's PropertyChanged event.
        /// </summary>
        /// <param name="propertyName">The name of the property that has a new value.</param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            this.VerifyPropertyName(propertyName);
 
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Il a l'air de mieux apprécier le binding en mettant un x:Name à la fenêtre :

Code:

1
2
3
4
<Window 
  ...
  x:Name="Window1"
  ...

Et en bindant sur le DataContext de cette fenêtre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <Window.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard>
        <Storyboard TargetName="arc"
                            AutoReverse="False">
          <PointAnimationUsingPath
                            Storyboard.TargetProperty="Point"
                            Duration="{Binding ElementName=Window1, Path=DataContext.Time}">
            <PointAnimationUsingPath.PathGeometry>
              <PathGeometry
                                Figures="M 0 -100 A 100 100 0 0 1 0 100
                                                  A 100 100 0 0 1 -1 -100" />
            </PointAnimationUsingPath.PathGeometry>
          </PointAnimationUsingPath>
 
          <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsLargeArc"
                            Duration="{Binding ElementName=Window1, Path=DataContext.Time}">
            <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
            <DiscreteBooleanKeyFrame KeyTime="{Binding ElementName=Window1, Path=DataContext.TimeHalf}" Value="True" />
          </BooleanAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>

14/04/2011, 09h15
Oberown

Ca ne fonctionne pas :(
Je suis en 3.5
J'ai mis un breakpoint dans la propriété TimeHalf, et elle n'est jamais appellé.
14/04/2011, 11h46
binoo

Moi, pour le même framework, le point d'arrêt est atteint, mais le binding de cette propriété n'a pas l'air d'être pris en compte.
Ça fait un truc bizarre à partir de la moitié de l'animation... On n'a plus un disque comme lorsqu'on affecte les valeurs en dur.

Donc je ne sais pas trop...
14/04/2011, 13h38
Oberown

Citation:

Envoyé par binoo

Moi, pour le même framework, le point d'arrêt est atteint, mais le binding de cette propriété n'a pas l'air d'être pris en compte.
Ça fait un truc bizarre à partir de la moitié de l'animation... On n'a plus un disque comme lorsqu'on affecte les valeurs en dur.

Donc je ne sais pas trop...

D'où mon problème :cry:
A moins qu'une personne sache faire le même résultat, mais différemment ?
15/04/2011, 10h45
Oberown
J'ai trouvé ça comme article:

http://blogs.vertigo.com/personal/ti...ost.aspx?ID=16

Mais je n'arrive pas à savoir où il met
Code:

1 2 BindingOperations.IsDataBound((Storyboard)Resources["TransitionControl1ToControl2"], Storyboard.AccelerationRatioProperty); // Arbitrary property.
Et quand je met un x:key dans un storyboard, j'ai un message d'erreur

Citation:

The Key attribute can only be used on a tag contained in a Dictionary (such as a ResourceDictionary)

J'ai fait ça comme correction.
C'est assez violent. Mais bizare qu'il ne bind pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public Window1()
        {
 
            ucChronometerViewModel viewModel = new ucChronometerViewModel(new System.Windows.Duration(new TimeSpan(0, 0, 5)));
            InitializeComponent();
 
            DataContext = viewModel;
 
            InitializeComponent();
 
            var sb = (Storyboard)this.FindName("myStoryBoard");
            var a = (System.Windows.Media.Animation.BooleanAnimationUsingKeyFrames)sb.Children[1];
            var b = (System.Windows.Media.Animation.DiscreteBooleanKeyFrame)a.KeyFrames[1];
            b.KeyTime = viewModel.TimeHalf;
 
        }

Bonjour,

il y a la solution suivante : dans l'animation qui cible la propriété IsLargeArc, tu peux supprimer le binding vers HalfTime, vu que c'est ce qui pose problème, et utiliser un KeyTime à Uniform
Code:

1 2 3 4 5 6 <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsLargeArc" Duration="{Binding Path=Time}"> <DiscreteBooleanKeyFrame KeyTime="Uniform" Value="True" /> <DiscreteBooleanKeyFrame KeyTime="Uniform" Value="True" /> </BooleanAnimationUsingKeyFrames>
Bon, le coup avec les deux valeurs à "True" n'est pas génial, mais ça fait ce que tu veux, sauf la bordure qui 'saute' au milieu de l'animation.

Edit : Ah, j'ai aussi supprimé le premier 'InitializeComponent()' dans le constructeur de Window1. Tu en as besoin ?

binding to property

bonjour
La correction de Oberon concernant le DataContext est bonne & les binding est bonne ,a un detail pres il faut se lier à la classe qui gere l'animation ucChronometerViewModel.
Ensuite on est en WPF - il n' y a pas jamais de valeur absolue pour les proprietes liees(binding)- (c'est l'avantage des dependency property).

correction code xaml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<Window x:Class="BuzzerGame.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" x:Name="Window1">
    <Canvas>
        <Path Canvas.Left="150"
              Canvas.Top="150"
              Fill="Blue"
              Stroke="Black">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0 0"
                                IsClosed="True">
                        <LineSegment Point="0 -100" />
                        <ArcSegment x:Name="arc"
                                    Size="100 100"
                                    SweepDirection="ClockWise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="arc"
                            AutoReverse="True"
                            RepeatBehavior="Forever">
                    <PointAnimationUsingPath
                            Storyboard.TargetProperty="Point"
                            Duration="{Binding Path=Time}">
                        <PointAnimationUsingPath.PathGeometry>
                            <PathGeometry
                                Figures="M 0 -100 A 100 100 0 0 1 0 100
                                                  A 100 100 0 0 1 -1 -100" />
                        </PointAnimationUsingPath.PathGeometry>
                    </PointAnimationUsingPath>
 
                    <BooleanAnimationUsingKeyFrames
                            Storyboard.TargetProperty="IsLargeArc"
                            Duration="{Binding ElementName=ucChronometerViewModel, Path=DataContext.Time}">
                        <!--CORRECTION QUI MARCHE-->
                        <DiscreteBooleanKeyFrame KeyTime="{Binding ElementName=ucChronometerViewModel, Path=DataContext.TimeHalf}" Value="False" />
                        <DiscreteBooleanKeyFrame KeyTime="{Binding ElementName=ucChronometerViewModel, Path=DataContext.TimeHalf}" Value="True" />
                        <DiscreteBooleanKeyFrame></DiscreteBooleanKeyFrame>
                    </BooleanAnimationUsingKeyFrames>
 
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

bon code.........

05/05/2011, 14h39
Oberown

Avant mon chrono était dans une window et ça marchait maintenant que je l'ai mis dans un UserControl ça ne marche plus :(

J'ai mis le sln pour que ça soit plus simple. Mais je ne sais si ça se fait de le mettre.

Le fichier où est le contrôle est ici:
BuzzerGame\View\Control\ucChronometerView.xaml

Présentation rapide du fonctionnement pour mieux comprendre
Le projet est un jeu de quiz qui utilise entre autre des Buzz d'une série de jeu PS2 et PS3
http://www.pushsquare.com/wp-content...09/09/buzz.jpg

Mais pour les personnes qui en ont pas, on peut utiliser le clavier.

Pour arriver sur la page où il y a le chrono, il faut mettre qu'un joueur. Et lorsqu'on arrive sur la fenetre rouge, il faut appuyer sur "espace".
Pour lancer le chronomètre il faut appuyer sur le bouton. Mais le problème quand on appuie une fois le chrono n'est pas bon, mais quand on appuie les autres fois ça fonctionne. Pourquoi ? Que faut-il changer ?

Merci beaucoup de votre aide, j'ai du mal avec le MVVM avec les animations