[На главную] [Назад на предыдущую] [Вперёд на следующую]

2. Размещение контролов на форме (интерфейс -1)

Создадим интерфейс PrimitivCalc_0. Разместим на форме три элемента TextBox и четыре командные кнопки Button (см рис 4). Общее название этих и других элементов – Controls на русский язык переводится как Элементы Управления. Но мы будем для простоты и краткости так их и называть:  контролы, хотя это уже жаргон.

    Порядок размещения контролов следующий:

    1. Открываем окно Toolbox.

Если его не видно, то возможно ему придано свойство AutoHide и окноToolbox прячется за левой границей экрана. Тогда надо навести курсор на заголовок окна (вертикально расположенное слово Toolbox) и окно выплывет. Но возможно окно закрыто, тогда надо нажать пункт меню View и в раскрывшемся списке выбрать (щёлкнуть) опцию Toolbox.

    2. Щелчком мыши выбираем нужный контрол.

Окно Toolbox имеет стиль проводника (иерархическое дерево), поэтому мы можем увидеть и слишком много контролов, а можем не увидеть и ни одного. Если это так, то сначала закройте все разделы щелчками по знакам минус напротив заголовков разделов, а потом щёлкните на знаке плюс раздела Common Controls. После выбора контрола курсор мыши приобретёт вид крестика с прикреплённым значком выбранного контрола.

    3. Помещаем курсор на форму, нажимаем левую кнопку и не отпуская её протягиваем курсор по диагонали, придавая помещаемому контролу нужный размер.

Для изменения размеров контролов используются окружающие их маркеры. Надо навести курсор мыши на нужный маркер и когда курсор примет вид двунаправленной стрелки, нажать левую кнопку и протягивать маркер. Сразу заботьтесь о привлекательном внешнем виде создаваемого окна. Форма с размещёнными на ней контролами – это и есть окно будущей программы. Контролы, выполняющие похожие функции, должны быть одинакового размера. Выровнять их можно и на глаз, однако когда контролов много, то для изменения размеров, форм и местоположения их на форме и относительно друг друга можно применять пункты меню Format. Удерживая нажатой клавишу Ctrl, поочерёдно выделите левыми щелчками группу обрабатываемых контролов, а затем открывайте меню Format.

            Пункт Align выравнивает выделенные элементы по левому (Left), правому (Right), верхнему (Top) нижнему краю (Bottom) или по центру, но не меняет размер.

            Пункт Make Same Size делает выделенные элементы одинаковыми по ширине (Width), высоте (Height) или уравнивает оба размера (Both).

            Выравнивание размеров и местоположения производится по контролу, выделенному первым.

            Для изменения зазоров и пустот между элементами служат пункты меню Vertical Horizontal Spacing. Зазоры можно сделать одинаковыми (Make Equal), увеличить (Increase), уменьшить (Decrease) или вообще удалить (Remove).

Добейтесь, чтобы форма с контролами приняла вид как на рис 5.

3.Сохранение проекта

Сохранить проект нужно после первых же шагов по его разработке. Разместили на форме первые элементы и в меню File, выбираем Save All. Появится окно Save Project (см рис 5). Здесь в поле Location (расположение) надо определить путь к папке, где будет располагаться проект. По умолчанию VS предложит что-то своё где-нибудь внутри папки Program Files, но удобнее, особенно когда на компьютере работает несколько человек, выбрать свою папку для всех проектов VS. Путь к папке можно набрать вручную с клавиатуры, а можно воспользоваться кнопкой Browse (Просмотреть). Но в любом случае будьте внимательны и совершайте все действия осознанно, не тыкая, что попало и куда попало.

4. Окно Properties, изменение свойств контролов (интерфейс -2)

Каждый контрол имеет много различных свойств. Например, все помещённые на форму объекты, включая и саму форму имеют высоту (), ширину (), цвет. Каждое свойство имеет какое-то значение, например ширина может быть 50 или 100 пикселей, а цвет жёлтым или зелёным. Уже самим фактом помещения объекта на форму мы придали некоторым его свойствам вполне определённые значения. Некоторые свойства заданы по умолчанию, например все наши объекты видимы, то есть свойству Visible по умолчанию придано значение True, но, изменив значение Visible с True на False мы можем сделать их невидимками. Изменить значения свойства контролов можно тремя способами.

     1. Непосредственное манипулирование объектами на форме. Перемещая маркеры мы можем изменить координаты X и Y расположения (Location) объекта на форме или его размеры (Size).

    2. Задание значений в окне свойств. Окно свойств (Properties) по умолчанию расположено в правом нижнем углу окна VS см рис 4. Сразу под строкой заголовка окна находится раскрывающийся список с именами всех объектов формы, включая и саму форму. Раскрыв список щелчком по маленькому чёрному треугольнику и, щёлкнув имя нужного контрола, мы откроем таблицу с двумя столбцами. В правом столбце перечислены свойства выбранного объекта, а в левом соответствующие значения. Раскрыть свойства объекта можно и простым щёлчком по изображению нужного объекта на форме. Изменим некоторые свойства у размещённых на форме контролов.

Имя объекта или, что тоже самое, значение свойства Name играет особую роль. Ошибки при его задании недопустимы. Имя является идентификатором объекта. Каждая форма и каждый контрол должны иметь своё уникальное имя. Имена по умолчанию раздаёт сам VS при создании объекта. Это "принудительное" им состоит из слова, обозначающего тип объекта, и цифры – порядкового номера. Например наши текстовые окна имеют имена: TextBox1, TextBox2, TextBox3, а командные кнопки Button1, Button2, Button3, Button4. Можно сохранить имена по умолчанию, но гораздо удобнее дать объекту имя, отражающее его назначение в программе. Для двух верхних текстовых окон, куда мы намереваемся вводить значения компонентов арифметических действий, например, слагаемых, выберем такие имена txtA и txtB. Нижнему текстовому окну дадим имя txtRez. Давая такие имена мы следовали общепринятой практике: первые три строчные буквы (префикс) будут напоминать нам о типе объекта, а следующие буквы о назначении (Rez - Результат). Принято первую после префикса букву писать заглавной. Итак, сотрите в окне свойств прежнее имя, например, TextBox1 и впишите новое, например,  txtA. Всё просто. Тут главное не перепутать объект переименования. Проверьте не переименовали ли вы случайно форму, её имя мы пока трогать не будем. Пока форма у нас одна пусть она носит своё природное имя Form1.

Аналогично переименуем кнопки, и в порядке слева направо дадим им имена: btnAdd, btnMinus, btnMult, btnDiv. Ясно, что происхождение имён идёт от слов Addition, Multiplication, Division, что переводятся как сложение, умножение и деление. Слово Subtraction - вычитание, чем-то мне () не понравилось и было выбрано слово Minus. В общем никаких особых ограничений VS на имя объектов не налагает, но надёжнее использовать только латинские буквы и цифры. Главное тут удобство самого программиста, что бы ему самому не запутаться в своих креатурах.

А вот пользователю (юзеру), имя объекта, как говорится, до лампочки. Имя так и останется где-то в глубинах кода и никак не отразится на интерфейсе. Как же пользователь узнает, что кнопка с надписью Button3 предназначена для умножения? Для этой цели служит свойство Text. Именно значение свойства текст отображается на внешнем виде контрола. Щёлкните на крайней слева кнопке, она теперь btnAdd, зайдите в свойство Text, сотрите Button1 и напишите, то что будет наиболее понятно другому человеку. Если другим человеком предполагается англичанин можно написать Add, - и он вас поймёт. Если другой человек русский, напишите "прибавить". Но лучше всего просто поставить знак "+", тогда вас поймёт и китаец. Если знак "+" вам покажется маленьким зайдите в свойство Font (шрифт), щёлкните на кнопке с тремя точками и выберите в раскрывшемся диалоговом окне, более подходящее написание. Аналогично измените  свойство Text у других объектов. У текстовых окон свойство текст оставьте пустым или введите нули. И даже у формы значение текста измените с безликого Form1 на что-нибудь вроде "Мегакалькулятор", или "Калькулятор Свистякова". В итоге форма будет выглядеть, примерно, как на рис 7

Примерно, но не так. Пока слева от текстовых окон отсутствуют буковки a,b и знак "=". Для их размещения можно использовать контрол Label. Возьмите его на панели Toolbox, разместите где надо на форме,  измените свойство Text, подберите размер и пока всё. Интерфейс самого примитивнейшего калькулятора готов.

Осталось заметить, что ещё один способ изменения значений свойств контролов - 3. Написание кода будет рассмотрен позднее.

[На главную] [Назад на предыдущую] [Вперёд на следующую]