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 .

[Nadd]

Je viens d'essayer la méthode d'Ikeas sur un simple Border dans Blend; cela fonctionne bien entendu, mais lorsque j'essaye d'appliquer la méthode dans mon application, une erreur survient à l'exécution.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<Trigger Property="IsSelected" Value="True">
     <Trigger.EnterActions>
          <BeginStoryboard>
               <Storyboard>
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                         <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF3D3D3D"/>
                         <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF323232"/>
                    </ColorAnimationUsingKeyFrames>
               </Storyboard>
          </BeginStoryboard>
     </Trigger.EnterActions>
</Trigger>

J'obtiens l'erreur suivante :

InvalidOperationException

'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[1].(2)'.

[ikeas]

donne voir le code de ton tabitem pour voir (avec le style)

[Nadd]

Mon TabControl et ses TabItems sont entièrement définis dans un fichier de ressources. Mon application se base sur le Pattern MVVM (tiré de l'article de Josh Smith).

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
 
    <!-- Here is the style used by the TabItems -->
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <DockPanel MinWidth="200">
                        <Border x:Name="Border" Style="{StaticResource TabItemBorder}">
                            <ContentPresenter>
                                <ContentPresenter.Content>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Label Content="{Binding Path=DisplayName}" Foreground="White" HorizontalAlignment="Left" Grid.Row="1" FontSize="10" />
                                        <Label Content="{Binding Path=HeaderName}" Foreground="White" HorizontalAlignment="Left" Grid.Row="0" FontSize="10" FontWeight="Bold" />
                                    </Grid>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                        </Border>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="#FF545454" TargetName="Border" />
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <!-- <Setter Property="Background" Value="{StaticResource SelectedGradientBrush}" TargetName="Border" />
                            -->
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF3D3D3D"/>
                                            <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF323232"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <!--
    This template explains how to render the 'Workspace' content area in the main window.
    -->
    <DataTemplate x:Key="WorkspacesTemplate">
        <TabControl 
            IsSynchronizedWithCurrentItem="True" 
            ItemsSource="{Binding}"
            Margin="10"
            />
    </DataTemplate>
 
    <!--
    This template explains how to render a TabControl.
    -->
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="TabStripPlacement" Value="Left" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Border 
                            Name="Border" 
                            Background="{StaticResource MainBackgroundBrush}" 
                            BorderBrush="{StaticResource BorderBrush}" 
                            BorderThickness="1" 
                            CornerRadius="10" 
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="200" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border
                                    Grid.Column="0"
                                    BorderThickness="0,0,1,0"
                                    CornerRadius="10,0,0,10"
                                    Background="{StaticResource PanelGradientBrush}"
                                    BorderBrush="{StaticResource BorderBrush}">
                                    <TabPanel 
                                        Name="HeaderPanel"
                                        Panel.ZIndex="1"
                                        Margin="0,0,0,0" 
                                        IsItemsHost="True"
                                        KeyboardNavigation.TabIndex="1"
                                        Background="Transparent"
                                        />
                                </Border>
                                <Border
                                    Grid.Column="1"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Center">
                                    <ContentPresenter
                                        Margin="4"
                                        ContentSource="SelectedContent"
                                        />
                                </Border>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[ikeas]

voila en faisant ca ton anim est declanchée

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
 
 <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <DockPanel MinWidth="200">
                            <Border 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>
                                <ContentPresenter>
                                    <ContentPresenter.Content>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Label Content="XXXXXX" Foreground="Black" HorizontalAlignment="Left" Grid.Row="1" FontSize="10" />
                                            <Label Content="{Binding Path=HeaderName}" Foreground="White" HorizontalAlignment="Left" Grid.Row="0" FontSize="10" FontWeight="Bold" />
                                        </Grid>
                                    </ContentPresenter.Content>
                                </ContentPresenter>
                            </Border>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <!-- <Setter Property="Background" Value="{StaticResource SelectedGradientBrush}" TargetName="Border" />-->
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <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:01" Value="#FF000000"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

bien entendu il faudra mettre l'anim pour le iselected a false
mais bon ca marche a peut pres ... tu dois pouvoir le modifier pour que ca colle (j'ai juste rectifie deux trois truc pour simplifier le code)

par contre sur ton style j'ai pas tout bien compris, mais c'est pas grave l'anim fonctionne deja

[Nadd]

Merci beaucoup, ça fonctionne

Il semblerait que le <Border.Background> y soit pour beaucoup

Encore merci !

Nicolas.

[ikeas]

bon ceci etant ca parraissait normal

[Nadd]

Rebonsoir

Je me heurte à présent à un nouveau problème, pour le IsSelected False cette fois-ci :\

Lorsqu'un nouvel élément TabItem est ajouté au TabControl, il ressent malheureusement l'effet du IsSelected False; ce qui n'est pas normal. Du coup, l'onglet ajouté n'a pas l'apparence souhaitée d'un onglet sélectionné. Il semblerait qu'il subisse la même chose que le bouton précédemment sélectionné.

J'ai réussi à résoudre ce problème en utilisant plutôt un EventTrigger sur la propriété Selector.Unselected, tout en gardant le Trigger sur la propriété IsSelected True. Je ne sais pas si un mix de deux types d'évènements est souhaitable.

Le nouveau problème qui se pose est que je ne peux plus utiliser le Trigger sur la propriété IsSelected False étant donné qu'elle viendrait effacer tout simplement l'EventTrigger.

Le résultat de tout ceci est que lorsque l'utilisateur termine de survoler un onglet (non sélectionné) il n'y a plus aucune animation. J'aimais bien en effet voir, après le survol d'un onglet, le dégradé de fond de celui-ci changer de l'état de sélectionné à l'état non sélectionné.

Que faire ? :\

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
 
<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="IsMouseOver" Value="True" />
    <Condition Property="IsSelected" Value="False" />
  </MultiTrigger.Conditions>
  <Setter Property="Background" Value="#FF545454" TargetName="Border" />
</MultiTrigger>
 
<Trigger Property="IsSelected" Value="True">
  <Trigger.EnterActions>
    <BeginStoryboard>
      <Storyboard>
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
          <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF545454"/>
          <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF5C5C5C"/>
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
          <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF1C1C1C"/>
          <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF2D2D2D"/>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </BeginStoryboard>
  </Trigger.EnterActions>
</Trigger>
 
<EventTrigger RoutedEvent="MouseLeave">
  <BeginStoryboard>
    <Storyboard>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5C5C5C"/>
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF545454"/>
      </ColorAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2D2D2D"/>
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF1C1C1C"/>
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>
 
<EventTrigger RoutedEvent="Selector.Unselected">
  <BeginStoryboard>
    <Storyboard>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5C5C5C"/>
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF545454"/>
      </ColorAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF2D2D2D"/>
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF1C1C1C"/>
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

Le code ci-dessous fonctionne bien, si ce n'est que lorsque l'on survol l'onglet sélectionné, la couleur de fond change (ce que je ne désire pas) pour revenir à l'état d'un onglet non sélectionné, ce qui est dérangeant. L'EventTrigger ne permet pas d'introduire des conditions...

En vous remerciant d'avance,

Nicolas.

[ikeas]

tu pourrais pas envoyer un projet d'exemple ... ca serait plus simple eheheheheh

[Nadd]

Hmm, avant de céder à la tentation de me faire totalement aider , j'aimerais tenter un petit quelque chose.

Serait-il possible d'étendre la classe EventTrigger pour lui ajouter la prise en charge de conditions, comme pour le MultiTrigger ?

[ikeas]

sans doute puisque la classe n'est pas sealed, ceci etant a mon avis tu ferrais un petit exemple simple je suis a peut pres sur que ce que tu veux faire est possible. Dans tous les cas tu peux deja essayer avec blend de voir ce que ca donne ....
maintenant j'ai pas du tout comprendre

[Nadd]

Bonjour,

Le problème avec l'implémentation du Design Pattern MVVM (selon l'exemple de Josh Smith), lorsqu'un nouvel objet TabItem est ajouté au TabControl, le TabItem ajouté est sélectionné sans l'être véritablement.

Le contenu du TabItem est bel et bien affiché à l'écran comme TabItem courant (comme si je l'avais sélectionné) mais l'évènement IsSelected True n'est pas appelé. Avec le code que j'ai posté hier, le problème ne se pose plus. Toutefois, avec ce code, lorsque l'utilisateur termine de survoler un onglet, aucune animation n'est exécutée, puisque j'ai été obligé de supprimer le IsSelected False & IsMouseOver false afin qu'il ne surcoupe pas l'EventTrigger sur Selector.Unselected.

Vous fournir un projet d'exemple serait difficile, étant donné que le problème est lié à l'implémentation du Design Pattern MVVM.

Toutefois, si vous ne voyez toujours pas le problème, ce qui ne m'étonnerait pas étant donné mon incapacité à le décrire correctement , je pourrais vous envoyer le projet par MP.

En vous remerciant d'avance,

Nicolas.

PS : Il se pourrait que la seule solution évidente soit d'étendre EventTrigger pour implémenter la gestion de conditions^