Пошаговое руководство. Создание составного элемента управления с помощью Visual Basic

Составные элементы управления предоставляют средства для создания и повторного использования настраиваемых графических интерфейсов. Составной элемент управления — это компонент, имеющий визуальное представление. Таким образом, он может состоять из одного или нескольких элементов управления, компонентов или блоков кода Windows Forms, позволяющих расширить функциональные возможности за счет проверки введенных пользователем данных, изменения свойств отображения или выполнения других предусмотренных разработчиком действий. Составные элементы управления можно вставлять в Windows Forms точно так же, как другие элементы управления. В первой части этого пошагового руководства мы создадим простой составной элемент управления с именем ctlClock. Во второй части мы расширим функциональность ctlClock за счет наследования.

Note

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска. Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров . Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.

Создание проекта

Создавая проект, вы указываете для него имя, чтобы задать корневое пространство имен, имя сборки и имя проекта, и необходимо убедиться в том, что компонент по умолчанию попадет в нужное пространство имен.

Создание библиотеки элементов управления ctlClockLib и элемента управления ctlClock

  1. В меню Файл наведите указатель мыши на пункт Создать и выберите Проект, чтобы открыть диалоговое окно Создание проекта.

  2. В списке проектов Visual Basic, выберите Windows Control Library шаблон проекта, тип ctlClockLib в имя , а затем щелкните ОК.

    Имя проекта, ctlClockLib, по умолчанию также назначается корневому пространству имен. Корневое пространство имен используется для определения имен компонентов в сборке. Например, если в двух сборках содержатся компоненты с именем ctlClock, можно указать ваш ctlClock компонента с помощью ctlClockLib.ctlClock.

  3. В обозревателе решений щелкните файл UserControl1.vb правой кнопкой мыши и выберите команду Переименовать. Измените имя файла на ctlClock.vb. Чтобы переименовать все ссылки на элемент кода UserControl1, в соответствующем запросе нажмите кнопку Да.

    Note

    По умолчанию составной элемент управления наследует от UserControl класса, предоставляемого системой. UserControl Класс обеспечивает функциональность, необходимую всем составным элементам управления и реализует стандартные методы и свойства.

  4. Сохраните проект, открыв меню Файл и выбрав пункт Сохранить все.

Добавление элементов управления и компонентов Windows в составной элемент управления

Визуальный интерфейс представляет собой важную часть составного элемента управления. Он реализуется путем добавления одного или нескольких элементов управления Windows на поверхность конструктора. В следующем примере мы добавим элементы управления Windows в составной элемент управления и напишем код для реализации функциональных возможностей.

Добавление метки и таймера в составной элемент управления

  1. В обозревателе решений щелкните файл ctlClock.vb правой кнопкой мыши и выберите пункт Открыть в конструкторе.

  2. На панели элементов разверните узел Общие элементы управления, а затем дважды щелкните пункт Метка.

    Объект Label управления с именем Label1 добавляется в элемент управления на поверхности конструктора.

  3. В конструкторе щелкните пункт Label1. В окне "Свойства" задайте следующие свойства.

    Свойство. Измените на
    name lblDisplay
    Текста (blank space)
    TextAlign MiddleCenter
    Font.Size 14

  4. На панели элементов разверните узел Компоненты, а затем дважды щелкните пункт Таймер.

    Так как Timer — это компонент, он не имеет визуального представления во время выполнения. В связи с этим он отображается не с элементами управления на поверхности конструктора, а в конструкторе компонентов (область в нижней части поверхности конструктора).

  5. В конструкторе компонентов щелкните Timer1и задайте Interval свойства 1000 и Enabled свойства True.

    Interval Свойство определяет частоту, с которой тактов для компонента таймера. При каждом такте Timer1 оно запускает код в событии Timer1_Tick. Интервал представляет время между тактами в миллисекундах.

  6. В конструкторе компонентов дважды щелкните Timer1, чтобы перейти к событию Timer1_Tick для ctlClock.

  7. Измените код, как показано в следующем примере. Измените модификатор доступа с Private на 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

    Этот код вызывает отображение текущего времени в lblDisplay. Поскольку для интервала Timer1 было задано значение 1000, это событие возникает через каждую тысячу миллисекунд, а значит, текущее время обновляется каждую секунду.

  8. Измените метод для переопределения. Дополнительные сведения см. ниже в разделе "Наследование из пользовательского элемента управления".

    Protected Overridable Sub Timer1_Tick(ByVal sender As Object, ByVal _  
    e As System.EventArgs) Handles Timer1.Tick

  9. Сохраните проект, открыв меню Файл и выбрав пункт Сохранить все.

Добавление свойств в составной элемент управления

Теперь инкапсулирует элемент управления Label управления и Timer компонента, каждый из которых свой собственный набор унаследованных свойств. Несмотря на то что отдельные свойства этих элементов управления не будут доступны последующим пользователям вашего элемента управления, вы можете создать и предоставить настраиваемые свойства, написав соответствующие блоки кода. Выполняя следующую процедуру, вы добавите в элемент управления свойства, позволяющие пользователю изменять цвет фона и текста.

Добавление свойства в составной элемент управления

  1. В обозревателе решений щелкните файл ctlClock.vb правой кнопкой мыши и выберите пункт Показать код.

    Откроется редактор кода для элемента управления.

  2. Найдите оператор Public Class ctlClock. Под этим оператором введите следующий код.

    Private colFColor as Color  
Private colBColor as Color

    Эти операторы создают закрытые переменные для хранения значений свойств, которые вы собираетесь создать.

  3. Вставьте следующий код под объявлениями переменных, созданными в шаге 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

    Приведенный выше код обеспечивает доступ к двум настраиваемым свойствам, ClockForeColor и ClockBackColor, для последующих пользователей данного элемента управления, вызывая оператор Property. Операторы Get и Set позволяют хранить и извлекать значение свойства, а также предоставляют код для реализации соответствующих этому свойству функциональных возможностей.

  4. Сохраните проект, открыв меню Файл и выбрав пункт Сохранить все.

Тестирование элемента управления

Элементы управления не являются автономными проектами и должны размещаться в контейнере. Проверьте поведение элемента управления в среде выполнения и испытайте его свойства в тестовом контейнере пользовательских элементов управления. Дополнительные сведения см. в разделе Как Тестирование во время выполнения поведения элемента UserControl.

Проверка элемента управления

  1. Нажмите клавишу F5, чтобы собрать проект и запустить элемент управления в тестовом контейнере элементов управления.

  2. В таблице свойств тестового контейнера выберите свойство ClockBackColor, а затем щелкните стрелку раскрывающегося списка, чтобы открыть палитру цветов.

  3. Щелкните нужный цвет.

    Цвет фона элемента управления изменится на выбранный.

  4. Используя аналогичную последовательность событий, проверьте, функционирует ли свойство ClockForeColor должным образом.

  5. Нажмите Закрыть, чтобы закрыть тестовый контейнер пользовательских элементов управления.

    Из этого и предыдущих разделов вы узнали, как объединить компоненты и элементы управления Windows с кодом и упаковкой и, таким образом, предоставить настраиваемые функциональные возможности в виде составного элемента управления. Вы узнали, как вывести свойства в составной элемент управления и проверить элемент управления после того, как он будет готов. В следующем разделе вы узнаете, как сконструировать производный составной элемент управления, используя в качестве базы ctlClock.

Наследование из составного элемента управления

В предыдущих разделах вы узнали, как объединить элементы управления, компоненты и код Windows в составные элементы управления, доступные для повторного использования. После этого составной элемент управления можно использовать как базу, на основе которой будут создаваться другие элементы управления. Процесс создания класса, производного от базового, называется наследованием. В этом разделе вы создадите составной элемент управления с именем ctlAlarmClock. Он будет производным от родительского элемента управления, ctlClock. Вы узнаете, как расширить функциональные возможности ctlClock, переопределив методы родительского класса и добавив новые методы и свойства.

Первый шаг в создании производного элемента управления — это его наследование из родительского элемента. Это действие создает новый элемент управления, обладающий всеми свойствами, методами и графическими характеристиками родительского элемента управления, а также может служить основой для добавления или изменения функциональных возможностей.

Создание производного элемента управления

  1. В обозревателе решений щелкните файл ctlClockLib правой кнопкой мыши, наведите указатель мыши на пункт Добавить и выберите Пользовательский элемент управления.

    Откроется диалоговое окно Добавление нового элемента.

  2. Выберите шаблон Производный пользовательский элемент управления.

  3. В поле Имя введите ctlAlarmClock.vb и нажмите кнопку Добавить.

    Откроется диалоговое окно Выбор компонентов для наследования.

  4. В разделе Имя компонента дважды щелкните файл ctlClock.

  5. В обозревателе решений просмотрите список текущих проектов.

    Note

    Файл с именем элемент ctlAlarmClock.vb будет добавлен в текущий проект.

Добавление свойств будильника

Свойства, добавляются в производный элемент управления точно так же, как в составной элемент управления. Теперь, используя синтаксис объявления свойств, добавим в элемент управления два свойства: свойство AlarmTime, в котором хранится значение даты и времени отключения будильника, и свойство AlarmSet, определяющее время срабатывания будильника.

Добавление свойств в составной элемент управления

  1. В обозревателе решений щелкните файл ctlAlarmClock правой кнопкой мыши и выберите пункт Показать код.

  2. Найдите объявление класса для элемента управления ctlAlarmClock, которое выглядит как Public Class ctlAlarmClock. В это объявление класса вставьте следующий код.

    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

Добавление графического интерфейса элементу управления

Производный элемент управления получает такой же графический интерфейс, как у того элемента, из которого он наследуется. Кроме того, он включает те же составные элементы управления, что и родительский элемент управления, однако свойства этих составных элементов будут доступны, только если предоставить их напрямую. Графический интерфейс производного элемента управления добавляется точно так же, как и для любого составного элемента управления. Чтобы продолжить добавление графического интерфейса для будильника, добавим элемент управления Label, который будет мигать при срабатывании будильника.

Добавление элемента управления Label

  1. В обозревателе решений щелкните файл ctlAlarmClock правой кнопкой мыши и выберите пункт Показать конструктор.

    Конструктор для ctlAlarmClock откроется в главном окне.

  2. Нажмите lblDisplay (отображаемая область элемента управления) и просмотрите окно свойств.

    Note

    Все свойства отображаются, но недоступны. Это означает, что эти свойства являются собственными свойствами lblDisplay, в окне свойств изменить их или получить к ним доступ нельзя. По умолчанию элементы управления, входящие в составной элемент управления, имеют статус Private и их свойства недоступны.

    Note

    Чтобы последующие пользователи составного элемента управления получили доступ к входящим в него элементам управления, объявите их как Public или Protected. Это позволит вам задавать и изменять свойства элементов управления в составном элементе управления, используя соответствующий код.

  3. Добавление Label элемента управления в составной элемент управления.

  4. С помощью мыши, перетащите Label управления непосредственно под окно отображения. В окне "Свойства" задайте следующие свойства.

    Свойство. Параметр
    name lblAlarm
    Текста Сигнал!
    TextAlign MiddleCenter
    Видимый False

Добавление функциональных возможностей будильника

Выполняя предыдущие процедуры, вы добавили свойства и элемент управления, которые обеспечат функциональность будильника в составном элементе управления. В ходе этой процедуры вы добавите код, который будет сравнивать текущее время со временем будильника и, если они совпадают, запускать звуковой сигнал и мигающее оповещение. Переопределив метод Timer1_Tick в ctlClock и добавив в него дополнительный код, вы расширите возможности ctlAlarmClock, сохранив при этом все унаследованные функции ctlClock.

Переопределение метода Timer1_Tick в ctlClock

  1. В обозревателе решений щелкните файл ctlAlarmClock.vb правой кнопкой мыши и выберите пункт Показать код.

  2. Найдите оператор Private blnAlarmSet As Boolean. Сразу после него добавьте следующий оператор.

    Dim blnColorTicker as Boolean

  3. Найдите оператор End Class в нижней части страницы. Непосредственно перед оператором End Class добавьте следующий код.

    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

    Добавление этого кода решает сразу несколько задач. Оператор Overrides указывает элементу управления использовать этот метод вместо метода, унаследованного из базового элемента управления. При вызове этого метода он вызывает переопределяемый метод, используя оператор MyBase.Timer1_Tick, и следит за тем, чтобы в этом элементе управления были реализованы все функции исходного элемента управления. Затем он выполняет дополнительный код, реализующий функции будильника. Когда будильник срабатывает, появляется мигающая метка и раздается звуковой сигнал.

    Note

    Поскольку вы переопределяете производный обработчик событий, указывать событие с помощью ключевого слова Handles не требуется. Событие уже подключено. Переопределяется только реализация обработчика.

    Элемент управления "Будильник" почти готов. Осталось реализовать только его отключение. Для этого нужно добавить код в метод lblAlarm_Click.

Реализация метода отключения

  1. В обозревателе решений щелкните файл ctlAlarmClock.vb правой кнопкой мыши и выберите пункт Показать конструктор.

  2. В конструкторе дважды щелкните lblAlarm. Откроется редактор кода со строкой Private Sub lblAlarm_Click.

  3. Измените метод, как показано в следующем коде.

    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. Сохраните проект, открыв меню Файл и выбрав пункт Сохранить все.

Использование производного элемента управления в форме

Производный элемент управления можно проверить так же, как Вы протестировали управления базового класса, ctlClock: Нажмите клавишу F5, чтобы собрать проект и запустить элемент управления в тестовом контейнере элементов управления. Дополнительные сведения см. в разделе Как Тестирование во время выполнения поведения элемента UserControl.

Чтобы элемент управления можно было использовать, необходимо поместить его в форму. Производный составной элемент управления, как и стандартный, не может быть автономным и должен быть размещен в форме или другом контейнере. Поскольку ctlAlarmClock отличается более широкими функциональными возможностями, для его проверки требуется дополнительный код. В ходе этой процедуры вы напишете простую программу для проверки функциональных возможностей ctlAlarmClock. Вы напишете код, задающий и отображающий свойство AlarmTime в ctlAlarmClock и проверяющий его унаследованные функции.

Сборка и добавление элемента управления в тестовую форму

  1. В обозревателе решений щелкните файл ctlClockLib правой кнопкой мыши и выберите пункт Построить.

  2. В меню Файл выберите команду Добавить, а затем Создать проект.

  3. Добавьте в решение новый проект приложения Windows с именем Test.

    Проект Test будет добавлен в обозреватель решений.

  4. В обозревателе решений щелкните правой кнопкой мыши узел проекта Test и выберите пункт Добавить ссылку, чтобы открыть диалоговое окно Добавление ссылки.

  5. Выберите вкладку Проекты. Проект ctlClockLib будет указан под полем Имя проекта. Дважды щелкните файл ctlClockLib, чтобы добавить ссылку на тестовый проект.

  6. В обозревателе решений щелкните Тест правой кнопкой мыши и выберите пункт Построить.

  7. На панели элементов разверните узел Компоненты ctlClockLib.

  8. Дважды щелкните ctlAlarmClock, чтобы добавить экземпляр ctlAlarmClock в свою форму.

  9. В элементов, найдите и дважды щелкните DateTimePicker добавление DateTimePicker в форму элемент управления, а затем добавьте Label элемента управления, дважды щелкнув метка.

  10. С помощью мыши разместите элементы управления в удобном месте формы.

  11. Задайте свойства этих элементов управления следующим образом.

    Элемент управления Свойство Значение
    label1 Текста (blank space)
    name lblTest
    dateTimePicker1 name dtpTest
    Формат Time

  12. В конструкторе дважды щелкните dtpTest.

    В редакторе кода откроется Private Sub dtpTest_ValueChanged.

  13. Измените код, как показано в следующем примере.

    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. В обозревателе решений щелкните правой кнопкой мыши Тест и выберите пункт Назначить запускаемым проектом.

  15. В меню Отладка щелкните Начать отладку.

    Запустится тестовая программа. Обратите внимание, что текущее время обновляется в ctlAlarmClock управления и отображение время начала в DateTimePicker элемента управления.

  16. Нажмите кнопку DateTimePicker где отображаются минуты часа.

  17. С помощью клавиатуры укажите значение минут, составляющее на одну минуту больше текущего времени, отображаемого ctlAlarmClock.

    Время включения будильника отображается в lblTest. Дождитесь момента, когда отображаемое время совпадет с установленным временем будильника. Когда это произойдет, раздастся звуковой сигнал, и lblAlarm начнет мигать.

  18. Отключите сигнал, нажав lblAlarm. Теперь будильник можно сбросить.

    В этом пошаговом руководстве был проиллюстрирован ряд ключевых понятий. Вы узнали, как создать составной элемент управления, объединив элементы управления и компоненты в контейнер составного элемента управления. Вы узнали, как добавить свойства в элемент управления и написать код для реализации настраиваемых функциональных возможностей. В последнем разделе вы узнали, как расширять функциональные возможности заданного составного элемента управления с помощью наследования и как изменять функциональные возможности методов узла путем переопределения методов.

См. также