Tutorial: Habilitar la técnica de arrastrar y colocar en un control de usuario

Este tutorial muestra cómo crear un control de usuario personalizado que pueda participar en la transferencia de datos mediante arrastrar y colocar en Windows Presentation Foundation (WPF).

En este tutorial, creará un control UserControl personalizado de WPF que representa una forma circular. Implementará la funcionalidad del control para habilitar la transferencia de datos mediante arrastrar y colocar. Por ejemplo, si arrastra desde un control Circle a otro, los datos de color de relleno se copian del círculo del origen al de destino. Si arrastra de un control Circle a TextBox, la representación de cadena del color de relleno se copia a TextBox. También creará una pequeña aplicación que contenga dos controles de panel y TextBox para probar la funcionalidad de arrastrar y colocar. Escribirá código que permita a los paneles procesar los datos de Circle colocados, lo que le permitirá mover o copiar círculos de la colección de elementos secundarios de un panel a otro.

En este tutorial se muestran las tareas siguientes:

• Crear un control de usuario personalizado.

• Permitir al control de usuario ser un origen de arrastre.

• Permitir al control de usuario ser un destino de colocación.

• Permitir a un panel recibir los datos colocados desde el control de usuario.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010

Crear el proyecto de aplicación

En esta sección, creará la infraestructura de la aplicación, que incluye una página principal con dos paneles y TextBox.

Para crear el proyecto

1. Cree un nuevo proyecto de aplicación WPF en Visual Basic o en Visual C# denominado DragDropExample. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

2. Abra MainWindow.xaml.

3. Entre las etiquetas de apertura y cierre Grid, agregue el marcado siguiente.

   Este marcado crea la interfaz de usuario para la aplicación de prueba.

Agregar un nuevo control de usuario al proyecto

En esta sección, agregará un nuevo control de usuario al proyecto.

Para agregar a un nuevo control de usuario

1. En el menú Proyecto, seleccione Agregar control de usuario.

2. En el cuadro de diálogo Agregar nuevo elemento, cambie el nombre a Circle.xaml y haga clic en Agregar.

   Circle.xaml y su código subyacente se agregan al proyecto.

3. Abra Circle.xaml.

   Este archivo contendrá los elementos de la interfaz de usuario del control de usuario.

4. Agregue el marcado siguiente al elemento Grid raíz para crear un control de usuario simple con un círculo azul como interfaz de usuario.

5. Abra Circle.xaml.cs o Circle.xaml.vb.

6. En C#, agregue el código siguiente después del constructor predeterminado para crear un constructor de copia. En Visual Basic, agregue el código siguiente para crear un constructor predeterminado y un constructor de copia.

   Para permitir que el control de usuario se pueda copiar, agregará un método constructor de copia en el archivo de código subyacente. En el control de usuario Circle simplificado, copiará sólo el relleno y el tamaño del control de usuario.

Para agregar el control de usuario a la ventana principal

1. Abra MainWindow.xaml.

2. Agregue el código XAML siguiente a la etiqueta Window de apertura para crear una referencia de espacio de nombres XML a la aplicación actual.

   xmlns:local="clr-namespace:DragDropExample"
   

3. En el primer StackPanel, agregue el siguiente XAML para crear dos instancias del control de usuario Circle en el primer panel.

   El XAML completo del panel tendrá un aspecto similar al siguiente.

Implementar eventos de origen de arrastre en el control de usuario

En esta sección, reemplazará el método OnMouseMove e iniciará la operación de arrastrar y colocar.

Si se inicia una arrastre (se presiona un botón del mouse y se mueve el mouse), empaquetará los datos que se transferirán en un DataObject. En este caso, el control Circle empaquetará tres elementos de datos; una representación de cadena del color de relleno, una representación doble de su alto y una copia de sí mismo.

Para iniciar una operación de arrastrar y colocar

1. Abra Circle.xaml.cs o Circle.xaml.vb.

2. Agregue la siguiente invalidación de OnMouseMove para proporcionar control de clases para el evento MouseMove.

   La invalidación de OnMouseMove realiza las tareas siguientes:

   • Comprueba si el botón primario del mouse está presionado mientras se mueve el mouse.

   • Empaqueta los datos de Circle en un DataObject. En este caso, el control Circle empaqueta tres elementos de datos; una representación de cadena del color de relleno, una representación doble de su alto y una copia de sí mismo.

   • Llama al método estático DragDrop.DoDragDrop para iniciar la operación de arrastrar y colocar. Pase los tres parámetros siguientes al método DoDragDrop:

     • dragSource : una referencia a este control.

     • data: el DataObject creado en el código anterior.

     • allowedEffects : las operaciones de arrastrar y colocar permitidas, que son Copy o Move.

3. Presione F5 para compilar y ejecutar la aplicación.

4. Haga clic en uno de los controles Circle y arrástrelo sobre los paneles, el otro círculo, y el control TextBox. Al arrastrar sobre TextBox, el cursor cambia para indicar un movimiento.

5. Al arrastrar un círculo sobre TextBox, presione la tecla CTRL. Observe cómo cambia el cursor para indicar una copia.

6. Arrastre y coloque un círculo sobre TextBox. La representación de cadena del color de relleno del círculo se agrega a TextBox.

De forma predeterminada, el cursor cambiará durante una operación de arrastrar y colocar para indicar qué efecto tendrá la colocación de los datos. Puede personalizar los comentarios proporcionados al usuario si controla el evento GiveFeedback y establece un cursor diferente.

Para proporcionar información al usuario

1. Abra Circle.xaml.cs o Circle.xaml.vb.

2. Agregue la siguiente invalidación de OnGiveFeedback para proporcionar control de clases para el evento GiveFeedback.

   La invalidación de OnGiveFeedback realiza las tareas siguientes:

   • Comprueba los valores de Effects que se establecen en el controlador de eventos DragOver del destino de colocación.

   • Establece un cursor personalizado basado en el valor de Effects. El cursor está diseñado para proporcionar información visual al usuario sobre qué efecto tendrá la colocación de los datos.

3. Presione F5 para compilar y ejecutar la aplicación.

4. Arrastre uno de los controles Circle sobre los paneles, el otro círculo y el control TextBox. Observe que los cursores son ahora los cursores personalizados que especificó en la invalidación de OnGiveFeedback.

5. Seleccione el texto green de TextBox.

6. Arrastre el texto green a un control Circle. Observe que los cursores predeterminados se muestran para indicar los efectos de la operación de arrastrar y colocar. El origen de arrastre establece siempre el cursor de comentarios.

Implementar eventos de destino de colocación en el control de usuario

En esta sección, especificará que el control de usuario sea un destino de colocación, reemplazará los métodos que permiten que el control de usuario sea un destino de colocación y procesará los datos que se colocan en él.

Para permitir que el control de usuario sea un destino de colocación

1. Abra Circle.xaml.

2. En la etiqueta UserControl de apertura, agregue la propiedad AllowDrop y establézcala en true.

Se llama al método OnDrop cuando la propiedad AllowDrop se establece en true y los datos del origen de arrastre se colocan en el control de usuario Circle. En este método, procesará los datos que se han quitado y aplicará los datos al círculo.

Para procesar los datos colocados

1. Abra Circle.xaml.cs o Circle.xaml.vb.

2. Agregue la siguiente invalidación de OnDrop para proporcionar control de clases para el evento Drop.

   La invalidación de OnDrop realiza las tareas siguientes:

   • Utiliza el método GetDataPresent para comprobar si los datos arrastrados contienen un objeto de cadena.

   • Utiliza el método GetData para extraer los datos de cadena si están presentes.

   • Utiliza BrushConverter para intentar convertir la cadena en Brush.

   • Si la conversión se realiza correctamente, se aplica el pincel al valor Fill del objeto Ellipse que proporciona la interfaz de usuario del control Circle.

   • Marca el evento Drop como controlado. Debe marcar el evento de colocación como controlado para que los otros elementos que reciben este evento sepan que el control de usuario Circle lo controló.

3. Presione F5 para compilar y ejecutar la aplicación.

4. Seleccione el texto greenen TextBox.

5. Arrastre el texto hasta un control Circle y colóquelo. El círculo cambia de azul a verde.

6. Escriba el texto green en TextBox.

7. Seleccione el texto gre en TextBox.

8. Arrástrelo hasta un control Circle y colóquelo. Observe que el cursor cambia para indicar que se permite la colocación, pero el color del círculo no cambia porque gre no es un color válido.

9. Arrastre desde el control Circle verde y coloque en el control Circle azul. El círculo cambia de azul a verde. Observe que el cursor que se muestra depende de si el origen de arrastre es TextBox o el círculo.

Establecer la propiedad AllowDrop en true y procesar los datos colocados es todo lo que hace falta para permitir que un elemento sea un destino de colocación. Sin embargo, para que la experiencia de usuario sea mejor, también debería controlar los eventos DragEnter, DragLeave y DragOver. En estos eventos, puede realizar comprobaciones y proporcionar información adicional al usuario antes de colocar los datos.

Cuando los datos se arrastran sobre el control de usuario Circle, el control debe notificar al origen de arrastre si puede procesar los datos que se están arrastrando. Si el control no sabe cómo procesar los datos, debe rechazar la colocación. Para ello, controlará el evento DragOver y establecerá la propiedad Effects.

Para comprobar que se permite la colocación de los datos

1. Abra Circle.xaml.cs o Circle.xaml.vb.

2. Agregue la siguiente invalidación de OnDragOver para proporcionar control de clases para el evento DragOver.

   La invalidación de OnDragOver realiza las tareas siguientes:

   • Establece la propiedad Effects en None.

   • Realiza las mismas comprobaciones que se realizan en el método OnDrop para determinar si el control de usuario Circle puede procesar los datos arrastrados.

   • Si el control de usuario puede procesar los datos, establece la propiedad Effects en Copy o Move.

3. Presione F5 para compilar y ejecutar la aplicación.

4. Seleccione el texto gre en TextBox.

5. Arrastre el texto hasta un control Circle. Observe que ahora el cursor cambia para indicar que no se permite la colocación porque gre no es un color válido.

Puede mejorar aún más la experiencia del usuario aplicando una vista previa de la operación de colocar. Para el control de usuario Circle, invalidará los métodos OnDragEnter y OnDragLeave. Cuando los datos se arrastran sobre el control, el valor Fill de fondo actual se guarda en una variable de marcador de posición. A continuación, la cadena se convierte en un pincel y se aplica al objeto Ellipse que proporciona la interfaz de usuario del círculo. Si los datos se arrastran fuera del círculo sin colocarse, se vuelve a aplicar al círculo el valor original de Fill.

Para obtener una vista previa de los efectos de la operación de arrastrar y colocar

1. Abra Circle.xaml.cs o Circle.xaml.vb.

2. En la clase Circle, declare una variable privada Brush denominada _previousFill e inicialícela en null.

3. Agregue la siguiente invalidación de OnDragEnter para proporcionar control de clases para el evento DragEnter.

   La invalidación de OnDragEnter realiza las tareas siguientes:

   • Guarda la propiedad Fill de Ellipse en la variable _previousFill.

   • Realiza las mismas comprobaciones que se realizan en el método OnDrop para determinar si los datos se pueden convertir a Brush.

   • Si los datos se convierten en un Brush válido, se aplica a la propiedad Fill de Ellipse.

4. Agregue la siguiente invalidación de OnDragLeave para proporcionar control de clases para el evento DragLeave.

   La invalidación de OnDragLeave realiza las tareas siguientes:

   • Aplica el Brush guardado en la variable _previousFill a la propiedad Fill del objeto Ellipse que proporciona la interfaz de usuario del control de usuario Circle.

5. Presione F5 para compilar y ejecutar la aplicación.

6. Seleccione el texto greenen TextBox.

7. Arrastre el texto sobre un control Circle sin colocarlo. El círculo cambia de azul a verde.

8. Arrastre el texto fuera del control Circle. El círculo cambia de nuevo de verde a azul.

Habilitar un panel para recibir los datos colocados

En esta sección, permitirá que los paneles que hospedan los controles de usuario Circle actúen como destinos de colocación para los datos de Circle arrastrados. Implementará código que permita mover un círculo de un panel a otro, o realizar una copia de un control Circle manteniendo presionada la tecla CTRL mientras se arrastra y coloca un círculo.

Para permitir que el panel sea un destino de colocación

1. Abra MainWindow.xaml.

2. Como se muestra en el código XAML siguiente, en cada uno de los controles StackPanel, agregue controladores para los eventos DragOver y Drop. Dé al controlador de eventos DragOver el nombre panel_DragOver y dé al controlador de eventos Drop el nombre panel_Drop.

3. Abra MainWindows.xaml.cs o MainWindow.xaml.vb.

4. Agregue el código siguiente para el controlador de eventos DragOver.

   Este controlador de eventos DragOver realiza las tareas siguientes:

   • Comprueba si los datos arrastrados contienen los datos de "objeto" empaquetados en DataObject por el control de usuario Circle y pasados en la llamada a DoDragDrop.

   • Si los datos de "objeto" están presentes, comprueba si la tecla CTRL está presionada.

   • Si la tecla CTRL está presionada, establece la propiedad Effects en Copy. En caso contrario, la propiedad Effects se establece en Move.

5. Agregue el código siguiente para el controlador de eventos Drop.

   Este controlador de eventos Drop realiza las tareas siguientes:

   • Comprueba si el evento Drop ya se ha controlado. Por ejemplo, si un círculo se coloca en otro círculo que controla el evento Drop, no sería deseable que lo controlase también el panel que contiene el círculo.

   • Si el evento Drop no está controlado, comprueba si la tecla CTRL está presionada.

   • Si la tecla CTRL está presionada cuando se produce Drop, realiza una copia de control Circle y la agrega a la colección Children de StackPanel.

   • Si la tecla CTRL no está presionada, desplaza el círculo desde la colección de Children del panel primario hasta la colección Children del panel en el que se colocó.

   • Establece la propiedad Effects para notificar al método DoDragDrop si se realizó una operación de mover o copiar.

6. Presione F5 para compilar y ejecutar la aplicación.

7. Seleccione el texto green de TextBox.

8. Arrastre el texto sobre un control Circle y colóquelo.

9. Arrastre un control Circle del panel izquierdo al panel derecho y colóquelo. El círculo se quita de la colección de Children del panel izquierdo y se agrega a la colección Children del panel derecho.

10. Arrastre un control Circle del panel donde se encuentra hasta el otro panel y colóquelo mientras presiona la tecla CTRL. Se copia el círculo y la copia se agrega a la colección Children del panel receptor.

Vea también

Conceptos

Información general sobre la función de arrastrar y colocar

Historial de cambios

Fecha	Historial	Motivo
1 de abril de 2011	Se ha agregado un tema.	Comentarios de los clientes.