Tutorial: Crear un control compuesto con Visual C#

2009 Microsoft Corporation. All rights reserved.

Programacin con formularios Windows Forms

Tutorial: Crear un control compuesto con Visual C#

Los controles compuestos proporcionan un medio para crear y reutilizar interfaces grficas personalizadas. Un control compuesto es esencialmente un componente con una representacin visual. Como tal, puede constar de uno o ms controles de formularios Windows Forms, componentes o bloques de cdigo, que pueden extender su funcionalidad mediante la validacin de la entrada del usuario, la modificacin de las propiedades de presentacin o la ejecucin de otras tareas requeridas por su autor. Los controles compuestos se pueden colocar en formularios Windows Forms del mismo modo que otros controles. En la primera parte del tutorial, crear un control de usuario sencillo denominado ctlClock. En la segunda parte del tutorial, ampliar la funcionalidad de ctlClock a travs de herencia.

Nota
Los cuadros de dilogo y comandos de men que se ven pueden diferir de los descritos en la Ayuda, en funcin de la configuracin activa o la edicin. Para cambiar la configuracin, elija la opcin Importar y exportar configuraciones en el men Herramientas. Para obtener ms informacin, vea Valores de configuracin de Visual Studio [ http://msdn. microsoft.com/es-es/library/zbhkx167(VS.80).aspx ] .

Crear el proyecto
Cuando cree un nuevo proyecto, debe establecer el espacio de nombres de la raz, el nombre de ensamblado y el de proyecto, adems de asegurarse de que el componente predeterminado estar en el espacio de nombres correcto. Para crear la biblioteca de controles ctlClockLib y el control ctlClock 1. En el men Archivo, elija Nuevo y, a continuacin, haga clic en Proyecto para abrir el cuadro de dilogo Nuevo proyecto. 2. En la lista de proyectos de Visual C#, seleccione la plantilla de proyectos Biblioteca de controles de Windows, escriba ctlClockLib en el cuadro Nombre y, a continuacin, haga clic en Aceptar. El nombre del proyecto, ctlClockLib, se asigna tambin de forma predeterminada al espacio de nombres de la raz. El espacio de nombres de la raz se utiliza para calificar los nombres de los componentes del ensamblado. Por ejemplo, si dos ensamblados proporcionan componentes denominados ctlClock, puede especificar el componente ctlClock mediante ctlClockLib. ctlClock. . 3. En el Explorador de soluciones, haga clic con el botn secundario del mouse (ratn) en UserControl1.jsl y haga clic en Cambiar nombre. Cambie el nombre de archivo a ctlClock.cs. Haga clic en el botn S cuando se le pregunte si desea cambiar el nombre de todas las referencias al elemento de cdigo "UserControl1".

Nota
De forma predeterminada, un control compuesto hereda de la clase UserControl [ http://msdn.microsoft.com/ es-es/library/system.windows.forms.usercontrol(VS.80).aspx ] proporcionada por el sistema. La clase UserControl proporciona la funcionalidad necesaria para todos los controles de usuario e implementa mtodos y propiedades estndar.

4. En el men Archivo, elija Guardar todo para guardar el proyecto.

Agregar controles y componentes de Windows al control compuesto

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (1 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

Una parte esencial del control compuesto es una interfaz visual. Esta interfaz visual se implementa mediante la adicin de uno o ms controles de Windows a la superficie del diseador. En la demostracin siguiente, incorporar controles de Windows al control compuesto y escribir cdigo para implementar funcionalidad. Para agregar un control Label y un componente Timer al control compuesto 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en ctlClock.cs y haga clic en Diseador de vistas. 2. En el Cuadro de herramientas, expanda el nodo Controles comunes y, a continuacin, haga doble clic en Label. Un control Label [ http://msdn.microsoft.com/es-es/library/system.windows.forms.label(VS.80). aspx ] denominado label1 se agrega al control en la superficie del diseador. 3. En el diseador, haga clic en label1. En la ventana Propiedades, establezca las propiedades siguientes: Propiedad
Nombre Texto TextAlign Font.Size lblDisplay (Espacio en blanco) MiddleCenter 14

Cambie a

4. En el Cuadro de herramientas, expanda el nodo Componentes y, a continuacin, haga doble clic en el componente Timer. Dado que Timer [ http://msdn.microsoft.com/es-es/library/system.windows.forms.timer(VS.80). aspx ] es un componente, no tiene representacin visual en tiempo de ejecucin. Por tanto, no aparece con los controles en la superficie del diseador, sino en el Diseador de componentes (una bandeja situada en la parte inferior de la superficie del diseador). 5. En el Diseador de componentes, haga clic en timer1 y, a continuacin, establezca la propiedad Interval [ http://msdn.microsoft.com/es-es/library/system.windows.forms.timer.interval(VS.80). aspx ] en 1000 y la propiedad Enabled [ http://msdn.microsoft.com/es-es/library/system.windows. forms.timer.enabled(VS.80).aspx ] en true. La propiedad Interval controla la frecuencia con la que se incrementa el valor del componente Timer. Cada vez que timer1 marca un paso, ejecuta el cdigo del evento timer1_Tick. El intervalo representa el nmero de milisegundos entre paso y paso. 6. En el Diseador de componentes, haga doble clic en Timer1 para ir al evento timer1_Tick de ctlClock. 7. Modifique el cdigo de modo que se asemeje al siguiente ejemplo: Asegrese de cambiar el modificador de acceso de private a protected. [C#] Copiar cdigo

protected void timer1_Tick(object sender, System.EventArgs e) { // Causes the label to display the current time. lblDisplay.Text = DateTime.Now.ToLongTimeString(); }

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (2 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

Este cdigo hace que se muestre la hora actual en lblDisplay. Dado que el intervalo de timer1 se estableci en 1000, este evento se activar cada mil milisegundos, por lo que la hora se actualizar cada segundo. 8. Modifique el mtodo para que pueda reemplazarse, mediante la palabra clave virtual. Para obtener ms informacin, vea la seccin siguiente "Heredar de un control de usuario". Copiar cdigo

protected virtual void timer1_Tick(object sender, System.EventArgs e)

9. En el men Archivo, elija Guardar todo para guardar el proyecto.

Agregar propiedades al control compuesto

El control de reloj encapsula ahora un control Label y un componente Timer, cada uno con su propio conjunto de propiedades inherentes. Aunque las propiedades individuales de estos controles no estarn disponibles para los futuros usuarios del control, puede crear y exponer propiedades personalizadas escribiendo los bloques de cdigo adecuados. En el procedimiento siguiente, agregar al control propiedades que permiten que el usuario cambie el color del fondo y del texto. Para agregar una propiedad al control compuesto 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en ctlClock.cs y haga clic en Ver cdigo. Se abrir el Editor de cdigo para el control. 2. Busque la instruccin public partial class ctlClock. Bajo la llave de apertura ({), escriba el cdigo siguiente. [C#] Copiar cdigo

private Color colFColor; private Color colBColor;

Estas instrucciones crean las variables privadas que se utilizarn para almacenar los valores de las propiedades que va a crear. 3. Escriba el cdigo siguiente bajo las declaraciones de variables del paso 2: [C#] Copiar cdigo

// Declares the name and type of the property. public Color ClockBackColor { // Retrieves the value of the private variable colBColor. get { return colBColor; } // Stores the selected value in the private variable colBColor, and // updates the background color of the label control lblDisplay. set
http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (3 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

} } // Provides a similar set of instructions for the foreground color. public Color ClockForeColor { get { return colFColor; } set { colFColor = value; lblDisplay.ForeColor = colFColor; } }

colBColor = value; lblDisplay.BackColor = colBColor;

El cdigo anterior crea dos propiedades personalizadas, ClockForeColor y ClockBackColor, disponibles para posteriores usuarios de este control. Las instrucciones gety set permiten el almacenamiento y la recuperacin del valor de la propiedad; adems, proporcionan el cdigo necesario para implementar la funcionalidad adecuada para la propiedad. 4. En el men Archivo, elija Guardar todo para guardar el proyecto.

Probar el control
Los controles no son aplicaciones independientes; deben alojarse en un contenedor. Pruebe el comportamiento del control en tiempo de ejecucin y pruebe sus propiedades con el UserControl Test Container. Para obtener ms informacin, vea Cmo: Comprobar el comportamiento de un control de usuario en tiempo de ejecucin [ http://msdn.microsoft.com/es-es/library/ms171738(VS.80).aspx ] . Para probar el control 1. Presione F5 para generar el proyecto y ejecutar el control en el UserControl Test Container. 2. En la cuadrcula de propiedad del contenedor de prueba, busque la propiedad ClockBackColor y, a continuacin, seleccione la propiedad para mostrar la paleta de colores. 3. Haga doble clic en un color para elegirlo. El color de fondo del control cambiar al color seleccionado. 4. Utilice una secuencia de eventos similar para comprobar que la propiedad ClockForeColor funciona como se esperaba. En esta seccin y en las secciones anteriores, vio cmo se pueden combinar componentes y controles de Windows con cdigo y empaquetamiento para ofrecer funcionalidad personalizada en forma de control de usuario. Aprendi a exponer propiedades en el control compuesto, as como a probar el control una vez terminado. En la siguiente seccin, aprender a construir un control de usuario heredado utilizando ctlClock como base.

Heredar de un control compuesto

En las secciones anteriores, aprendi a combinar controles de Windows, componentes y cdigo en controles de usuario reutilizables. Ahora puede utilizar el control compuesto como base a partir de la cual se generarn otros controles. El proceso de derivacin de una clase a partir de una clase base se denomina herencia. En esta seccin, crear un control de usuario denominado ctlAlarmClock. Este control se derivar de su control

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (4 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

principal, ctlClock. Aprender a ampliar la funcionalidad de ctlClock reemplazando los mtodos principales y agregando mtodos y propiedades nuevos. El primer paso para crear un control heredado es derivarlo de su control primario. Esta accin crea un nuevo control que tiene todas las propiedades, mtodos y caractersticas grficas del control primario, pero que tambin acta como base para la adicin de funcionalidad nueva o modificada. Para crear el control heredado 1. En el Explorador de soluciones, haga clic en el proyecto con el botn secundario del mouse (ratn), elija Agregar y haga clic en Control de usuario. Se abrir el cuadro de dilogo Agregar nuevo elemento. 2. Seleccione la plantilla Control de usuario heredado. 3. En el cuadro Nombre, escriba ctlAlarmClock.jsl y haga clic en Agregar. Aparece el cuadro de dilogo Selector de herencia. 4. En Nombre de componente, haga doble clic en ctlClock. 5. En el Explorador de soluciones, examine los proyectos actuales.

Nota
Se ha agregado un archivo denominado que ctlAlarmClock.cs al proyecto actual.

Agregar propiedades de alarma Las propiedades se agregan a un control heredado del mismo modo que se agregan a un control compuesto. Ahora utilizar la sintaxis de declaracin de propiedades para agregar dos propiedades al control: AlarmTime, que almacenar el valor de fecha y hora en que se activar la alarma y AlarmSet, que indica si est establecida o no la alarma. Para agregar propiedades al control compuesto 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en ctlAlarmClock y, a continuacin, haga clic en Ver cdigo. 2. Busque la instruccin public class. Observe que el control hereda de ctlClockLib.ctlClock. Bajo la llave de apertura ({), escriba el cdigo siguiente. [C#] Copiar cdigo

private DateTime dteAlarmTime; private bool blnAlarmSet; // These properties will be declared as public to allow future // developers to access them. public DateTime AlarmTime { get { return dteAlarmTime; } set { dteAlarmTime = value;

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (5 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

} public bool AlarmSet { get { return blnAlarmSet; } set { blnAlarmSet = value; } }

Agregar a la interfaz grfica del control El control heredado tiene una interfaz visual que es idntica a la del control del que se hereda. Posee los mismos controles constituyentes que su control primario, pero las propiedades de los controles constituyentes no estarn disponibles a menos que se expongan de manera especfica. Puede agregar a la interfaz grfica de un control compuesto heredado del mismo modo que agregara a cualquier control compuesto. Para continuar agregando a la interfaz visual de su reloj de alarma, agregar un control Label que parpadear cuando est sonando la alarma. Para agregar el control Label 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en ctlAlarmClock y, a continuacin, haga clic en Ver diseador. Aparecer el diseador de ctlAlarmClock en la ventana principal. 2. Haga clic en la zona de presentacin del control y observe la ventana Propiedades.

Nota
Observe que, aunque se muestran todas las propiedades, estn atenuadas. Esto indica que estas propiedades son nativas de lblDisplay y no se pueden modificar ni se puede tener acceso a ellas en la ventana Propiedades. De manera predeterminada, los controles contenidos en un control compuesto son privados (private) y no se puede tener acceso a sus propiedades de ningn modo.

Nota
Si desea que los futuros usuarios del control de usuario tengan acceso a los controles internos, declrelos como public o protected. Esto le permitir establecer y modificar las propiedades de los controles contenidos en el control compuesto, mediante el cdigo adecuado.

3. Agregue el control Label al control compuesto. 4. Con el mouse (ratn), mueva el control Label justo debajo del cuadro de vista. En la ventana Propiedades, establezca las propiedades siguientes: Propiedad
Nombre Texto TextAlign Visible lblAlarm Alarm! MiddleCenter false

Parmetro

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (6 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

Agregar la funcionalidad de alarma En los procedimientos anteriores, agreg propiedades y un control que habilitar la funcionalidad de alarma en el control compuesto. En este procedimiento, agregar cdigo para comparar la hora actual con la hora de la alarma y, si coinciden, iniciar la alarma. Al anular el mtodo timer1_Tick de ctlClock y agregar cdigo adicional en l, ampliar la capacidad de ctlAlarmClock mientras conserva toda la funcionalidad inherente de ctlClock. Para reemplazar el mtodo timer1_Tick de ctlClock 1. En el Editor de cdigo, busque la instruccin private bool blnAlarmSet;. Justo despus, agregue la siguiente instruccin. [C#] Copiar cdigo

private bool blnColorTicker;

2. En el Editor de cdigo busque la llave de cierre (}) al final de la clase. Inmediatamente antes de la llave, agregue el cdigo siguiente: [C#] Copiar cdigo

protected override void timer1_Tick(object sender, System.EventArgs e) { // Calls the Timer1_Tick method of ctlClock. base.timer1_Tick(sender, e); // Checks to see if the alarm is set. if (AlarmSet == false) return; else // If the date, hour, and minute of the alarm time are the same as // the current time, flash an alarm. { if (AlarmTime.Date == DateTime.Now.Date && AlarmTime.Hour == DateTime.Now.Hour && AlarmTime.Minute == DateTime.Now.Minute) { // Sets lblAlarmVisible to true, and changes the background color based on // the value of blnColorTicker. The background color of the label // will flash once per tick of the clock. lblAlarm.Visible = true; if (blnColorTicker == false) { lblAlarm.BackColor = Color.Red; blnColorTicker = true; } else { lblAlarm.BackColor = Color.Blue; blnColorTicker = false; } } else { // Once the alarm has sounded for a minute, the label is made

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (7 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

// invisible again. lblAlarm.Visible = false;

Al agregar este cdigo se realizan varias tareas. La instruccin override indica al control que utilice este mtodo en lugar del mtodo heredado del control base. Cuando se llama a este mtodo, ste llama al que reemplaza al invocar la instruccin base.timer1_Tick; de este modo, se asegura que toda la funcionalidad incorporada en el control original se reproduzca en este control. A continuacin, ejecuta cdigo adicional para incorporar la funcionalidad de la alarma. Cuando se active la alarma, aparecer un control etiqueta intermitente. El control de reloj de alarma est casi completo. Lo nico que queda es implementar un medio para desactivarlo. Para ello, agregar el cdigo al mtodo lblAlarm_Click. Para implementar el mtodo de apagado 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en ctlClock.cs y haga clic en Ver diseador. Se abrir el diseador. 2. Agregue un botn al control. Establezca las propiedades del botn de la manera siguiente. Propiedad
Nombre Texto btnAlarmOff Disable Alarm

Valor

3. En el diseador, haga doble clic en btnAlarmOff. Se abrir el Editor de cdigo en la lnea private void btnAlarmOff_Click. 4. Modifique este mtodo de forma que se asemeje al cdigo siguiente. [C#] Copiar cdigo

private void btnAlarmOff_Click(object sender, System.EventArgs e) { // Turns off the alarm. AlarmSet = false; // Hides the flashing label. lblAlarm.Visible = false; }

5. En el men Archivo, elija Guardar todo para guardar el proyecto. Utilizar el control heredado en un formulario Puede probar el control heredado de la misma forma que prob el control de la clase base, ctlClock: presione F5 para generar el proyecto y ejecute el control en UserControl Test Container. Para obtener ms informacin, vea Cmo: Comprobar el comportamiento de un control de usuario en tiempo de ejecucin [ http://msdn.microsoft.com/es-es/library/ms171738(VS.80).aspx ] .

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (8 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

Para colocar el control para su uso, tendr que alojarlo en un formulario. Como ocurre con los controles compuestos estndar, los controles compuestos heredados no son independientes y deben alojarse en un formulario o en otro contenedor. Puesto que ctlAlarmClock ofrece una funcionalidad ms profunda, ser necesario cdigo adicional para probarlo. En esta seccin, escribir un programa sencillo para probar la funcionalidad de ctlAlarmClock. Escribir cdigo para definir y mostrar la propiedad AlarmTime de ctlAlarmClock y probar sus funciones heredadas. Para generar y agregar el control a un formulario de prueba 1. En el Explorador de soluciones, haga clic con el botn secundario del mouse (ratn) en ctlClockLib y haga clic en Cambiar nombre. 2. Agregue un nuevo proyecto de Aplicacin para Windows a la solucin y denomnelo Test. 3. En el Explorador de soluciones, haga clic con el botn secundario del mouse (ratn) en el nodo Referencias del proyecto de prueba. Haga clic en Agregar referencia para mostrar el cuadro de dilogo Agregar referencia. Haga clic en la ficha Proyectos. El proyecto ctlClockLib aparecer en la lista Nombre de proyecto. Haga doble clic en el proyecto para agregar la referencia al proyecto de prueba. 4. En el Explorador de soluciones, haga clic con el botn secundario del mouse (ratn) en Test y haga clic en Generar. 5. En el Cuadro de herramientas, expanda el nodo Componentes de ctlClockLib. 6. Haga doble clic en ctlAlarmClock para agregar una copia de ctlAlarmClock al formulario. 7. En el Cuadro de herramientas, busque y haga doble clic en DateTimePicker para agregar un control DateTimePicker [ http://msdn.microsoft.com/es-es/library/system.windows.forms. datetimepicker(VS.80).aspx ] al formulario; a continuacin, haga doble clic en Label para agregar un control Label. 8. Utilice el mouse (ratn) para colocar los controles en un lugar apropiado del formulario. 9. Establezca las propiedades de estos controles de la manera siguiente. Control
label1

Propiedad
Texto Nombre (Espacio en blanco) lblTest dtpTest

Valor

dateTimePicker1

Nombre Formato

Time [ http://msdn.microsoft.com/es-es/library/system.windows. forms.datetimepickerformat.time(VS.80).aspx ]

10. En el diseador, haga doble clic en dtpTest. Se abrir el Editor de cdigo en private void dtpTest_ValueChanged. 11. Modifique el cdigo de modo que se asemeje a lo siguiente. [C#] Copiar cdigo

private void dtpTest_ValueChanged(object sender, System.EventArgs e) { ctlAlarmClock1.AlarmTime = dtpTest.Value; ctlAlarmClock1.AlarmSet = true;

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (9 de 10) [05/10/2009 07:55:13 a.m.]

Tutorial: Crear un control compuesto con Visual C#

lblTest.Text = "Alarm Time is " + ctlAlarmClock1.AlarmTime.ToShortTimeString();

12. En el Explorador de soluciones, haga clic con el botn secundario del mouse (ratn) en Test y, a continuacin, en Establecer como proyecto de inicio. 13. En el men Depurar, haga clic en Iniciar depuracin. Se iniciar el programa de prueba. Observe que la hora actual se actualiza en el control ctlAlarmClock y que la hora de inicio se muestra en el control DateTimePicker. 14. Haga clic en DateTimePicker donde se muestran los minutos. 15. Con el uso del teclado, defina un valor para los minutos que sea un minuto ms que la hora actual que muestra ctlAlarmClock. La hora de la configuracin de la alarma se muestra en lblTest. Espere a que la hora que se muestra alcance la hora establecida para la alarma. Cuando la hora mostrada coincida con la hora a la que est puesta la alarma, se iniciar lblAlarm. 16. Para desactivar la alarma, haga clic en btnAlarmOff. Ahora puede reiniciar la alarma. Este tutorial trataba varios conceptos clave. Aprendi a crear un control compuesto mediante la combinacin de controles y componentes en un contenedor de control compuesto. Aprendi a agregar propiedades al control y a escribir cdigo para implementar funcionalidades personalizadas. En la ltima seccin aprendi a extender la funcionalidad de un control compuesto mediante herencia, y a modificar la funcionalidad de los mtodos alojados reemplazando estos ltimos.

Vea tambin
Tareas Cmo: Mostrar un control en el cuadro de dilogo Personalizar cuadro de herramientas [ http://msdn. microsoft.com/es-es/library/9yxtkx75(VS.80).aspx ] Tutorial: Heredar de un control de formularios Windows Forms con Visual C# [ http://msdn.microsoft.com/ es-es/library/5h0k2e6x(VS.80).aspx ] Cmo: Cambiar el nombre de los identificadores [ http://msdn.microsoft.com/es-es/library/30kf2bw1(VS.80). aspx ] Conceptos Variedades de controles personalizados [ http://msdn.microsoft.com/es-es/library/ms171725(VS.80).aspx ] Otros recursos Programar con componentes [ http://msdn.microsoft.com/es-es/library/0ffkdtkf(VS.80).aspx ] Tutoriales sobre la creacin de componentes [ http://msdn.microsoft.com/es-es/library/6d4270b7(VS.80). aspx ]

Etiquetas:

Contenido de la comunidad

http://msdn.microsoft.com/es-es/library/a6h7e207(VS.80,printer).aspx (10 de 10) [05/10/2009 07:55:13 a.m.]