Laurent Kempé
Silverlight 4 Beta, Drop Target et MVVM
Nous allons voir comment utiliser la nouvelle fonctionnalité Drop Target de Silverlight 4 Beta avec Model View ViewModel et le framework MVVM Light Toolkit.
Par Laurent Kempé publié le 30/11/2009 à 18:07, lu 10658 fois,
Lors de la PDC 09 Microsoft a lancé la beta de Silverlight 4 comme vous avez pu le lire dans les différentes actualités relayées par Sébastien Pertus, Laurent Duveau ou Patrice Lamarche : Keynote Day 2 : Silverlight 4 annoncé ! (et dispo !!), XAML Futures for .Net and Silverlight, Sortie de Silverlight 4 beta, News de la semaine #18.
Une des nouveautés de cette version 4 est le support du Drag-and-Drop and Clipboard Scenarios.
Il est donc possible maintenant de glisser et déposer un fichier ou un ensemble de fichiers depuis Windows Explorer sur la surface Silverlight. Et de gérer l’événement drop afin de récupérer la liste de fichier déposée afin de la traiter à l’aide des informations de la classe FileInfo.
Pour cela il vous suffit d’ajouter la propriété AllowDrop à True sur n’importe quel UIElement, par exemple sur un ScrollViewer :

< ScrollViewer

   Background="White"

   Width="800"

   MinHeight="600"

   VerticalScrollBarVisibility="Hidden"

   HorizontalScrollBarVisibility="Auto"

   AllowDrop="True">

Le but étant d’utiliser le ‘pattern’ Model View ViewModel (MVVM) afin d’éviter d’avoir du code dans le code behind de notre View, nous utilisons l’excellent framework MVVM Light Toolkit de Laurent Bugnion. Après une courte discussion avec Laurent avant le weekend, j’ai pu expliquer à Laurent ce que je voulais faire et il a gentiment porté sont framework en V3 alpha pour qu’il tourne en Sivlerlight 4 Beta. Merci Laurent !
Donc nous voulons avoir un ViewModel qui aura une Command qui sera appelée lorsque des fichiers seront déposés sur notre ScrollViewer. Pour cela nous créons une classe MainPageViewModel qui hérite de la classe de base ViewModelBase fournit par le framework MVVM Light Toolkit.
Nous ajoutons à notre ViewModel une propriété RelayCommand<DragEventArgs> paramétrée par la classe DragEventArgs, afin de pouvoir recevoir le paramètre de l’événement Drop :

public class MainPageViewModel : ViewModelBase

{

    public MainPageViewModel()

    {

        DropCommand = new RelayCommand<DragEventArgs>(Dropped);

    }

 

    public RelayCommand<DragEventArgs> DropCommand { get; private set; }

 

Puis nous créons la méthode Dropped qui sera appelée lorsque notre commande sera exécutée. Cette méthode à pour but de récupérer la liste des fichiers déposée sur notre ScrollViewer, de lire ces fichiers sous forme de BitmapImage et de les ajouter à une ObservableCollection<BitmapImage> :

private void Dropped(DragEventArgs e)

{

    if (e.Data == null) return;

 

    var files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

 

    if (files == null) return;

 

    foreach (var fileInfo in files)

    {

        using (var fileStream = fileInfo.OpenRead())

        {

            var bitmapImage = new BitmapImage();

            bitmapImage.SetSource(fileStream);

 

            Images.Add(bitmapImage);

            fileStream.Close();

        }  

    }

}

Finalement le constructeur de la classe devient :

public class MainPageViewModel : ViewModelBase

{

    public MainPageViewModel()

    {

        DropCommand = new RelayCommand<DragEventArgs>(Dropped);

 

        Images = new ObservableCollection<BitmapImage>();

    }

 

    public ObservableCollection<BitmapImage> Images { get; private set; }

 

    public RelayCommand<DragEventArgs> DropCommand { get; private set; }

 

Enfin la classe MainPageViewModel est associée au DataContext de notre MainPage :

public partial class MainPage : UserControl

{

    public MainPage()

    {

        InitializeComponent();

 

        this.DataContext = new MainPageViewModel();

    }

}

 

Il nous manque une dernière chose c’est de spécifier dans le XAML de notre MainPage que nous voulons attacher notre commande à l’événement Drop. Pour cela une fois de plus nous utilisons le framework MVVM Light Toolkit et son EventToCommand et spécifiantPassEventArgsToCommand à True afin de recevoir dans notre commande le DragEventArgs:

< ScrollViewer

   Background="White"

   Width="800"

   MinHeight="600"

   VerticalScrollBarVisibility="Hidden"

   HorizontalScrollBarVisibility="Auto"

   AllowDrop="True">

    < i : Interaction.Triggers >

        < i : EventTrigger

           EventName="Drop">

            < cmd : EventToCommand

               Command="{Binding DropCommand,

                                Mode=OneWay}"

               PassEventArgsToCommand="True"

               MustToggleIsEnabledValue="True" />

        </ i : EventTrigger >

    </ i : Interaction.Triggers >

 

Et voilà lorsque nous lançons l’application nous pouvons glisser/déposer des images depuis Windows Explorer sur la surface Silverlight, lire ces images et les afficher dans notre application Silverlight:
 
/content/47733731-6c1e-4104-81c6-acf58e2e21ab/image1.jpeg
 
Pour en savoir plus sur le MVVM Light Toolkit, je vous recommande le blog de Laurent Bugnion en anglais. Ou alors les articles en français de l’ami Richard Clark sur C2i.fr :
 
» Démarrer une discussion