[Rectangle] Comment y réaliser une Color Animation ?

Version imprimable

bonjour à tous,

j'ai réussi récemment à animer le background color d'un boutton comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
        <LinearGradientBrush x:Key="brushFire" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Red" Offset="0.5" />
        </LinearGradientBrush>
 
        <Style x:Key="buttonFire" TargetType="{x:Type Button}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Background.GradientStops[1].Color">
                                <ColorAnimation From="Black" To="Red" Duration="0:0:2"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

Tout marche parfaitement et je voulais faire la même chose mais avec un rectangle donc j'ai modifié en conséquence :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
        <Style x:Key="fourStyle" TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="94" />
            <Setter Property="Height" Value="84" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="RadiusX" Value="10" />
            <Setter Property="RadiusY" Value="10" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Fill.LinearGradientBrush.GradientStop[1].Color">
                                <ColorAnimation From="Black" To="Red" Duration="0:0:2"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

Seulement, là, il me renvoie une erreur spécifiant que la propriété "Fill.LinearGradientBrush.GradientStop[1].Color" est inaccessible. :(

30/09/2008, 10h52
Thomas Lebrun

Le mieux serait de passer par Blend pour faire cela ;)

Sinon essaye:

Code:

<Storyboard TargetProperty="(Background.Fill).(LinearGradientBrush.GradientStop)[1].(SolidColorBrush.Color)">

Attention, on est en .NET donc les tableaux commencent à 1: là, tu modifies le 2ème GradientStop de ton dégradé ;)
30/09/2008, 11h04
Anto03

J'ai essayé par Blend mais j'ai un peu de mal à m'en servir... Je ne sais pas si ça c'est vue mais je débute un peu en WPF :oops:

Pour les tableaux, c'est voulu c'est bien le deuxième que je veux modifier ! En utilisant ton code j'ai une autre erreur un peu plus explicite :

Impossible de convertir la chaîne '(Background.Fill).(LinearGradientBrush.GradientStop)[1].(SolidColorBrush.Color)' de l'attribut 'TargetProperty' en objet de type 'System.Windows.PropertyPath'. Chemin de propriété non valide. 'LinearGradientBrush' n'a pas de propriété publique nommée 'GradientStop'

Je ne comprends pas trop ce message, en effet si on passe par le code C# on remarque pourtant que LinearGradientBrush contient une propriété publique pour "GradientStop".
30/09/2008, 14h03
Thomas Lebrun

ERf, j'ai oublié un S :(

Code:

<Storyboard TargetProperty="(Background.Fill).(LinearGradientBrush.GradientStops)[1].(SolidColorBrush.Color)">

Mouarf j'avais pas vu non plus !

J'ai tout de même fait une autre petite modification :

Code:

1
2
 
<Storyboard TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[1].(SolidColorBrush.Color)">

Un rectangle ne contient pas de propriété Background ;)

Par contre, là sa compile bien, sa se lance mais... aucune animation ! Voici mon code au complet :

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
 
        <LinearGradientBrush x:Key="brushFire" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Red" Offset="0.5" />
        </LinearGradientBrush>
 
        <Style x:Key="fourStyle" TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="94" />
            <Setter Property="Height" Value="84" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="RadiusX" Value="10" />
            <Setter Property="RadiusY" Value="10" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[1].(SolidColorBrush.Color)">
                                <ColorAnimation From="Black" To="Red" Duration="0:0:2"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
 
<Rectangle Fill="{StaticResource brushFire}" Style="{StaticResource fourStyle}" />

Essaie ceci :

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
 
        <LinearGradientBrush x:Key="brushFire" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Red" Offset="0.5" />
        </LinearGradientBrush>
 
        <Style x:Key="fourStyle" TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="94" />
            <Setter Property="Height" Value="84" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="RadiusX" Value="10" />
            <Setter Property="RadiusY" Value="10" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="(Shape.Fill).(LinearGradientBrush.GradientStops)[1].(SolidColorBrush.Color)">
                                <ColorAnimation From="Black" To="Red" Duration="0:0:2"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
 
<Rectangle Fill="{StaticResource brushFire}" Style="{StaticResource fourStyle}" />

30/09/2008, 15h06
Anto03
Tu as bien modifié uniquement cette ligne :
Code:

1 2 <Storyboard TargetProperty="(Shape.Fill).(LinearGradientBrush.GradientStops)[1].(SolidColorBrush.Color)">
Idem, ça compile mais aucune animation...

Oups essaie ça je voulais dire :

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
<LinearGradientBrush x:Key="brushFire" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Red" Offset="0.5" />
        </LinearGradientBrush>
 
        <Style x:Key="fourStyle" TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="94" />
            <Setter Property="Height" Value="84" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="RadiusX" Value="10" />
            <Setter Property="RadiusY" Value="10" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From="Black" To="Red" Duration="0:0:2"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
 
<Rectangle Fill="{StaticResource brushFire}" Style="{StaticResource fourStyle}" />

30/09/2008, 15h24
Anto03

ça marche ! :king:

Merci beaucoup rad_hass !