Discussion :

[Anto03]

bonjour à tous,

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

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

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

[Thomas Lebrun]

Le mieux serait de passer par Blend pour faire cela

Sinon essaye:

Code :

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

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

[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

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

[Thomas Lebrun]

ERf, j'ai oublié un S

Code :

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

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

[Anto03]

Mouarf j'avais pas vu non plus !

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

Code :

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

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 :

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
 
        <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}" />

[rad_hass]

Essaie ceci :

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
 
        <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}" />

[Anto03]

Tu as bien modifié uniquement cette ligne :

Code :

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

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

Idem, ça compile mais aucune animation...

[rad_hass]

Oups essaie ça je voulais dire :

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
<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}" />

[Anto03]

ça marche !

Merci beaucoup rad_hass !