Drag-and-drop in Silverlight 2.0

di Marco Leoncini, in Silverlight 2.0,

Una delle prime cose che probabilmente l'utente si aspetta da una RIA è sicuramente la possibilità di trascinare un elemento sullo schermo per alterarne la posizione.

Implementare il drag-and-drop in Silverlight non è difficile, è sufficiente gestire adeguatamente per ogni oggetto tre eventi, MouseLeftButtonDown, MouseLeftButtonUp e MouseMove.

Quest'approccio può essere controproducente nel caso sia necessario implementarlo su un numero importante di elementi.

Al fine di centralizzare la logica di trascinamento la implementeremo utilizzando l'AttachedProperties.

Per prima cosa creiamo una nuova classe chiamandola DragManager, in seguito registriamo l'AttachedProperties:

public static readonly DependencyProperty IsDraggableProperty = DependencyProperty.RegisterAttached(
   "IsDraggable",
   typeof(Boolean),
   typeof(DragManager),
   new PropertyMetadata(false)
);

Il metodo accetta quattro parametri, il nome della proprietà, tipo, proprietario e dei metadati.

Al fine di poter utilizzare l'AttachedProperties è necessario creare due metodi da utilizzare come accessòri.

I due metodi devono rispettare la firma:
public static void Set/Get NomeProprietà (DependencyObject target , tipoProprietà value).

Il metodo più interessante per noi è il SetIsDraggable.

Il metodo riceve come primo parametro non l'oggetto che definisce la proprietà DragManager, ma l'oggetto che la imposta, nel nostro esempio un semplice rettangolo.

public static void SetIsDraggable(UIElement element, Boolean value)
{
    element.SetValue(IsDraggableProperty, value);
    //registrazione eventi
    element.MouseLeftButtonDown += new MouseButtonEventHandler(element_MouseLeftButtonDown);
    element.MouseLeftButtonUp += new MouseButtonEventHandler(element_MouseLeftButtonUp);
    element.MouseMove += new MouseEventHandler(element_MouseMove);
}

Nel metodo recuperato il riferimento all'oggetto, creiamo un event handler per gli eventi MouseLeftButtonDown, MouseMove e MouseLeftButtonUp, dove rispettivamente cattureremo il mouse e ne registreremo la posizione, lo sposteremo e smetteremo solamente quando il tasto sinistro del mouse sarà rilasciato.

Al fine di utilizzare il nostro "DragManager" dovremo per prima cosa registrare il namespace nello XAML e poi impostare la proprietà IsDraggable sugli oggetti che vorremo trascinare:

<UserControl x:Class="DragDropSilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:my="clr-namespace:DragDropSilverlightApplication"    
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Rectangle my:DragManager.IsDraggable="true" Height="50" Width="50" Fill="Red"/>
        <Rectangle Canvas.Left="200" Canvas.Top="50" my:DragManager.IsDraggable="true" Height="50" Width="50" Fill="Red"/>
    </Canvas>
</UserControl>

Allegato allo script è possibile trovare un esempio completo del codice adeguatamente commentato.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi