Discussion :

[Ninine7]

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

[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.

[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 xaml :

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

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

[Ninine7]

J'ai tenté la rotation avec ce code :

Code xaml :

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

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...

[Ninine7]

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 :

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
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;

[freezer08]

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