Tutorial: Crear un control compuesto con Visual BasicWalkthrough: Authoring a Composite Control with Visual Basic

Los controles compuestos proporcionan una forma de crear y reutilizar interfaces gráficas personalizadas.Composite controls provide a means by which custom graphical interfaces can be created and reused. Un control compuesto es esencialmente un componente con una representación visual.A composite control is essentially a component with a visual representation. Como tal, puede constar de uno o varios controles de Windows Forms, componentes o bloques de código que pueden extender funcionalidad al validar la entrada del usuario, modificar propiedades de presentación o realizar otras tareas requeridas por el autor.As such, it might consist of one or more Windows Forms controls, components, or blocks of code that can extend functionality by validating user input, modifying display properties, or performing other tasks required by the author. Los controles compuestos se pueden colocar en Windows Forms de la misma manera que otros controles.Composite controls can be placed on Windows Forms in the same manner as other controls. En la primera parte de este tutorial, creará un control compuesto simple denominado ctlClock.In the first part of this walkthrough, you create a simple composite control called ctlClock. En la segunda parte, extenderá la funcionalidad de ctlClock mediante herencia.In the second part of the walkthrough, you extend the functionality of ctlClock through inheritance.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos.The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas .To change your settings, choose Import and Export Settings on the Tools menu. Para más información, vea Personalizar el IDE de Visual Studio.For more information, see Personalize the Visual Studio IDE.

Crear el proyectoCreating the Project

Cuando cree un proyecto, especifique su nombre para establecer el espacio de nombres raíz, el nombre de ensamblado y el nombre del proyecto, y asegúrese de que el componente predeterminado estará en el espacio de nombres correcto.When you create a new project, you specify its name to set the root namespace, assembly name, and project name, and ensure that the default component will be in the correct namespace.

Para crear la biblioteca de controles ctlClockLib y el control ctlClockTo create the ctlClockLib control library and the ctlClock control

  1. En el menú Archivo, elija Nuevo y haga clic en Proyecto para abrir el cuadro de diálogo Nuevo proyecto.On the File menu, point to New, and then click Project to open the New Project dialog box.

  2. En la lista de proyectos de Visual Basic, seleccione el biblioteca de controles de Windows plantilla de proyecto, escriba ctlClockLib en el nombre cuadro y, a continuación, haga clic en Aceptar.From the list of Visual Basic projects, select the Windows Control Library project template, type ctlClockLib in the Name box, and then click OK.

    El nombre del proyecto, ctlClockLib también se asigna de forma predeterminada al espacio de nombres raíz.The project name, ctlClockLib, is also assigned to the root namespace by default. El espacio de nombres raíz se utiliza para calificar los nombres de los componentes del ensamblado.The root namespace is used to qualify the names of components in the assembly. Por ejemplo, si dos ensamblados proporcionan componentes denominados ctlClock, puede especificar su componente ctlClock mediante ctlClockLib.ctlClock.For example, if two assemblies provide components named ctlClock, you can specify your ctlClock component using ctlClockLib.ctlClock.

  3. En el Explorador de soluciones, haga clic con el botón derecho en UserControl1.vb y haga clic en Cambiar nombre.In Solution Explorer, right-click UserControl1.vb, and then click Rename. Cambie el nombre del archivo a ctlClock.vb.Change the file name to ctlClock.vb. Haga clic en el botón cuando se le pregunte si desea cambiar el nombre de todas las referencias al elemento de código "UserControl1".Click the Yes button when you are asked if you want to rename all references to the code element "UserControl1".

    Nota

    De forma predeterminada, un control compuesto hereda el UserControl clase proporcionada por el sistema.By default, a composite control inherits from the UserControl class provided by the system. La UserControl clase proporciona la funcionalidad requerida por todos los controles compuestos e implementa los métodos y propiedades estándar.The UserControl class provides functionality required by all composite controls, and implements standard methods and properties.

  4. En el menú Archivo, haga clic en Guardar todo para guardar el proyecto.On the File menu, click Save All to save the project.

Agregar componentes y controles de Windows al control compuestoAdding Windows Controls and Components to the Composite Control

Una interfaz visual es una parte esencial de su control compuesto.A visual interface is an essential part of your composite control. Esta interfaz visual se implementa agregando uno o más controles de Windows a la superficie del diseñador.This visual interface is implemented by the addition of one or more Windows controls to the designer surface. En la demostración siguiente, incorporará controles de Windows al control compuesto y escribirá código para implementar funcionalidad.In the following demonstration, you will incorporate Windows controls into your composite control and write code to implement functionality.

Para agregar una etiqueta y un temporizador al control compuestoTo add a Label and a Timer to your composite control

  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlClock.vb y haga clic en Ver diseñador.In Solution Explorer, right-click ctlClock.vb, and then click View Designer.

  2. En el cuadro de herramientas, expanda el nodo Controles comunes y haga doble clic en Label.In the Toolbox, expand the Common Controls node, and then double-click Label.

    Un Label control denominado Label1 se agrega al control en la superficie del diseñador.A Label control named Label1 is added to your control on the designer surface.

  3. En el diseñador, haga clic en label1.In the designer, click Label1. En la ventana Propiedades, establezca las propiedades siguientes.In the Properties window, set the following properties.

    PropertyProperty Cambiar aChange to
    NameName lblDisplay
    TextoText (blank space)
    TextAlignTextAlign MiddleCenter
    Font.SizeFont.Size 14
  4. En el cuadro de herramientas, expanda el nodo Componentes y haga doble clic en Temporizador.In the Toolbox, expand the Components node, and then double-click Timer.

    Dado que un Timer es un componente, no tiene representación visual en tiempo de ejecución.Because a Timer is a component, it has no visual representation at run time. Por lo tanto, no aparece con los controles en la superficie del diseñador, sino en el Diseñador de componentes (una bandeja en la parte inferior de la superficie del diseñador).Therefore, it does not appear with the controls on the designer surface, but rather in the Component Designer (a tray at the bottom of the designer surface).

  5. En el Diseñador de componentes, haga clic en Timer1y, a continuación, establezca el Interval propiedad 1000 y el Enabled propiedad True.In the Component Designer, click Timer1, and then set the Interval property to 1000 and the Enabled property to True.

    El Interval propiedad controla la frecuencia con la que el componente timer hace TIC.The Interval property controls the frequency with which the timer component ticks. Cada vez que Timer1 hace tic, se ejecuta el código en el evento Timer1_Tick.Each time Timer1 ticks, it runs the code in the Timer1_Tick event. El intervalo representa el número de milisegundos entre tics.The interval represents the number of milliseconds between ticks.

  6. En el Diseñador de componentes, haga doble clic en Timer1 para ir al evento Timer1_Tick de ctlClock.In the Component Designer, double-click Timer1 to go to the Timer1_Tick event for ctlClock.

  7. Modifique el código para que se parezca al siguiente ejemplo.Modify the code so that it resembles the following code sample. Asegúrese de cambiar el modificador de acceso de Private a Protected.Be sure to change the access modifier from Private to Protected.

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As _  
        System.EventArgs) Handles Timer1.Tick  
        ' Causes the label to display the current time.    
        lblDisplay.Text = Format(Now, "hh:mm:ss")  
    End Sub  
    

    Este código hará que la hora actual se muestre en lblDisplay.This code will cause the current time to be shown in lblDisplay. Como el intervalo de Timer1 se estableció en 1000, este evento se producirá cada mil milisegundos, lo que actualiza la hora actual cada segundo.Because the interval of Timer1 was set to 1000, this event will occur every thousand milliseconds, thus updating the current time every second.

  8. Modifique el método para que se pueda invalidar.Modify the method to be overridable. Para más información, consulte la sección "Heredar de un control de usuario", más adelante.For more information, see the "Inheriting from a User Control" section below.

    Protected Overridable Sub Timer1_Tick(ByVal sender As Object, ByVal _  
        e As System.EventArgs) Handles Timer1.Tick  
    
  9. En el menú Archivo, haga clic en Guardar todo para guardar el proyecto.On the File menu, click Save All to save the project.

Agregar propiedades al control compuestoAdding Properties to the Composite Control

El control de reloj encapsula ahora un Label control y un Timer componente, cada uno con su propio conjunto de propiedades inherentes.Your clock control now encapsulates a Label control and a Timer component, each with its own set of inherent properties. Aunque las propiedades individuales de estos controles no resultarán accesibles a los usuarios posteriores del control, puede crear y exponer propiedades personalizadas escribiendo los bloques de código adecuados.While the individual properties of these controls will not be accessible to subsequent users of your control, you can create and expose custom properties by writing the appropriate blocks of code. En el siguiente procedimiento, agregará al control propiedades que permiten al usuario cambiar el color de fondo y del texto.In the following procedure, you will add properties to your control that enable the user to change the color of the background and text.

Para agregar una propiedad al control compuestoTo add a property to your composite control

  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlClock.vb y haga clic en Ver código.In Solution Explorer, right-click ctlClock.vb, and then click View Code.

    Se abre el Editor de código del control.The Code Editor for your control opens.

  2. Busque la instrucción Public Class ctlClock.Locate the Public Class ctlClock statement. Debajo de ella, escriba el siguiente código.Beneath it, type the following code.

    Private colFColor as Color  
    Private colBColor as Color  
    

    Estas instrucciones crean las variables privadas que usará para almacenar los valores de las propiedades que va a crear.These statements create the private variables that you will use to store the values for the properties you are about to create.

  3. Inserte el código siguiente debajo de las declaraciones de variable del paso 2.Insert the following code beneath the variable declarations from step 2.

    ' Declares the name and type of the property.  
    Property ClockBackColor() as Color  
        ' Retrieves the value of the private variable colBColor.  
        Get  
            Return colBColor  
        End Get  
        ' Stores the selected value in the private variable colBColor, and   
        ' updates the background color of the label control lblDisplay.  
        Set(ByVal value as Color)  
            colBColor = value  
            lblDisplay.BackColor = colBColor     
        End Set  
    
    End Property  
    ' Provides a similar set of instructions for the foreground color.  
    Property ClockForeColor() as Color  
        Get  
            Return colFColor  
        End Get  
        Set(ByVal value as Color)  
            colFColor = value  
            lblDisplay.ForeColor = colFColor  
        End Set  
    End Property  
    

    El código anterior crea dos propiedades personalizadas, ClockForeColor y ClockBackColor, que estarán disponibles para que posteriores usuarios de este control las invoquen mediante la instrucción Property.The preceding code makes two custom properties, ClockForeColor and ClockBackColor, available to subsequent users of this control by invoking the Property statement. Las instrucciones Get y Set permiten almacenar y recuperar el valor de propiedad, además de proporcionar código para implementar funcionalidad adecuada para la propiedad.The Get and Set statements provide for storage and retrieval of the property value, as well as code to implement functionality appropriate to the property.

  4. En el menú Archivo, haga clic en Guardar todo para guardar el proyecto.On the File menu, click Save All to save the project.

Probar el controlTesting the Control

Los controles no son proyectos independientes; deben hospedarse en un contenedor.Controls are not stand-alone projects; they must be hosted in a container. Pruebe el comportamiento en tiempo de ejecución del control y sus propiedades con UserControl Test Container.Test your control's run-time behavior and exercise its properties with the UserControl Test Container. Para obtener más información, vea Cómo: Probar el comportamiento de tiempo de ejecución de una clase UserControl.For more information, see How to: Test the Run-Time Behavior of a UserControl.

Para probar el controlTo test your control

  1. Presione F5 para compilar el proyecto y ejecutar el control en UserControl Test Container.Press F5 to build the project and run your control in the UserControl Test Container.

  2. En la cuadrícula de propiedades del contenedor de prueba, seleccione la propiedad ClockBackColor y haga clic en la flecha desplegable para mostrar la paleta de colores.In the test container's property grid, select the ClockBackColor property, and then click the drop-down arrow to display the color palette.

  3. Haga clic en un color para elegirlo.Choose a color by clicking it.

    El color de fondo del control cambia al color seleccionado.The background color of your control changes to the color you selected.

  4. Use una secuencia similar de eventos para comprobar que la propiedad ClockForeColor funciona según lo esperado.Use a similar sequence of events to verify that the ClockForeColor property is functioning as expected.

  5. Haga clic en Cerrar para cerrar UserControl Test Container.Click Close to close the UserControl Test Container.

    En esta sección y en las anteriores, ha visto cómo se pueden combinar componentes y controles de Windows con código y empaquetado para ofrecer funcionalidad personalizada en forma de control compuesto.In this section and the preceding sections, you have seen how components and Windows controls can be combined with code and packaging to provide custom functionality in the form of a composite control. Ha aprendido a exponer propiedades en el control compuesto y a probar el control una vez completado.You have learned to expose properties in your composite control, and how to test your control after it is complete. En la siguiente sección, aprenderá a crear un control compuesto heredado utilizando ctlClock como base.In the next section you will learn how to construct an inherited composite control using ctlClock as a base.

Heredar de un control compuestoInheriting from a Composite Control

En las secciones anteriores, ha aprendido a combinar controles de Windows, componentes y código en controles compuestos reutilizables.In the previous sections, you learned how to combine Windows controls, components, and code into reusable composite controls. Ahora puede utilizar su control compuesto como base sobre la que crear otros controles.Your composite control can now be used as a base upon which other controls can be built. El proceso de derivar una clase a partir de una clase base se denomina herencia.The process of deriving a class from a base class is called inheritance. En esta sección, creará un control de usuario denominado ctlAlarmClock.In this section, you will create a composite control called ctlAlarmClock. Este control se derivará de su control primario, ctlClock.This control will be derived from its parent control, ctlClock. Aprenderá a extender la funcionalidad de ctlClock reemplazando los métodos primarios y agregando nuevos métodos y propiedades.You will learn to extend the functionality of ctlClock by overriding parent methods and adding new methods and properties.

El primer paso para crear un control heredado es derivarlo de su elemento primario.The first step in creating an inherited control is to derive it from its parent. Esta acción crea un control que tiene todas las propiedades, los métodos y las características gráficas del control primario, pero que también puede servir de base para agregar funcionalidad nueva o modificada.This action creates a new control that has all of the properties, methods, and graphical characteristics of the parent control, but can also act as a base for the addition of new or modified functionality.

Para crear el control heredadoTo create the inherited control

  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlClockLib, elija Agregar y haga clic en Control de usuario.In Solution Explorer, right-click ctlClockLib, point to Add, and then click User Control.

    Se abre el cuadro de diálogo Agregar nuevo elemento.The Add New Item dialog box opens.

  2. Seleccione la plantilla Control de usuario heredado.Select the Inherited User Control template.

  3. En el cuadro Nombre, escriba ctlAlarmClock.vb y haga clic en Agregar.In the Name box, type ctlAlarmClock.vb, and then click Add.

    Aparece el cuadro de diálogo Selector de herencia.The Inheritance Picker dialog box appears.

  4. En Nombre de componente, haga doble clic en ctlClock.Under Component Name, double-click ctlClock.

  5. En el Explorador de soluciones, examine los proyectos actuales.In Solution Explorer, browse through the current projects.

    Nota

    Se ha agregado un archivo denominado ctlAlarmClock.vb al proyecto actual.A file called ctlAlarmClock.vb has been added to the current project.

Agregar las propiedades de alarmaAdding the Alarm Properties

Las propiedades se agregan a un control heredado de la misma forma que si fuera un control compuesto.Properties are added to an inherited control in the same way they are added to a composite control. Ahora utilizará la sintaxis de declaración de propiedades para agregar dos propiedades al control: AlarmTime, que almacenará el valor de la fecha y la hora en que debe activarse la alarma, y AlarmSet, que indicará si la alarma está definida.You will now use the property declaration syntax to add two properties to your control: AlarmTime, which will store the value of the date and time the alarm is to go off, and AlarmSet, which will indicate whether the alarm is set.

Para agregar propiedades al control compuestoTo add properties to your composite control
  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlAlarmClock y haga clic en Ver código.In Solution Explorer, right-click ctlAlarmClock, and then click View Code.

  2. Busque la declaración de clase del control ctlAlarmClock, que aparece como Public Class ctlAlarmClock.Locate the class declaration for the ctlAlarmClock control, which appears as Public Class ctlAlarmClock. Inserte el siguiente código en la declaración de clase.In the class declaration, insert the following code.

    Private dteAlarmTime As Date  
    Private blnAlarmSet As Boolean  
    ' These properties will be declared as Public to allow future   
    ' developers to access them.  
    Public Property AlarmTime() As Date  
        Get  
            Return dteAlarmTime  
        End Get  
        Set(ByVal value as Date)  
            dteAlarmTime = value  
        End Set  
    End Property  
    Public Property AlarmSet() As Boolean  
        Get  
            Return blnAlarmSet  
        End Get  
        Set(ByVal value as Boolean)  
            blnAlarmSet = value  
        End Set  
    End Property  
    

Agregar a la interfaz gráfica del controlAdding to the Graphical Interface of the Control

El control heredado tiene una interfaz visual que es idéntica a la del control del que hereda.Your inherited control has a visual interface that is identical to the control it inherits from. Posee los mismos controles constituyentes que su control primario, pero las propiedades de estos no estarán disponibles a menos que se expusieran específicamente.It possesses the same constituent controls as its parent control, but the properties of the constituent controls will not be available unless they were specifically exposed. Puede agregar a la interfaz gráfica de un control compuesto heredado del mismo modo que agregaría a cualquier control compuesto.You may add to the graphical interface of an inherited composite control in the same manner as you would add to any composite control. Para seguir agregando a la interfaz visual de su reloj despertador, agregará un control de etiqueta que parpadeará cuando suene la alarma.To continue adding to your alarm clock's visual interface, you will add a label control that will flash when the alarm is sounding.

Para agregar el control de etiquetaTo add the label control
  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlAlarmClock y haga clic en Ver diseñador.In Solution Explorer, right-click ctlAlarmClock, and click View Designer.

    Se abre el diseñador para ctlAlarmClock en la ventana principal.The designer for ctlAlarmClock opens in the main window.

  2. Haga clic en lblDisplay (la parte de visualización del control) y observe la ventana Propiedades.Click lblDisplay (the display portion of the control), and view the Properties window.

    Nota

    Aunque se muestran todas las propiedades, están atenuadas.While all the properties are displayed, they are dimmed. Esto indica que estas propiedades son nativas de lblDisplay y no se pueden modificar ni se puede acceder a ellas en la ventana Propiedades.This indicates that these properties are native to lblDisplay and cannot be modified or accessed in the Properties window. De forma predeterminada, los controles contenidos en un control compuesto son Private, y sus propiedades no son accesibles por ningún medio.By default, controls contained in a composite control are Private, and their properties are not accessible by any means.

    Nota

    Si desea que los posteriores usuarios de su control compuesto tengan acceso a sus controles internos, declárelos como Public o Protected.If you want subsequent users of your composite control to have access to its internal controls, declare them as Public or Protected. Esto le permitirá establecer y modificar las propiedades de los controles contenidos en el control compuesto mediante el código adecuado.This will allow you to set and modify properties of controls contained within your composite control by using the appropriate code.

  3. Agregar un Label control al control compuesto.Add a Label control to your composite control.

  4. Con el mouse, arrastre el Label control inmediatamente debajo del cuadro de visualización.Using the mouse, drag the Label control immediately beneath the display box. En la ventana Propiedades, establezca las propiedades siguientes.In the Properties window, set the following properties.

    PropertyProperty ParámetroSetting
    NameName lblAlarm
    TextoText ¡Alarma!Alarm!
    TextAlignTextAlign MiddleCenter
    VisibleVisible False

Agregar la funcionalidad de alarmaAdding the Alarm Functionality

En los procedimientos anteriores, agregó propiedades y un control que habilitará la funcionalidad de alarma en el control compuesto.In the previous procedures, you added properties and a control that will enable alarm functionality in your composite control. En este procedimiento, agregará código para comparar la hora actual con la hora de la alarma y, si son iguales, hacer que parpadee y suene una alarma.In this procedure, you will add code to compare the current time to the alarm time and, if they are the same, to sound and flash an alarm. Al reemplazar el método Timer1_Tick de ctlClock y agregarle código adicional, extenderá la funcionalidad de ctlAlarmClock al mismo tiempo que conserva toda la funcionalidad inherente de ctlClock.By overriding the Timer1_Tick method of ctlClock and adding additional code to it, you will extend the capability of ctlAlarmClock while retaining all of the inherent functionality of ctlClock.

Para reemplazar el método Timer1_Tick de ctlClockTo override the Timer1_Tick method of ctlClock
  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlAlarmClock.vb y haga clic en Ver código.In Solution Explorer, right-click ctlAlarmClock.vb, and then click View Code.

  2. Busque la instrucción Private blnAlarmSet As Boolean.Locate the Private blnAlarmSet As Boolean statement. Justo debajo de ella, agregue la siguiente instrucción.Immediately beneath it, add the following statement.

    Dim blnColorTicker as Boolean  
    
  3. Busque la instrucción End Class en la parte inferior de la página.Locate the End Class statement at the bottom of the page. Justo antes de la instrucción End Class, agregue el código siguiente.Just before the End Class statement, add the following code.

    Protected Overrides Sub Timer1_Tick(ByVal sender As Object, ByVal e _  
        As System.EventArgs)  
        ' Calls the Timer1_Tick method of ctlClock.  
        MyBase.Timer1_Tick(sender, e)  
        ' Checks to see if the Alarm is set.  
        If AlarmSet = False Then  
            Exit Sub  
        End If  
        ' If the date, hour, and minute of the alarm time are the same as  
        ' now, flash and beep an alarm.   
        If AlarmTime.Date = Now.Date And AlarmTime.Hour = Now.Hour And _  
            AlarmTime.Minute = Now.Minute Then  
            ' Sounds an audible beep.  
            Beep()  
            ' 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 Then  
                lblAlarm.BackColor = Color.PeachPuff  
                blnColorTicker = True  
            Else  
                lblAlarm.BackColor = Color.Plum  
                blnColorTicker = False  
            End If  
        Else  
            ' Once the alarm has sounded for a minute, the label is made   
            ' invisible again.  
            lblAlarm.Visible = False  
        End If  
    End Sub  
    

    Con la adición de este código, se llevan a cabo varias tareas.The addition of this code accomplishes several tasks. La instrucción Overrides indica al control que utilice este método en lugar del que heredó del control base.The Overrides statement directs the control to use this method in place of the method that was inherited from the base control. Cuando se llama a este método, llama al método que reemplaza invocando la instrucción MyBase.Timer1_Tick, lo que garantiza que toda la funcionalidad incorporada en el control original se reproduzca en este control.When this method is called, it calls the method it overrides by invoking the MyBase.Timer1_Tick statement, ensuring that all of the functionality incorporated in the original control is reproduced in this control. A continuación, ejecuta código adicional para incorporar la funcionalidad de alarma.It then runs additional code to incorporate the alarm functionality. Aparecerá un control de etiqueta parpadeante cuando se active la alarma, y se oirá un pitido.A flashing label control will appear when the alarm occurs, and an audible beep will be heard.

    Nota

    Dado que va a reemplazar un controlador de eventos heredado, no es necesario especificar el evento con la palabra clave Handles.Because you are overriding an inherited event handler, you do not have to specify the event with the Handles keyword. El evento ya está enlazado.The event is already hooked up. Lo que se va a reemplazar es la implementación del controlador.All you are overriding is the implementation of the handler.

    El control de reloj despertador está casi completado.Your alarm clock control is almost complete. Lo único que queda es implementar una forma de desactivarlo.The only thing that remains is to implement a way to turn it off. Para ello, agregará código al método lblAlarm_Click.To do this, you will add code to the lblAlarm_Click method.

Para implementar el método de apagadoTo implement the shutoff method
  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlAlarmClock.vb y haga clic en Ver diseñador.In Solution Explorer, right-click ctlAlarmClock.vb, and then click View Designer.

  2. En el diseñador, haga doble clic en lblAlarm.In the designer, double-click lblAlarm. Se abre el Editor de código en la línea Private Sub lblAlarm_Click.The Code Editor opens to the Private Sub lblAlarm_Click line.

  3. Modifique este método para que se parezca al siguiente código.Modify this method so that it resembles the following code.

    Private Sub lblAlarm_Click(ByVal sender As Object, ByVal e As _  
     System.EventArgs) Handles lblAlarm.Click  
        ' Turns off the alarm.  
        AlarmSet = False  
        ' Hides the flashing label.  
        lblAlarm.Visible = False  
    End Sub  
    
  4. En el menú Archivo, haga clic en Guardar todo para guardar el proyecto.On the File menu, click Save All to save the project.

Usar el control heredado en un formularioUsing the Inherited Control on a Form

Puede probar el control heredado de la misma manera que se ha probado el control de la clase base, ctlClock: Presione F5 para compilar el proyecto y ejecutar el control en UserControl Test Container.You can test your inherited control the same way you tested the base class control, ctlClock: Press F5 to build the project and run your control in the UserControl Test Container. Para obtener más información, vea Cómo: Probar el comportamiento de tiempo de ejecución de una clase UserControl.For more information, see How to: Test the Run-Time Behavior of a UserControl.

Para utilizar el control, debe hospedarlo en un formulario.To put your control to use, you will need to host it on a form. Al igual que con los controles compuestos estándar, los controles compuestos heredados no son independientes y deben hospedarse en un formulario o en otro contenedor.As with a standard composite control, an inherited composite control cannot stand alone and must be hosted in a form or other container. Puesto que ctlAlarmClock tiene un mayor grado de funcionalidad, se necesita código adicional para probarlo.Since ctlAlarmClock has a greater depth of functionality, additional code is required to test it. En este procedimiento, escribirá un programa sencillo para probar la funcionalidad de ctlAlarmClock.In this procedure, you will write a simple program to test the functionality of ctlAlarmClock. Escribirá código para establecer y mostrar la propiedad AlarmTime de ctlAlarmClock y probar sus funciones inherentes.You will write code to set and display the AlarmTime property of ctlAlarmClock, and will test its inherent functions.

Para compilar y agregar el control a un formulario de pruebaTo build and add your control to a test form
  1. En el Explorador de soluciones, haga clic con el botón derecho en ctlClockLib y haga clic en Compilar.In Solution Explorer, right-click ctlClockLib, and then click Build.

  2. En el menú Archivo , apunte a Agregary haga clic en Nuevo proyecto.On the File menu, point to Add, and then click New Project.

  3. Agregue un nuevo proyecto Aplicación Windows a la solución y asígnele el nombre Test.Add a new Windows Application project to the solution, and name it Test.

    Se crea el proyecto Test y se agrega al Explorador de soluciones.The Test project is added to Solution Explorer.

  4. En el Explorador de soluciones, haga clic con el botón derecho en el nodo de proyecto Test y, después, haga clic en Agregar referencia para mostrar el cuadro de diálogo Agregar referencia.In Solution Explorer, right-click the Test project node, and then click Add Reference to display the Add Reference dialog box.

  5. Haga clic en la pestaña etiquetada como Proyectos.Click the tab labeled Projects. El proyecto ctlClockLib aparecerá en Nombre de proyecto.The project ctlClockLib will be listed under Project Name. Haga doble clic en ctlClockLib para agregar la referencia al proyecto de prueba.Double-click ctlClockLib to add the reference to the test project.

  6. En el Explorador de soluciones, haga clic con el botón derecho en Probar y haga clic en Compilar.In Solution Explorer, right-click Test, and then click Build.

  7. En el cuadro de herramientas, expanda el nodo Componentes de ctlClockLib.In the Toolbox, expand the ctlClockLib Components node.

  8. Haga doble clic en ctlAlarmClock para agregar una instancia de ctlAlarmClock al formulario.Double-click ctlAlarmClock to add an instance of ctlAlarmClock to your form.

  9. En el cuadro de herramientas, busque y haga doble clic en DateTimePicker para agregar un DateTimePicker control al formulario y, a continuación, agregue un Label control haciendo doble clic en etiqueta.In the Toolbox, locate and double-click DateTimePicker to add a DateTimePicker control to your form, and then add a Label control by double-clicking Label.

  10. Use el mouse para colocar los controles en un lugar adecuado en el formulario.Use the mouse to position the controls in a convenient place on the form.

  11. Establezca las propiedades de estos controles de la manera siguiente.Set the properties of these controls in the following manner.

    ControlControl PropiedadProperty ValorValue
    label1 TextoText (blank space)
    NameName lblTest
    dateTimePicker1 NameName dtpTest
    FormatFormat Time
  12. En el diseñador, haga doble clic en dtpTest.In the designer, double-click dtpTest.

    Se abre el Editor de código en Private Sub dtpTest_ValueChanged.The Code Editor opens to Private Sub dtpTest_ValueChanged.

  13. Modifique el código para que se parezca al siguiente.Modify the code so that it resembles the following.

    Private Sub dtpTest_ValueChanged(ByVal sender As Object, ByVal e As _  
        System.EventArgs) Handles dtpTest.ValueChanged  
        ctlAlarmClock1.AlarmTime = dtpTest.Value  
        ctlAlarmClock1.AlarmSet = True  
        lblTest.Text = "Alarm Time is " & Format(ctlAlarmClock1.AlarmTime, _  
            "hh:mm")  
    End Sub  
    
  14. En el Explorador de soluciones, haga clic con el botón derecho en Probar y haga clic en Establecer como proyecto de inicio.In Solution Explorer, right-click Test, and then click Set as StartUp Project.

  15. En el menú Depurar, haga clic en Iniciar depuración.On the Debug menu, click Start Debugging.

    Se inicia el programa de prueba.The test program starts. Tenga en cuenta que la hora actual se actualiza en el ctlAlarmClock control y que se muestra la hora de inicio en el DateTimePicker control.Note that the current time is updated in the ctlAlarmClock control, and that the starting time is shown in the DateTimePicker control.

  16. Haga clic en el DateTimePicker donde se muestran los minutos de la hora.Click the DateTimePicker where the minutes of the hour are displayed.

  17. Use el teclado para establecer el valor de los minutos en un minuto más tarde que la hora actual mostrada por ctlAlarmClock.Using the keyboard, set a value for minutes that is one minute greater than the current time shown by ctlAlarmClock.

    La hora para la configuración de alarma se muestra en lblTest.The time for the alarm setting is shown in lblTest. Espere a que la hora mostrada llegue a la hora de la alarma configurada.Wait for the displayed time to reach the alarm setting time. Cuando la hora que se muestra llegue a la hora en que está puesta la alarma, se oirá un pitido y lblAlarm parpadeará.When the displayed time reaches the time to which the alarm is set, the beep will sound and lblAlarm will flash.

  18. Para desactivar la alarma, haga clic en lblAlarm.Turn off the alarm by clicking lblAlarm. Ahora puede restablecer la alarma.You may now reset the alarm.

    En este tutorial se han tratado varios conceptos clave.This walkthrough has covered a number of key concepts. Ha aprendido a crear un control compuesto mediante la combinación de controles y componentes en un contenedor de control compuesto.You have learned to create a composite control by combining controls and components into a composite control container. Ha aprendido a agregar propiedades al control y a escribir código para implementar funcionalidad personalizada.You have learned to add properties to your control, and to write code to implement custom functionality. En la última sección, ha aprendido a extender la funcionalidad de un control compuesto determinado mediante herencia y a modificar la funcionalidad de los métodos de host reemplazando estos últimos.In the last section, you learned to extend the functionality of a given composite control through inheritance, and to alter the functionality of host methods by overriding those methods.

Vea tambiénSee also