Discussion :

[McTonio]

Bonjour !

J'ai une ListBox instanciée avec un ObjectDataProvider, et je voudrais que lors du passage de la souris sur un ListBoxItem, non pas que ses propriétés soient modifiées (ça j'ai réussit à le faire :p), mais que celles du ListBoxItem de l'index précédent le soient par exemple.
Y-a-t-il moyen de dire à un storyboard sur quel index de la ListBox agir ?
Petite précision : je travaille en VB.NET, donc si vous mettez du C#, essayer d'expliquer un peu le code svp...

Merci en tous les cas !

[binoo]

Salut,

Je ne suis pas certain d'avoir compris ce que tu veux vraiment faire, mais tu peux déclencher des trigger lorsque la souris survole un ListViewItem assez simplement depuis le code xaml.

Voici un exemple qui :
- déclenche au survol de l'item un changement de background de l'item : Utilisation d'un Trigger sur la propriété IsMouseOver.
- déclenche un StoryBoard sur l'opacité de l'item lorsque la souris entre et sort de l'item : Utilisation d'EventTrigger MouseEnter et MouseLeave.

Code xml :

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
      <!-- ListBoxItem Style -->
      <Style x:Key="ListBoxItemtStyle1" TargetType="{x:Type ListBoxItem}" >
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Margin" Value="2,2,2,2" />
        <Setter Property="Padding" Value="1,1,1,1" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
              <Border x:Name="Bd" CornerRadius="0,0,0,0" BorderThickness="0,0,0,0" Opacity="1"
                      Width="{TemplateBinding Width}" Padding="{TemplateBinding Padding}" 
                      Background="Transparent" >
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  />
              </Border>
              <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                  <Setter TargetName="Bd" Property="Background" 
                          Value="Transparent"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="true">
                  <Setter TargetName="Bd" Property="Background" 
                          Value="{DynamicResource MOverOrangeGradientBrush}"/>
                </Trigger>
                <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="Bd" >
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation To="0.5" Duration="0:0:0.5" 
                                       AccelerationRatio="0.10" DecelerationRatio="0.25" 
                                       Storyboard.TargetProperty="(Border.Opacity)" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Border.MouseLeave" SourceName="Bd" >
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation Duration="0:0:0.5" To="1"
                                       AccelerationRatio="0.10" DecelerationRatio="0.25" 
                                       Storyboard.TargetProperty="(Border.Opacity)" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger>
                <MultiTrigger>
                  <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="true" />
                    <Condition Property="IsSelected" Value="true" />
                  </MultiTrigger.Conditions>
                  <MultiTrigger.Setters>
                    <Setter Property="Background" 
                            Value="{StaticResource MOverOrangeGradientBrush}" TargetName="Bd"/>
                  </MultiTrigger.Setters>
                </MultiTrigger>
                <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

C'est le style d'un ListBoxItem, pour l'appliquer à la listBox, il faudra lui ajouter :

Code xml :

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

1
2
3
<ListBox ...
  ItemContainerStyle="{StaticResource ListBoxItemtStyleLstSelCtrl}"
  .... />

Si tu n'es pas familier avec les styles, poses des questions car il sont là pour répondre à ce genre de besoin

[McTonio]

Salut !
D'abord merci pour ta réponse rapide !
C'est pas exactement ça que je voulais, mais je me suis rendu compte que comme j'avais fait c'était pas très optimisé, ça va me résoudre pas mal de soucis.
Cependant dans ce Style que tu viens de donner, quand cet évènement est réalisé (par exemple) :

Code :

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

<Trigger Property="IsMouseOver" Value="true">

Peux-t-on appliquer un Setter qui modifiera les propriétés du ListBoxItem précédent ? Donc pas celles sur ListBoxItem où "IsMouseOver" est vrai...
Humm je sais pas si je suis clair, n'hésitez pas à me poser des questions si ça ne l'est pas.

J'avoue que la demande est bizarre, mais c'est très spécifique, je suis en stage et donc je ne peux pas réellement contourner le problème...

[binoo]

Agir sur l'ancien item, je pense pas que cela soit réalisable depuis le style...

Après dans l'exemple que j'ai donné, tu peux faire quelque chose lorsque tu quittes l'item avec l'EventTrigger MouseLeave. Donc en quelque sorte, quand le curseur de la souris sort de l'item (et donc tu es sur un nouvel item), tu peux déclencher une animation sur l'item que tu viens de quitter.

Est-ce que ça répond à ton besoin ?

[McTonio]

Pourquoi pas ! Je vais exploiter sur ce point.
Si j'arrive à quelque chose qui s'approche de ce qu'il fallait que je fasse, je viendrais le poster.
En tout cas, merci de t'intéresser à mon problème, c'est vraiment sympa.

[McTonio]

Bon alors voilà j'ai décidé d'aborder le problème autrement.
J'ai créé un évènement dans le style de ma ListBox :

Code :

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

<EventSetter Event="MouseEnter" Handler="ListBoxItem_MouseEnter" />

Ensuite je récupère l'index du ListBoxItem sur lequel la souris se situe :

Code :

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

1
2
3
4
5
6
Private Sub ListBoxItem_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
Dim ItemOver As New ListBoxItem
Dim ItemPrecedent As New ListBoxItem
ItemOver = sender
ItemPrecedent = ListCtct.Items.Item(ContactList.IndexOf(ItemOver.Content) - 1)
End Sub

LisCtCt est le nom de ma ListBox
ContactList c'est le nom de mon ObservableCollection
Ainsi je récupère l'index de l'objet précédent dans ma collection, sachant que les index sont identiques dans ma ListBox (ouf...)

Mais le soucis c'est que j'ai une erreur sur la ligne en rouge :

Impossible d'effectuer un cast d'un objet de type 'Contact' en type 'System.Windows.Controls.ListBoxItem'.

Vous l'avez compris ContactsList est une ObservableCollection de Contact.

Je pense avoir compris le soucis, mais je ne sais pas comment le résoudre...
Ensuite pour changer la propriété du ListBoxItem précédent il me suffirait de faire par exemple :

Code :

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

ItemPrecedent.Opacity = 0.0

Si près du but...

Avez-vous une solution ? Si j'ai pas été clair ou si il manque des éléments pour trouver une solution n'hésitez pas !!

Merci à vous !

[Jérem22]

Tu peux essayer en utilisant l'ItemContainerGenerator associé au ListBox:

Code :

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

ListBoxItem lbi = listbox.ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;

[McTonio]

C'est ça !!!! ça marche !!!!!
Merci !!!!

[McTonio]

J'ai utilisé un truc pas mal que j'ai trouvé sur le MSDN, je le mets ici pour ceux qui connaissent pas. Au lieu de changer la propriété comme une brute (c'est pas très joli), on peut créer une StoryBoard directement dans le code ce qui, pour moi en tout cas, facilite les choses !! Surtout pour une ptite anim comme ça..

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
 
 
                ItemPrecedent = ListCtct.ItemContainerGenerator.ContainerFromIndex(IndexPrecedent)
 
                Dim AnimItemPreced As New DoubleAnimation()
                Dim SbItemPreced As Storyboard
 
                AnimItemPreced.From = 90
                AnimItemPreced.To = 0
                AnimItemPreced.Duration = New Duration(TimeSpan.FromMilliseconds(200))
                Storyboard.SetTarget(AnimItemPreced, ItemPrecedent)
                Storyboard.SetTargetProperty(AnimItemPreced, New PropertyPath(ListBoxItem.WidthProperty))
                SbItemPreced = New Storyboard
                SbItemPreced.Children.Add(AnimItemPreced)
                SbItemPreced.Begin(ItemPrecedent)

Merci encore ça déchire !!