Publié mardi 8 décembre 2009 23:52 par Audrey

[Silverlight] Drag & Drop avec Silverlight 4

Une autre nouveauté de Silverlight 4 Beta est la possibilité de faire du Drag & Drop de fichiers (ou Glisser-Déposer si vous préférez Smile) directement dans votre navigateur préféré. Voici un bout de code pour illustrer cette fonctionnalité !

Tout d'abord voici notre interface de départ :

Le XAML correspondant :

1
2
3
4
5
6
7
8
    <Grid x:Name="LayoutRoot" Height="486" Width="684">
<Grid.Background>
<ImageBrush ImageSource="/SL4DragDop;component/Images/cadre_triple_fini.png" />
</Grid.Background>
<Canvas Height="324" Margin="87,82,83,0" Name="canvas1" VerticalAlignment="Top" Width="514"
                     AllowDrop="True" Drop="canvas1_Drop" Background="White">
<dataInput:Label Canvas.Left="96" Canvas.Top="117" Height="76" Name="label1" Width="330" Content="Déposer ici !" FontSize="48" />
</Canvas>
</Grid>

Deux informations importantes sont à retenir dans ce XAML :

  • La nouvelle propriété AllowDrop qui permet de dire que le canvas peut être utiliser pour du Drag & Drop.
  • Le nouvel évènement Drop qui est déclenché lorsqu'un élément est déposé en Drag & Drop sur l'UIElement auquel il est attaché.

Ensuite du côté du code-behind :

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
private void canvas1_Drop(object sender, DragEventArgs e)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];


foreach (FileInfo file in files)
{
if (file.Extension == ".jpg")
{
Point dropPosition = e.GetPosition(canvas1);

if ((dropPosition.X+150) < canvas1.Width && (dropPosition.Y+150) < canvas1.Height)
{
Stream stream = file.OpenRead();
Image myImg = new Image()
{
Width = 150,
Height = 150
};


BitmapImage myBitmapImg = new BitmapImage();
myBitmapImg.SetSource(stream);
myImg.Source = myBitmapImg;


canvas1.Children.Add(myImg);
myImg.SetValue(Canvas.TopProperty, dropPosition.Y);
myImg.SetValue(Canvas.LeftProperty, dropPosition.X);
}
else
{
MessageBox.Show("Attention l'image dépasse du cadre !");
}
}
}
}

Tout d'abord, on récupére les FileInfo qui ont été déposés en Drag & Drop sur le canvas et on les stock dans un tableau. Un foreach va nous permettre de les afficher sur notre interface (avec une petite condition qui vérifie si les images ne vont pas dépasser du cadre) et de les positionner à l'endroit où on les a déposé précédemment.

Drag & Drop :

Drag & Drop Error Wink :

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Classé sous , ,

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01