Discussion :

[Oberown]

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 C# :

Sélectionner tout - Visualiser dans une fenêtre à part

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 XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[binoo]

Salut,

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

[Oberown]

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 XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 C# :

Sélectionner tout - Visualiser dans une fenêtre à part

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 C# :

Sélectionner tout - Visualiser dans une fenêtre à part

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 C# :

Sélectionner tout - Visualiser dans une fenêtre à part

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));
            }
        }
    }

[binoo]

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

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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é.

[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...