Урок 2. Программа «Скорость»

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

После запуска программы должно появиться окно приложения. Окно должно содержать ползунок прокрутки и текстовое поле (рис.2.1).

Рис.2.1. Внешний вид приложения

Если пользователь изменит положение ползунка на полосе прокрутки, то значение скорости в текстовом поле автоматически должно измениться. Например, когда ползунок находится в левом положении, текстовое поле содержит значение 20, а когда в правой положении, то значение будет равно 110. Теперь несколько слов о том, почему я выбрал такие странные числа: 20 и 110. Дело в том, что поинтересовался с какой скоростью могут бегать кошки. Оказалось, что домашний кот может развить скорость до 20 км в час, а гепард - до 110 км в час (средние значения). Естественно, вы можете выбрать другие числа.

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

Теперь, когда вы знаете, что должна делать программа, давайте попробуем написать ее на C#. Создадим новый проект Speed. О том, как создавать новый проект и давать им имена вы уже знаете из прошлого урока. В прошлом проекте мы использовали текстовое поле и кнопку. Но на сей раз мы не будем использовать кнопку, а воспользуемся новым элементом управления HScrollBar (Горизонтальная полоса прокрутки). Итак, добавьте сначала на форму текстовое поле и присвойте ему имя txtSpeed. Если вы захотите сразу добавить и элемент HScrollBar, то вас может ждать разочарование - вы не можете найти данный элемент. Не расстраивайтесь. В Visual Studio имеется слишком много компонентов, и они не могут одновременно поместиться на панели инструментов. Если вы внимательно посмотрите на эту панель, то увидите, что элементы управления сгруппированы по категориям. По умолчанию раскрыта категория Common Controls, на которой находятся самые употребляемые элементы. Разверните категорию All Windows Forms (нажмите на плюсик) и вы увидите обширный список компонентов, используемых для форм (рис.2.2). Найдите теперь элемент HScrollBar в коллекции инструментов и перетащите его мышкой на форму. Сейчас вы познакомились с другим способом размещения элементов на форме. Знакомый способ при помощи двойного щелчка тоже работает - вы можете выбирать любой из этих вариантов. Перетаскивание компонента при помощи мыши удобнее тем, что вы можете сразу перетащить элемент в нужную позицию. В нашем случае нужно разместить элемент HScrollBar под текстовым полем txtSpeed

Рис.2.2. Элемент HScrollBar на панели инструментов

Перейдите на панель Properties (если она невидима, то выполните команду Properties Window из меню View) и установите нужные свойства для добавленных элементов.

Установим свойства для горизонтальной полосы прокрутки. Сначала меняем его имя: вместо hScrollBar1 используем hsbSpeed, далее свойствам Minimum и Maximum присваиваем соответственно значения 20 и 110. Заоодно растяните ширину полосы прокрутки, подогнав ее под размеры текстового поля.

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

Таблица 2.1

Объект	Свойство	Значение
Form	Name Text	frmSpeed Скорость
TextBox	Name Text TextAlign	txtSpeed 60 км/ч Center
HScrollBar	Name Minimum Maximum	hsbSpeed 20 110

Сейчас ваша форма имеет следующий вид.

Рис.2.3. Форма на этапе разработки

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

Вводим исходный код

Этап визуального программирования на этом завершен. Пора перейти ко второму этапу - вводу исходного кода программы. Но для начала рассмотрим подробнее свойства горизонтальной полосы прокрутки.

Свойства полосы прокрутки: Minimum, Maximum, Value

Полоса прокрутки оперирует диапазоном заданных числовых значений. Как вы уже догадались, свойства Minimum и Maximum задают нижнюю и верхнюю границы диапазона, в нашем случае диапазон равен 20-110. Кроме того, у полосы прокрутки есть Value, которое определяет положение ползунка на полосе прокрутки. По умолчанию, значение свойства равно значению свойства Minimum (в нашем примере это будет 20). Но мы можем задать свое значение. Так как у нас в текстовом поле задан текст 60 км/ч, то давайте синхронизуруем эти значения. Мы можем это сделать уже сейчас, если в окне свойств найдем свойство Value для элемента HScrollBar (рис.2.4).

Рис.2.4. Настройка свойств у HScrollBar

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

Пишем код для полосы прокрутки

Теперь, когда мы вкратце познакомились со свойствами полосы прокрутки, можно писать программу. Щелкните дважды на полосе прокрутки, чтобы открыть редактор кода с заготовкой для процедуры hsbSpeed_Scroll и введите одну строчку:

txtSpeed.Text = hsbSpeed.Value.ToString() + " км/ч";

Выполняем программу Скорость

Все готово для нашей второй программы. Пора проверить её в действии. Выберите в меню Debug | Start Debugging.

Если вы не сделали ни одной ошибки, то у вас на экране появится окно нашей программы (рис.2.1).

Рис.2.5. Программа "Скорость"

Теперь вы можете щёлкать мышкой по стрелкам полосы прокрутки или перетаскивать ползунок. При этом любое изменение позиции ползунка будет сразу отображаться в текстовом поле. Перетащите ползунок в крайнее левое положение - в текстовом поле отобразится строка 20 км/ч. Как мы знаем, это средняя скорость бега домашнего кота. А теперь внимание, попробуйте перетащить ползунок в крайнее правое положение. По нашему замыслу, в текстовом поле должно отобразиться наибольшее значение, которое мы установили для свойства Maximum. Но мы видим, что это не так, у нас выводится значение, чуть меньшее, чем требовалось. Не пугайтесь, вы не сделали ошибки. Просто ползунок прокрутки сделан таким образом, что показывает значение левой части ползунка, а так как ползунок имеет некоторую ширину, то своей правой стороной он упирается в конец полосы прокрутки и не даем нам увидеть максимальное значение. Можно решить проблему следующим образом - закрываем программу и возвращаемся в среду разработки Visual Studio. В окне свойств у hScrollBar выбираем свойство Maximum и исправляем установленное нами ранее значение на 119.

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

Итоги

Итак, вы написали уже вторую программу на C#. Вероятно, вы ещё не понимаете, что означает код, который вы вводили на этом уроке. Дело в том, что вы создавали программу, не зная основ языка C#. Для того, чтобы понимать чужой код и писать свой код (программировать), нужно выучить некоторые правила. Это напоминает изучение иностранного языка. Прежде чем вы научитесь писать и говорить на другом языке, вам надо выучить буквы, произношение и правила составления предложений. Поэтому на следующем уроке мы начнём изучать самые основы языка, а созданные вами две программы были всего лишь разминкой.