Discussion :

[Nadd]

Bonsoir,

J'aimerais que lorsque l'utilisateur survole un TabItem de mon TabControl, la propriété Background d'un objet Border (contenant le TabItem) passe d'une valeur à l'autre progressivement.

Ces valeurs sont des LinearGradientBrush :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    <LinearGradientBrush x:Key="PanelGradientBrush" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FF434242" Offset="0" />
        <GradientStop Color="#FF1C1C1C" Offset="1" />
    </LinearGradientBrush>
 
    <LinearGradientBrush x:Key="SelectedGradientBrush" EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FF686868" Offset="0" />
        <GradientStop Color="#FF1C1C1C" Offset="1" />
    </LinearGradientBrush>

Et voici l'évènement ciblé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<Trigger Property="MouseOver" Value="True">
     <Trigger.EnterActions>
          <BeginStoryboard>
               <Storyboard Storyboard.TargetName="Border" Storyboard.TargetProperty="(Background)">
                    <AnimationTimeline Storyboard.TargetName="Border" Storyboard.TargetProperty="(Background)">
                                            [ QUE METTRE ICI ? ]
                    </AnimationTimeline>
               </Storyboard>
          </BeginStoryboard>
     </Trigger.EnterActions>
</Trigger>

Que faire ? :\

En vous remerciant d'avance,

Nicolas.

[binoo]

Salut,

Plutôt que de partir sur une AnimationTimeline, une ColorAnimation serait plus adaptée :

http://msdn.microsoft.com/fr-fr/libr...8VS.95%29.aspx

[Nadd]

J'avais déjà essayé avec un ColorAnimation (d'ailleurs, l'AnimationTimeline a été recopié par erreur ici). Malheureusement, la ColorAnimation ne convient pas pour passer d'un Gradient Brush à un autre.

La ColorAnimation ne fonctionne qu'avec des brushes "uniformes". Il semblerait d'ailleurs qu'il ne soit pas réellement possible de passer d'un dégradé à un autre comme on passerait ici (avec le ColorAnimation) d'une couleur simple à une autre.

[ikeas]

tu as esssaye en utilisant blend ?

[ikeas]

voila ce que ca donne en utilisant blend pour une anim du fond du border

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
 
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="animationde_border.Window1"
	x:Name="Window"
	Title="Window1"
	Width="640" Height="480">
	<Window.Resources>
		<Storyboard x:Key="Storyboard1">
			<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
				<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
				<SplineColorKeyFrame KeyTime="00:00:02" Value="#FFBF0000"/>
			</ColorAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
		</EventTrigger>
	</Window.Triggers>
 
	<Grid x:Name="LayoutRoot">
		<Border Margin="87,116,272,203" CornerRadius="10,10,10,10" x:Name="border">
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF000000" Offset="0"/>
					<GradientStop Color="#FFFFFFFF" Offset="1"/>
				</LinearGradientBrush>
			</Border.Background>
		</Border>
	</Grid>
</Window>

a mon avis avec ca tu devrais pouvoir trouver ton bonheur

[Thrud]

Bonjour,

Voici un petit exemple qui anime une couleur dans un LinearGradientBrush, avec une ColorAnimation :

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
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<LinearGradientBrush x:Key="TheGradient"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Tomato"
Offset="-0.1" />
<GradientStop Color="Orange"
Offset="0.2" />
<GradientStop Color="Yellow"
Offset="0.5" />
<GradientStop Color="Green"
Offset="1.4" />
</LinearGradientBrush>
</Page.Resources>
 
<Grid> 
<Ellipse Fill="{StaticResource TheGradient}" Height="100" Width="100">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation 
Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" 
To="Black"
Duration="0:0:4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Page>

ikeas a été plus rapide, mais ça m'ennuyait d'avoir cherché pour rien, alors je poste quand même .