[StoryBoard] changer la proprieté d'un control

**ikeas** · 28/01/2020, 10h20

Bonjour,

Jai un control type ControlElevator qui as une proprieté running
j'amerais dans un trigger changer cette proprieté comme cela

Code :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<Style TargetType="{x:Type local:ControlElevator}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ControlElevator}">
                <Grid>
                    <Rectangle Fill="LightGray"
                                StrokeThickness="2"
                                Stroke="gray"
                                RadiusX="4"
                                RadiusY="4" />
                    <local:StageSeparator StageHeight="115" />
                    <Grid Margin="5">
                        <Grid HorizontalAlignment="Left"
                                Height="105"
                                VerticalAlignment="Bottom"
                                Width="100"
                                x:Name="PART_Elevator">
                            <Rectangle Fill="#FFC8BEBE"
                                        Margin="0"
                                        Stroke="#FF6E6C6C" />
                            <StackPanel VerticalAlignment="Top"
                                        Orientation="Horizontal"
                                        HorizontalAlignment="Center"
                                        Margin="2">
                                <Path Fill="Gray"
                                        x:Name="PART_INDICATOR_UP"
                                        Data="M47.873962,0.50105619 C49.008083,0.46726847 50.634239,1.2477553 51.269238,2.347605 51.282467,2.370518 59.755447,17.046146 59.779068,17.087063 60.746685,18.763023 60.174038,20.905153 58.500031,21.871644 57.872276,22.234076 57.178787,22.37972 56.506115,22.331817 56.506115,22.331817 39.308651,22.293319 39.308651,22.293319 L39.294895,22.293952 C38.675663,22.307523 38.044834,22.156819 37.469059,21.824008 35.794075,20.85583 35.219269,18.713121 36.185196,17.038136 36.245567,16.93345 44.644516,2.3560188 44.68018,2.3072503 45.98925,0.51712847 47.873962,0.50105619 47.873962,0.50105619 z"
                                        Height="15"
                                        Stretch="Fill"
                                        StrokeThickness="0"
                                        Width="15"
                                        Margin="1" />
                                <Path Fill="gray"
                                        x:Name="PART_INDICATOR_DOWN"
                                        Margin="1"
                                        Data="M36.007381,0.50000286 C36.091949,0.49989653 36.176357,0.50286007 36.260441,0.50884819 36.260441,0.50884771 53.457817,0.54734468 53.457817,0.54734516 L53.471573,0.54671192 C54.090801,0.53314114 54.721626,0.68384075 55.297401,1.0166411 56.972374,1.9847898 57.547176,4.1274335 56.581257,5.8023673 56.520885,5.9070504 48.121979,20.484037 48.086315,20.532804 46.777252,22.322872 44.892551,22.338943 44.892551,22.338943 43.758434,22.37273 42.132286,21.592268 41.497292,20.492451 41.484062,20.469538 33.011128,5.7943578 32.987507,5.7534424 32.019894,4.077533 32.592537,1.9354682 34.266537,0.96900749 34.815819,0.65188837 35.415428,0.50074339&#xD;&#xA;36.007381,0.50000286 z"
                                        Height="15"
                                        Stretch="Fill"
                                        StrokeThickness="0"
                                        Width="15" />
                            </StackPanel>
                            <Grid Margin="5 20 5 0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Rectangle Fill="White"
                                            Stroke="#FF6E6C6C"
                                            Grid.ColumnSpan="2" />
                                <Border x:Name="left_door"
                                        Background="#FFC8BEBE"
                                        BorderBrush="#FF6E6C6C"
                                        Grid.Column="0"
                                        Margin="1 1 0 1"
                                        BorderThickness="0 0 1 0"
                                        RenderTransformOrigin="0.5,0.5" />
                                <Border x:Name="right_door"
                                        Background="#FFC8BEBE"
                                        BorderBrush="#FF6E6C6C"
                                        Grid.Column="1"
                                        Margin="0 1 1 1"
                                        BorderThickness="1 0 0 0"
                                        RenderTransformOrigin="0.5,0.5" />
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ElevatorDirection"
                                Value="Up">
                        <Setter Property="Fill"
                                TargetName="PART_INDICATOR_UP"
                                Value="red" />
                    </Trigger>
                    <Trigger Property="ElevatorDirection"
                                Value="Down">
                        <Setter Property="Fill"
                                TargetName="PART_INDICATOR_DOWN"
                                Value="red" />
                    </Trigger>
                    <Trigger Property="IsOpen"
                                Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                        Storyboard.TargetName="left_door"
                                                        Duration="0:0:1"
                                                        FillBehavior="HoldEnd"
                                                        To="1 1 42.5 1" />
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                        Storyboard.TargetName="right_door"
                                                        Duration="0:0:1"
                                                        FillBehavior="HoldEnd"
                                                        To="42.5 1 1 1" />
                                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="Running"
                                                                    Duration="0:0:1">
                                        <DiscreteBooleanKeyFrame Value="True"
                                                                    KeyTime="0" />
                                        <DiscreteBooleanKeyFrame Value="false"
                                                                    KeyTime="0:0:1" />
                                    </BooleanAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                        Storyboard.TargetName="left_door"
                                                        Duration="0:0:1"
                                                        FillBehavior="HoldEnd"
                                                        To="1 1 0 1" />
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                        Storyboard.TargetName="right_door"
                                                        Duration="0:0:1"
                                                        FillBehavior="HoldEnd"
                                                        To="0 1 1 1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

je ne sais pas trop ce qu'il faut mettre dans BooleanAnimationUsingKeyFrames
pour changer la DP running du control plutot qu'une proprieté d'un des elements interne au style

si vous avez une idee

**MABROUKI** · 28/01/2020, 20h44

bonjour

Pas tres beau mais voici un exemple MS .
Article MSDN HELP accompagnant ce code

" The following example uses the BooleanAnimationUsingKeyFrames class to animate the IsEnabled property of a Button control. All the key frames in this example use an instance of the DiscreteBooleanKeyFrame class. Discrete key frames like DiscreteBooleanKeyFrame create sudden jumps between values, that is, the movement of the animation is jerky."

"jerky" veut dire sautillant alas.

code xaml du form :

Code XAML :

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
 
<!-- Demonstrates a BooleanAnimationUsingKeyFrames. The animation is used to
     animate the IsEnabled property of a button. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="KeyFrameBoolean Animation Example">
 
 
  <StackPanel Orientation="Vertical" Margin="20">
 
    <TextBlock>
        Click the button to animate its IsEnabled property with a 
        BooleanAnimationUsingKeyFrames animation.
    </TextBlock>
 
    <Button Name="myAnimatedButton" Margin="200">Click Me
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <BooleanAnimationUsingKeyFrames 
                Storyboard.TargetName="myAnimatedButton" 
                Storyboard.TargetProperty="IsEnabled"
                Duration="0:0:4" FillBehavior="HoldEnd">
 
                <!-- All the key frames below are DiscreteBooleanKeyFrames. Discrete key frames create 
                sudden "jumps" between values (no interpolation). Only discrete key frames can be used 
                for Boolean key frame animations. -->
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:3.5" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:4" />
              </BooleanAnimationUsingKeyFrames>            
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

bon code...

**ikeas** · 29/01/2020, 07h23

pour info j'ai trouvé une solution qui fonctionne en collant deux triggers
l'un en interne dans le controltemplate et l'autre sur le style

pour info c'est l'animation des portes d'un ascenseur et l'animation de changement d’étage
je vous file tout le code si ça peut vous intéresser

Code XAML :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
  <Style TargetType="{x:Type local:ControlElevator}">
        <Setter Property="IsOpen"
                Value="False" />
        <!--<Setter Property="Running"
                Value="false" />-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ControlElevator}">
                    <Grid>
                        <Rectangle Fill="LightGray"
                                   StrokeThickness="2"
                                   Stroke="gray"
                                   RadiusX="4"
                                   RadiusY="4" />
                        <local:StageSeparator StageHeight="115" />
                        <Grid Margin="5">
                            <Grid HorizontalAlignment="Left"
                                  Height="105"
                                  VerticalAlignment="Bottom"
                                  Width="100"
                                  x:Name="PART_Elevator">
                                <Rectangle Fill="#FFC8BEBE"
                                           Margin="0"
                                           Stroke="#FF6E6C6C" />
                                <StackPanel VerticalAlignment="Top"
                                            Orientation="Horizontal"
                                            HorizontalAlignment="Center"
                                            Margin="2">
                                    <Path Fill="Gray"
                                          x:Name="PART_INDICATOR_UP"
                                          Data="M47.873962,0.50105619 C49.008083,0.46726847 50.634239,1.2477553 51.269238,2.347605 51.282467,2.370518 59.755447,17.046146 59.779068,17.087063 60.746685,18.763023 60.174038,20.905153 58.500031,21.871644 57.872276,22.234076 57.178787,22.37972 56.506115,22.331817 56.506115,22.331817 39.308651,22.293319 39.308651,22.293319 L39.294895,22.293952 C38.675663,22.307523 38.044834,22.156819 37.469059,21.824008 35.794075,20.85583 35.219269,18.713121 36.185196,17.038136 36.245567,16.93345 44.644516,2.3560188 44.68018,2.3072503 45.98925,0.51712847 47.873962,0.50105619 47.873962,0.50105619 z"
                                          Height="15"
                                          Stretch="Fill"
                                          StrokeThickness="0"
                                          Width="15"
                                          Margin="1" />
                                    <Path Fill="gray"
                                          x:Name="PART_INDICATOR_DOWN"
                                          Margin="1"
                                          Data="M36.007381,0.50000286 C36.091949,0.49989653 36.176357,0.50286007 36.260441,0.50884819 36.260441,0.50884771 53.457817,0.54734468 53.457817,0.54734516 L53.471573,0.54671192 C54.090801,0.53314114 54.721626,0.68384075 55.297401,1.0166411 56.972374,1.9847898 57.547176,4.1274335 56.581257,5.8023673 56.520885,5.9070504 48.121979,20.484037 48.086315,20.532804 46.777252,22.322872 44.892551,22.338943 44.892551,22.338943 43.758434,22.37273 42.132286,21.592268 41.497292,20.492451 41.484062,20.469538 33.011128,5.7943578 32.987507,5.7534424 32.019894,4.077533 32.592537,1.9354682 34.266537,0.96900749 34.815819,0.65188837 35.415428,0.50074339&#xD;&#xA;36.007381,0.50000286 z"
                                          Height="15"
                                          Stretch="Fill"
                                          StrokeThickness="0"
                                          Width="15" />
                                </StackPanel>
                                <Grid Margin="5 20 5 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Fill="White"
                                               Stroke="#FF6E6C6C"
                                               Grid.ColumnSpan="2" />
                                    <Border x:Name="left_door"
                                            Background="#FFC8BEBE"
                                            BorderBrush="#FF6E6C6C"
                                            Grid.Column="0"
                                            Margin="1 1 0 1"
                                            BorderThickness="0 0 1 0"
                                            RenderTransformOrigin="0.5,0.5" />
                                    <Border x:Name="right_door"
                                            Background="#FFC8BEBE"
                                            BorderBrush="#FF6E6C6C"
                                            Grid.Column="1"
                                            Margin="0 1 1 1"
                                            BorderThickness="1 0 0 0"
                                            RenderTransformOrigin="0.5,0.5" />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ElevatorDirection"
                                 Value="Up">
                            <Setter Property="Fill"
                                    TargetName="PART_INDICATOR_UP"
                                    Value="red" />
                        </Trigger>
                        <Trigger Property="ElevatorDirection"
                                 Value="Down">
                            <Setter Property="Fill"
                                    TargetName="PART_INDICATOR_DOWN"
                                    Value="red" />
                        </Trigger>
                        <Trigger Property="IsOpen"
                                 Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                            Storyboard.TargetName="left_door"
                                                            Duration="0:0:1"
                                                            FillBehavior="HoldEnd"
                                                            To="1 1 42.5 1" />
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                            Storyboard.TargetName="right_door"
                                                            Duration="0:0:1"
                                                            FillBehavior="HoldEnd"
                                                            To="42.5 1 1 1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                            Storyboard.TargetName="left_door"
                                                            Duration="0:0:1"
                                                            FillBehavior="HoldEnd"
                                                            To="1 1 0 1" />
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin"
                                                            Storyboard.TargetName="right_door"
                                                            Duration="0:0:1"
                                                            FillBehavior="HoldEnd"
                                                            To="0 1 1 1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsOpen"
                     Value="true">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="Running"
                                                            Duration="0:0:1">
                                <DiscreteBooleanKeyFrame Value="True"
                                                         KeyTime="0" />
                                <DiscreteBooleanKeyFrame Value="false"
                                                         KeyTime="0:0:1" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="Running"
                                                            Duration="0:0:1">
                                <DiscreteBooleanKeyFrame Value="True"
                                                         KeyTime="0" />
                                <DiscreteBooleanKeyFrame Value="false"
                                                         KeyTime="0:0:1" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>

code control

Code :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 public class ControlElevator : Control
    {
        private const double EVELATOR_SIZE = 115D;
        private const double TIME_ONE_ELEVATION = 1D;
 
        static ControlElevator()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ControlElevator),
                new FrameworkPropertyMetadata(typeof(ControlElevator)));
        }
 
        #region ElevatorDirection (DP SHORT)
        public ElevatorDirection ElevatorDirection { get { return (ElevatorDirection)GetValue(ElevatorDirectionProperty); } set { SetValue(ElevatorDirectionProperty, value); } }
        public static readonly DependencyProperty ElevatorDirectionProperty = DependencyProperty.Register("ElevatorDirection", typeof(ElevatorDirection), typeof(ControlElevator), new PropertyMetadata(ElevatorDirection.None));
        #endregion
 
        #region IsOpen (DP SHORT)
        public bool IsOpen { get { return (bool)GetValue(IsOpenProperty); } set { SetValue(IsOpenProperty, value); } }
        public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register("IsOpen", typeof(bool), typeof(ControlElevator), new PropertyMetadata(false));
        #endregion
 
        #region Stages (DP SHORT)
        public int Stages { get { return (int)GetValue(StagesProperty); } set { SetValue(StagesProperty, value); } }
        public static readonly DependencyProperty StagesProperty = DependencyProperty.Register("Stages", typeof(int), typeof(ControlElevator), new PropertyMetadata(2));
        #endregion 
 
        Grid _Elevator = null;
 
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _Elevator = GetTemplateChild("PART_Elevator") as Grid;
            if (SelectedStage != 0)
            {
                double x = SelectedStage * EVELATOR_SIZE;
                _Elevator.Margin = new Thickness(0, 0, 0, x);
                previousStage = SelectedStage;
                Running = false;
            }
        }
 
        private int previousStage = 0;
 
        #region Running (DP SHORT)
        public bool Running { get { return (bool)GetValue(RunningProperty); } set { SetValue(RunningProperty, value); } }
        public static readonly DependencyProperty RunningProperty =
            DependencyProperty.Register("Running",
                typeof(bool),
                typeof(ControlElevator),
                new FrameworkPropertyMetadata(false,
                    FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                    (d, ee) =>
                    {
                        ControlElevator control = d as ControlElevator;
                        control.Running = (bool)ee.NewValue;
                    }));
        #endregion 
 
        #region SelectedStage (DP)
        public int SelectedStage
        {
            get { return (int)GetValue(SelectedStageProperty); }
            set { SetValue(SelectedStageProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for SelectedStage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SelectedStageProperty =
            DependencyProperty.Register(
                "SelectedStage",
                typeof(int),
                typeof(ControlElevator),
                 new FrameworkPropertyMetadata(0, new PropertyChangedCallback(SelectedStageChanged))
                );
 
        private static void SelectedStageChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ControlElevator control = d as ControlElevator;
            try
            {
                // calcul decal from current position
                int p = control.previousStage;
 
                double x = control.SelectedStage * EVELATOR_SIZE;
                double t = Math.Abs(p - control.SelectedStage) * TIME_ONE_ELEVATION;
 
                control.Running = true;
                ThicknessAnimation ta = new ThicknessAnimation(new Thickness(0, 0, 0, x), TimeSpan.FromSeconds(t));
                ta.Completed += (ss, ee) =>
                {
                    control.Running = false;
                };
                // calc position for create animation
                control._Elevator.BeginAnimation(Canvas.MarginProperty, ta);
                control.previousStage = control.SelectedStage;
            }
            catch { }
        }
        #endregion
    }

Nota la propriété running passe à vrai pendant les animations (ça permet de gérer mieux un diagramme d’état transition)

[StoryBoard] changer la proprieté d'un control

Windows Presentation Foundation

Discussions similaires

Partager

Partager