Discussion :

[smyley]

C'est encore moi.
Le truc, c'est que je suppose que de nombreuses sources sont disponibles sur google, mais vu que je ne sais pas dutout comment ça s'appelle, je ne sais pas quoi chercher ...
Donc,
Je souhaite réaliser un effet : une sorte de ToolBar avec des icones et je voudrais qu'un zoom soit réalisé sur celles ci lors du passage de la souris (agrandissement de l'image sélectionnée et les autres autour qui se "poussent").
- Je pensais utiliser tout d'abord un StackPanel mais du coup ma liste d'images n'est pas centrée ...
- Ensuite, comment je peut réaliser cet effet à partir d'un Style contenu en resources ? (avec un DoubleAnimation je suppose, mais ça n'écarte pas le reste ..)

Voilà, comment fais-je ?

[tomlev]

Je ne vois pas bien ce que tu veux dire avec l'histoire de la liste d'images qui n'est "pas centrée" ?
Sinon, pour le style en ressource, ça donne quelque chose comme ça :

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
    <Window.Resources>
        <Style x:Key="stlZoomButton" TargetType="Button">
            <Setter Property="Height" Value="30"/>
            <Setter Property="Width" Value="40"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <ScaleTransform CenterX="20" CenterY="15" ScaleX="2.0" ScaleY="2.0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

Et pour l'appliquer :

Code XML :

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

<Button Style="{StaticResource stlZoomButton}"> ... </Button>

[Thomas Lebrun]

- Je pensais utiliser tout d'abord un StackPanel mais du coup ma liste d'images n'est pas centrée ...

Bah, si tu centres ton StackPanel, les images seront centrées

- Ensuite, comment je peut réaliser cet effet à partir d'un Style contenu en resources ? (avec un DoubleAnimation je suppose, mais ça n'écarte pas le reste ..)

Le code de tomlev te donne le point de départ: propriété IsMouseOver, ScaleTransform. Après, il te faut une animation sur cette property: utilise Blend pour cela si besoin

[smyley]

Michi bien , j'ai pondu ça (j'utilise pas Blend ... )

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
 
        <Style x:Key="ImageItemStyle" TargetType="{x:Type Image}">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1" x:Name="ZoomScale"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Image.BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="White" GlowSize="4"/>
                        </Setter.Value>
                    </Setter>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="2" Duration="0:0:0.3"
                                                 Storyboard.TargetProperty="(Image.LayoutTransform).(ScaleTransform.ScaleX)">
 
                                </DoubleAnimation>
                                <DoubleAnimation To="2" Duration="0:0:0.3"
                                                 Storyboard.TargetProperty="(Image.LayoutTransform).(ScaleTransform.ScaleY)">
 
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
 
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation  To="1" Duration="0:0:0.3"
                                                 Storyboard.TargetProperty="(Image.LayoutTransform).(ScaleTransform.ScaleX)">
 
                                </DoubleAnimation>
                                <DoubleAnimation  To="1" Duration="0:0:0.3"
                                                 Storyboard.TargetProperty="(Image.LayoutTransform).(ScaleTransform.ScaleY)">
 
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>