[WP] Drag & Drop con MouseDragElementBehavior

Probablemente el Drag & Drop es una de las cosas mas divertidas y sencillas que se puede hacer con Silverlight, asi que en la presente entrada explicare como implementarlo.

Referencias

Empezamos agregando 2 referencias a nuestro proyecto: System.Windows.Interactivity y Microsoft.Expression.Interactions. Asegurense que ambas apunten a la misma versión.

XAML

Una vez que hemos hecho las referencias a las librerias previamente mencionadas, debemos agregarlas a nuestro XAML de la siguiente manera y adjuntar el comportamiento correspondiente que en este caso es MouseDragElementBehavior.

Pero para efectos practicos construyamos el XAML de la siguiente manera:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Ellipse Width="180" Height="180" Fill="Azure">
            <i:Interaction.Behaviors>
                <ia:MouseDragElementBehavior DragFinished="MouseDragElementBehavior_DragFinished"/>
            </i:Interaction.Behaviors>
        </Ellipse>

        <Rectangle x:Name="AnotherShape" Height="80" Width="80"
                   HorizontalAlignment="Left" VerticalAlignment="Bottom"
                   Fill="RoyalBlue" Margin="22" ></Rectangle>
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="108,0,0,22">
            <TextBlock Text="Relative to Rectangle"/>
            <TextBlock>
                <Run Text="Position X: "/>
                <Run x:Name="txtRecPositionX"/>
            </TextBlock>
            <TextBlock>
                <Run Text="Position Y: "/>
                <Run x:Name="txtRecPositionY"/>
            </TextBlock>
        </StackPanel>

        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="22">
            <TextBlock Text="Relative to Grid"/>
            <TextBlock>
                <Run Text="Position X: "/>
                <Run x:Name="txtGridPositionX"/>
            </TextBlock>
            <TextBlock>
                <Run Text="Position Y: "/>
                <Run x:Name="txtGridPositionY"/>
            </TextBlock>
        </StackPanel>
    </Grid>

C#

Ahora manejamos el evento e imprimimos la información más relevante la cual es su posición, demonos cuenta también que su posición es relativa a otro elemento, en este caso estamos imprimiendo su posición con respecto a 2 elementos: la grilla que contiene nuestra ellipse y un rectangulo que se encuentra dentro de la grilla también.

    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void MouseDragElementBehavior_DragFinished(object sender, MouseEventArgs e)
        {
            Point position = new Point();

            //Relative to Grid
            position = e.GetPosition(this.LayoutRoot);
            this.txtGridPositionX.Text = position.X.ToString();
            this.txtGridPositionY.Text = position.Y.ToString();

            //Relative to Rectangle
            position = e.GetPosition(this.AnotherShape);
            this.txtRecPositionX.Text = position.X.ToString();
            this.txtRecPositionY.Text = position.Y.ToString();
        }
    }

Solo C#

Si deseas hacer toda su implemetación usando solo C# lo logras de la siguiente manera:

using System.Windows;
using System.Windows.Input;
using Microsoft.Phone.Controls;
using Microsoft.Expression.Interactivity.Layout;

namespace PhoneApp3
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var mouseDragElement = new MouseDragElementBehavior();
            mouseDragElement.DragFinished += MouseDragElementBehavior_DragFinished;
            mouseDragElement.Attach(this.ellipse);
        }

        private void MouseDragElementBehavior_DragFinished(object sender, MouseEventArgs e)
        {
            Point position = new Point();

            //Relative to Grid
            position = e.GetPosition(this.LayoutRoot);
            this.txtGridPositionX.Text = position.X.ToString();
            this.txtGridPositionY.Text = position.Y.ToString();

            //Relative to Rectangle
            position = e.GetPosition(this.AnotherShape);
            this.txtRecPositionX.Text = position.X.ToString();
            this.txtRecPositionY.Text = position.Y.ToString();
        }
    }
}

Cabe indicar que aunque no se esta colocando using System.Windows.Interactivity, sí es importante referenciarla desde nuestro proyecto por que sin esta libreria no podriamos adjuntar ni usar ninguna clase que extienda de Behavior(en este caso MouseDragElementBehavior) ya que precisamente esta es la libreria que trae trae consigo la clase System.Windows.Interactivity.Behavior.

Valido para:

Silverlight 4.0, 5.0
Windows Phone 7.1, Windows 8.0
Windows Presentation Foundation

Ad unit

Eventos

Populares