Rotation et Zoom avec MVVM

Version imprimable

19/05/2011, 08h56
Ninine7

Rotation et Zoom avec MVVM

Bonjour,
Je travail sur une application Silverlight (une galerie photo) pré-existante, que je dois remodeler pour qu'elle respecte le modèle MVVM. Elle dispose d'une fonction de zoom et de rotation sur l'image. Comment gère t'on le ScaleTransform et le RotateTransform avec le pattern MVVM (au niveau du binding) ? J'utilise MVVM Light Toolkit et je développe sous Visual Studio 2010.
Merci pour votre aide :D
19/05/2011, 10h47
micka132

Je suis pas sur de bien comprendre, mais de ce que j'en déduis tout va se passer dans la vue exactement comme "avant" la refonte.
A moins que les valeurs du scale transform et du rotate soit nécessaire ailleurs je vois pas pourquoi elle se retrouverai dans le modèle.
19/05/2011, 10h54
freezer08
Tout ce qui est purement design n'a pas pour vocation d'être contenu dans ton ViewModel.

Si par contre tu as besoin de stocker les valeurs des transformations, depuis Silverlight 4, il est possible de binder sur les propriétés d'un DependencyObject.
Tu pourras donc faire quelque chose comme ça :
Code:

1 2 <ScaleTransform ScaleX="{Binding Path=ZoomX, Mode=TwoWay}" />

J'ai tenté la rotation avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
<Image Name="iconeRotation" Margin="10 0 0 0" Source="Images/rotation-icone-gauche.png" Canvas.Left="702" Canvas.Top="502" Cursor="Hand" Width="30" Height="30" ToolTipService.ToolTip="Pivoter l'image">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonDown">
                            <cmd:EventToCommand Command="{Binding RotateImageCommand}" PassEventArgsToCommand="True"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <Image.RenderTransform>
                        <RotateTransform Angle="{Binding Path=AngleIcone, Mode=TwoWay}" CenterX="{Binding Path=CentreXIcone, Mode=TwoWay}" CenterY="{Binding Path=CentreYIcone, Mode=TwoWay}" />
                    </Image.RenderTransform>
                </Image>

L'image pivote bien une première, puis plus rien ne se passe ensuite. Je dois sans doute mal le gérer côté ViewModel...:?

Problème résolu, et ça venait bien du MainViewModel... Enfin à cause d'une erreur toute bête.
Je mets le code de mon ViewModel pour ceux que ça intéresse (le code xaml dans le message précédent fonctionne bien)

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
 
 
// Déclaration des variables
private int _angleIcone = 0;
public int AngleIcone
{
     get { return _angleIcone; }
     set
     {
       if (_angleIcone != value)
       {
          _angleIcone = value;
          RaisePropertyChanged("AngleIcone");
         }
      }
}
 
private int _centreXIcone = 0;
public int CentreXIcone
{
  get { return _centreXIcone; }
  set
  {
     if (_centreXIcone != value)
     {
        _centreXIcone = value;
        RaisePropertyChanged("CentreXIcone");
      }
   }
}
 
private int _centreYIcone = 0;
public int CentreYIcone
{
   get { return _centreYIcone; }
   set
       {
         if (_centreYIcone != value)
         {
            _centreYIcone = value;
            RaisePropertyChanged("CentreYIcone");
          }
        }
}
 
public RelayCommand RotateImageCommand { get; private set; }
 
// Métohdes
public MainViewModel()
{
     if (IsInDesignMode)
     {
        // Code runs in Blend --> create design time data.
      }
      else
      {
              RotateImageCommand = new RelayCommand(RotateImageCommand_Click);
      }
}
 
public void RotateImageCommand_Click()
{
      AngleIcone -= 90;                                       
      CentreXIcone = 15;                                      
      CentreYIcone = 15;
}

Mon erreur se situait dans la méthode public void RotateImageCommand_Click() à cause d'une erreur de recopie, j'avais mis AngleIcone = -90 au lien de AngleIcone -= 90; :roll:

20/05/2011, 12h33
freezer08

Cool, tant mieux ! Merci d'avoir partagé ta solution :)