XAML : Changer la taille d'une image au survol

[Finality]

Bonjour tout le monde

Je suis en train de faire ma première application WinRT et je sèche déjà sur un point tout bête ! J'aimerai simplement changer la taille d'une image au survol de la souris (en xaml si possible).

Quelqu'un saurait-il comment faire ?

Merci d'avance

Finality

[GuruuMeditation]

Tu peux utiliser les storyboards :

Code Xaml :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 <Image x:Name="TheImage" Source="/Assets/WP.jpg" Width="400" Height="400" PointerEntered="TheImage_PointerEntered_1" PointerExited="TheImage_PointerExited_1" RenderTransformOrigin="0.5,0.5">
            <Image.Resources>
                <!-- Animates the rectangle's opacity. -->
                <Storyboard x:Name="StoryboardBigger">
                    <DoubleAnimation Storyboard.TargetName="TheImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.2"/>
                    <DoubleAnimation Storyboard.TargetName="TheImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.2"/>
                </Storyboard>
                <Storyboard x:Name="StoryboardSmaller">
                    <DoubleAnimation Storyboard.TargetName="TheImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2"/>
                    <DoubleAnimation Storyboard.TargetName="TheImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2"/>
                </Storyboard>
            </Image.Resources>
            <Image.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
            </Image.RenderTransform>
        </Image>

Le code :

Code C# :

1
2
3
4
5
6
7
8
9
10
 
 private void TheImage_PointerEntered_1(object sender, PointerRoutedEventArgs e)
        {
            StoryboardBigger.Begin();
        }
 
        private void TheImage_PointerExited_1(object sender, PointerRoutedEventArgs e)
        {
            StoryboardSmaller.Begin();
        }

Ça c'est la base. Si c'est pour réutiliser, tu peux faire un contrôle et jouer avec les VisualStates.

[Finality]

En fait tu vois j'aimerai éviter de faire appel à du code dans le .cs. Tu penses que c'est possible ?

Merci pour ton aide en tout cas

[GuruuMeditation]

Je ne pense pas que ce soit possible sans code. Il y a bien des triggers en WinRT, mais elles n'acceptent que des RoutedEvent. Et PointerEntered,... ne sont pas des RoutedEvents.

En plus les trigger ne sont là que pour compatibilité avec Silverlight mais ne sont pas conseillés. C'est remplacé par les VisualState, et il faut un peu de code pour ça.

[Finality]

Ok merci pour la mise au point Connaitrais-tu par hasard de bons articles sur les Visual State ?

[GuruuMeditation]

Je suis tombé sur cet article, qui explique comment faire des visualstates en Blend :http://www.dreamincode.net/forums/to...and-behaviors/

C'est du Silverlight, mais ça n'a pas changé

[Lordinaire]

Salut,

Si tu es en MVVM, je me permet de t'indiquer cet article pour gérer des Storyboard et VisualState sans code-behind (mais avec du code quand même hein )
http://win8dev.fr/jouer-avec-les-sto...ate-avec-mvvm/

N'hésite pas à jeter un coup d'oeil aux autres articles du site win8dev.fr, c'est plutôt interessant.

[h2s84]

L'expression "sans code-behind" revient pas mal quand on parle de MVVM.

Franchement quand je sais que le démarrage ou le changement de mon VisualState ne dépend d'aucune changement de données de ma View-Model je préfère largement mettre du code dans mon code behind.
Si ça dépend de mon View-Model alors là j'aurai toujours mon code-behind pour lancer l'animation mais là ce sera une Messagerie (Messenger dans MVVM Light ) qui se chargera de le dire à l'UI

[Lordinaire]

Je ne dis pas que c'est pas bien et qu'il ne faut pas de code-behind, c'est simplement une solution pour tout gérer dans le ViewModel.
Ce n'est pas forcement adapté à tous les cas mais pour moi ça reste la solution que j'utilise le plus.