[WPF] Animations et ListBox

Version imprimable

Bonjour à tous,

Mon problème est pourtant simple mais je n'arrive pas à trouver la solution...

Ce que je souhaite : J'ai 2 listbox. Quand je clique sur une listboxitem de la listbox1, ça fait apparaitre listbox2 et ça déclenche une animation sur la listbox2 (un déplacement vertical de haut en bas de listbox2).

Mon problème : Ce que j'ai fait c'est que dans le dans le ControlTemplate des listboxitems de listbox1 j'ai ceci :
Code:

1 2 3 4 5 6 7 8 9 10 <ControlTemplate.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard Storyboard="{StaticResource RollOverAnim}"/> <BeginStoryboard Storyboard="{StaticResource ListAppliAnim}"/> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard Storyboard="{StaticResource RollOutAnim}"/> </EventTrigger> </ControlTemplate.Triggers>
RollOverAnim et RollOutAnim font juste un effet de zoom sur les listboxitems de listbox1. Voici la définition de ListAppliAnim (qui pose problème)
Code:

1 2 3 4 <Storyboard x:Key="ListAppliAnim"> <DoubleAnimation Duration="0:0:0.1" AutoReverse="False" Storyboard.TargetName="ApplicationList" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="200" /> </Storyboard>
où ApplicationList est listbox2 (la listbox doit être "animée")

Quand j'exécute l'application j'ai ce message d'erreur :

Citation:

InvalidOperationException was unahandled : 'ApplicationList' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'.

Le souci serait que je défini explicitement le nom de ma listbox dans mes ressources et que je ne peux pas y accéder directement.

Je suis manifestement parti sur une mauvaise piste. Auriez vous une autre piste à me conseiller ?

Merci !

Bon j'ai trouvé une solution :
J'utilise le Trigger du conteneur parent :

Code:

1
2
3
4
5
6
7
8
9
10
 
   <DockPanel.Triggers>
            <EventTrigger RoutedEvent="Selector.SelectionChanged">
                <BeginStoryboard>
                    <Storyboard>
                       <DoubleAnimation  Duration="0:0:1" AutoReverse="False" Storyboard.TargetName="ApplicationList" Storyboard.TargetProperty="(Canvas.Top)" From="-200" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
         </DockPanel.Triggers>

Par contre est-il possible d'utiliser un événement MouseEnter des listboxitems ?

29/12/2009, 17h12
Thomas Lebrun

Citation:

Envoyé par Floriannouri

Par contre est-il possible d'utiliser un événement MouseEnter des listboxitems ?

A première vue, je te dirais oui, pas de raisons que cele ne fonctionne pas.

En fait je me suis mal exprimé. Je cherche à ce que quand je quitte un listboxitem avec ma souris, je change la propriété de listbox2. Je retombe sur mon problème avec mon message d'erreur qui ne veut pas entendre parler de listbox2 (ApplicationList) :

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
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
<Window x:Class="TestList.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" 
        WindowStyle="None"
        ResizeMode="NoResize"
        AllowsTransparency="True"
        Background="Transparent"
        Width="500" Top="0" Loaded="Window_Loaded">
 
    <Window.Resources>
 
        <!-- Template de la ListBox THEMES -->
        <DataTemplate x:Key="ThemeTemplate">
            <StackPanel HorizontalAlignment="Center" Margin="10">
                <Image Source="{Binding Path=UriLogo}" Width="64" Height="64">
                    <Image.ToolTip>
                        <TextBlock Text="{Binding Path=Description}"/>
                    </Image.ToolTip>
                </Image>
                <TextBlock TextAlignment="Center" Text="{Binding Path=Nom}"/>
            </StackPanel>
        </DataTemplate>
 
        <!-- Template de la ListBox APPLICATION -->
        <DataTemplate x:Key="ApplicationListItemStyle">
            <StackPanel Orientation="Horizontal" Margin="5" >
                <StackPanel.ToolTip>
                    <TextBlock Text="{Binding Path=Description}" />
                </StackPanel.ToolTip>
                <Image Source="{Binding Path=LogoUri}" Margin="0 0 10 0" Width="32" Height="32"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding Path=Nom}"/>
            </StackPanel>
        </DataTemplate>
 
        <ControlTemplate x:Key="ThemeListTemplate" TargetType="{x:Type ListBoxItem}">
            <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource RollOverAnim}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource RollOutAnim}"/>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
 
        <Style x:Key="ThemeListStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template" Value="{StaticResource ThemeListTemplate}"/>
        </Style>
 
 
        <Storyboard x:Key="RollOverAnim">
            <DoubleAnimation Duration="0:0:0.1" AutoReverse="False" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1.5" />
            <DoubleAnimation Duration="0:0:0.1" AutoReverse="False" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1.5" />
        </Storyboard>
 
        <Storyboard x:Key="RollOutAnim">
            <DoubleAnimation Duration="0:0:0.1" AutoReverse="False" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1" />
            <DoubleAnimation Duration="0:0:0.1" AutoReverse="False" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1" />
        </Storyboard>
    </Window.Resources>
 
 
    <DockPanel Background="Transparent"
               Name="ParentElement"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
        <ListBox x:Name="ThemeList"
            Background="Transparent"
            BorderBrush="Transparent"
            DockPanel.Dock="Top"
            ItemsSource="{Binding}"
            ItemTemplate="{StaticResource ThemeTemplate}"
            Cursor="Hand"
            ItemContainerStyle="{StaticResource ThemeListStyle}"
            SelectionChanged="ThemeList_SelectionChanged">
 
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Margin="10"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <Canvas>
            <ListBox x:Name="ApplicationList" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 ItemsSource="{Binding ElementName=ThemeList, Path=SelectedItem.Applications}"
                 ItemTemplate="{StaticResource ApplicationListItemStyle}"
                 SelectionChanged="ApplicationList_SelectionChanged">
            </ListBox>
        </Canvas>
 
    </DockPanel>
</Window>