Урок 1. Программа «Привет»

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

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

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

Если щелкнуть мышью на кнопке Привет, в текстовом поле появится надпись "Здравствуй, Мир!" (рис.1.2)

Рис.1.2. Приложение в действии.

Если щелкнуть мышью на кнопке Очистить, программа очищает текстовое поле.

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

Теперь, когда вы знаете, что должна делать программа, давайте попробуем написать ее на C#. Постарайтесь выполнить все описываемые действия.

Первое, с чего начинается разработка новой программы - это создать новый проект. Для этого запустите Visual Studio. В меню File выберите команду New | Project.... Откроется диалоговое окно New Project (рис.1.1). Выберите в левой части окна тип проекта Visual C# | Windows. В правой части появятся доступные шаблоны для выбранного типа проекта.

Как видите, Visual Studio позволяет создавать проекты разных типов. Для нашего первого урока мы будем использовать проект типа Windows Forms Application. Выделите мышкой шаблон Windows Forms Application. Далее измените имя проекта. В поле Name удалите текст по умолчанию WindowsFormsApplication1 и введите текст MyFirstProgram. Следующее поле Location показывает место, где будет храниться ваш проект. Вы можете изменить место хранения проекта. Для этого щелкните кнопку Browse... и выберите папку на вашем компьютере. Теперь можно щелкнуть кнопку OK.

Рис.1.3. Создание нового проекта

У вас откроется среда разработки Visual Studio. В центре экрана вы увидите окно формы (пока пустое) с заголовком Form1. Ваша задача - сделать его похожим на форму готового приложения

Рис.1.4. Пустая форма

Изменяем заголовок формы

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

Примечание: Форму часто называют окном. В принципе это одно и то же. Во время разработки мы будем использовать термин форма, а во время работы программы эту форму на экране будем называть окном.

Итак, изменим заголовок у формы на Привет

Убедитесь, что окно формы является текущим. Это легко распознать по заголовку - оно должно быть активным (подсвеченным). Если форма не является текущим, то просто щелкните мышью в любом месте формы или по заголовку.

В правой части среды разработки найдите окно Properties. Если оно у вас скрыто, то в меню View выберите команду Properties Windows.

Щелкните на поле, расположенном справа от надписи Text. В данный момент поле содержит текст Form1. Удалите этот текст и введите новый текст Привет. Окно свойств должно принять вид, как на рис 1.5.

Рис.1.5. Изменяем заголовок у формы

Ура! Вы изменили заголовок формы. Взгляните на окно формы - надпись изменилась (рис.1.6).

Рис.1.6. Форма с новым заголовком.

Добавляем кнопку

Мы знаем, что в окончательном варианте на форме должны быть кнопки Привет и Очистить. Давайте сделаем это.

Чтобы поместить кнопку на форму, сначала выберите ее в коллекции инструментов.

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

Примечание: Если коллекция инструментов не видна, то в меню View выберите команду Toolbox.

Найдите среди значков нужный элемент с надписью Button.

Дважды щелкните на значке кнопки - в результате Visual Studio поместит кнопку с надписью Button на форму (рис.1.7).

Рис.1.7. Помещаем кнопку на форму

Visual Studio автоматически присвоила некоторые свойства для нашей кнопки. Мы должны изменить их для нашего удобства, как это мы сделали для заголовка формы.

Перейдите на панель Properties (если она невидима, то выполните команду Properties Window из меню ё1)

Убедитесь, что поле списка в верхней части окна свойств содержит надпись button1 System.Windows.Forms.Button (рис.1.6)

Примечание: На данном этапе к вашей форме относятся два объекта: сама форма Form1 и кнопка button1. Окно свойств отображает свойства того объекта, чье имя выбрано в свернутом списке вверху окна. Чтобы переключиться на другой объект, щелкните на кнопке со стрелкой в поле списка и разверните список: он содержит имена всех элементов формы. Щелкните на имени нужного вам элемента, и окно Properties отобразит набор свойств этого элемента.

Измените значение свойства Name с button1 на butHello.

Рис.1.8. Присваиваем новое имя кнопке

По умолчанию, Visual Studio присвоило кнопке надпись button1, которую вы видите сейчас на кнопке. Давайте изменим ее на более понятную надпись. Находим свойство Text и изменяем текст button1 на Привет.

Изменяем положение кнопки

Кнопка в нашем варианте должна находиться не в углу формы, а чуть ниже.

Перетащите ее в нижнюю часть формы: поместите указатель мыши на кнопку Привет, нажмите на кнопку мыши и, не отпуская кнопки мыши, переместите кнопку Привет в нужное место.

Изменяем свойство Font (Шрифт) у кнопки

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

Выберите нужный размер шрифта, например, 10. Щелкните на кнопке OK диалогового окна Font

Взгляните на кнопку: шрифт надписи Привет изменился.

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

Добавляем вторую кнопку

Теперь нам необходимо добавить на форму вторую кнопку с надписью Очистить. Повторяем уже знакомые операции. Дважды щелкаем на значке кнопки в коллекции инструментов. На форме появится вторая кнопка. Перетащите ее в правую часть формы рядом с первой кнопкой. Далее измените у кнопки свойства Name с button1 на butClear и свойство Text на текст Очистить. Также можете изменить размер шрифта.

Изменяем размеры кнопок

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

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

Добавляем на форму текстовое поле TextBox

Остался еще один элемент, которого не хватает для нашей программы - это текстовое поле TextBox. Данный элемент предназначен для ввода любого текста. Иногда этот элемент называют полем редактирования.

Помещаем элемент TextBox на форму

У нас уже есть опыт добавления кнопок на форму. Теперь мы должны добавить текстовое поле. Найдите в коллекции инструментов значок текстового поля.

Двойным щелчком на значке TextBox поместите элемент на форму.

Выбрав его на форме, измените положение и размер элемента как показано на рисунке 1.9.

Рис.1.9. Размещение всех элементов на форме

Изменяем значения свойств элемента TextBox

Измениим несколько свойств у текстового поля. Измените значение свойства Name с textBox1 на txtDisplay. По желанию, вы можете изменить размер шрифта.

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

Этап визуального программирования на этом завершен. Мы сконструировали внешний вид программы. Теперь осталось ввести исходный код для программы.

Visual C# является языком программирования, ориентированным на обработку событий. Например, если вы щелкните на кнопке Привет, то выполняется событие Click для кнопки butHello и автоматически будет выполнена процедура обработки данного события. Таким образом, ваша задача сводится к тому, чтобы для каждого события написать соответствующую процедуру - обработчик данного события. Если вы ничего не поняли - не расстраивайтесь. Все гораздо проще, чем может показаться на первый взгляд. Давайте попробуем, и вы увидите, как это просто и легко. Начнем с обработчика события Click для кнопки Привет (butHello).

Пишем процедуру для кнопки Привет (butHello)

Дважды щелкните на кнопке Привет (butHello). Visual Studio откроет окно программного кода. Обратите внимание, что Visual Studio автоматически поместил в окно программного кода строчки:

private void butHello_Click(object sender, EventArgs e)
{

}

Как мы договаривались, при нажатии на кнопку в текстовом поле должна появиться надпись Здравствуй, Мир!. Поместите курсор между фигурными скобками { } и введите следующий код:

txtDisplay.Text = "Здравствуй, Мир!";

Обратите внимание, что когда вы набрали слово txtDispaly и поставили точку, то Visual Studio предложил вам выбрать уже готовые варианты для продолжения. Не обращайте пока внимания на подсказки и продолжайте набирать текст. Не забудьте поставить в конце строки точку с запятой.

Вводим код для кнопки Очистить

Снова переключитесь в режим визуального редактирования (View | Designer) и дважды щелкните на кнопке Очистить (butClear). Visual Studio снова сгенерирует заготовку для события Click второй кнопки. Задача этой процедуры заключается в очистке текстового поля. Для этого нужно присвоить для значения свойства Text пустую строку.

txtDisplay.Text = "";

Выполняем программу Привет

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

Если вы не сделали ни одной ошибки, то у вас на экране появится окно нашей программы. Щелкните на кнопке Привет. В текстовом поле появится текст, который мы задали в коде программы. Теперь щелкните на кнопке Очистить. Текст исчезнет. Вы можете пощелкать по кнопкам несколько раз. Чтобы выйти из программы, нажмите на кнопку Закрыть в верхнем правом углу программы.

Когда вы выходите из программы, то можете снова вносить в нее изменения в Visual Studio. Попробуйте самостоятельно изменить программу таким образом, чтобы при щелчке на кнопке Привет в текстовом поле появилась надпись Привет, мама!.

Исполняемый файл EXE

Когда вы запустили программу в первый раз, то Visual Studio автоматически создал исполняемый файл EXE. Откройте папку, в котором вы сохраняли свой проект. Там найдите подпапку \bin\Debug, в которой увидите файл MyFirstProgram.exe.

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

Итоги

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

Вопросы и ответы

Можно ли изучать по несколько уроков в день?: Да, вы можете выбрать свой собственный темп прохождения уроков.
Можно ли создавать на C# профессиональные программы?: Да, на C# можно создавать настоящие Windows-программы. Очень многие программисты выбирают этот язык для создания своих программ.