Publié
mardi 8 décembre 2009 23:52
par
Audrey
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 
) 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 
:
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 :
