Визуальное проектирование приложений C#
Понравился сайт? Угостите автора кофе! ❤ Глава 3. Формы в приложениях C# Настройка внешнего вида и поведения формы Кнопки изменения размеров формы Добавление фонового изображения Добавление элементов управления Добавление и настройка текстовых полей Настройка свойств текстовых полей LinkLabel Добавление графических изображений Позиционирование элементов управления в форме Настройка взаимного расположения элементов формы Установка промежутков между элементами Центровка элементов в окне формы Обработка идентификатора и пароля Изменение внешнего вида ссылки Полный исходный текст приложения UserLogin Инициализация полей ввода текста Инициализация графических изображений
Глава 3. Формы в приложениях C# В предыдущей главе мы познакомили Вас с формами, создаваемыми на базе класса System.Windows.Forms и подробно рассмотрели исходный текст несложного приложения Hello. Вы научились размещать на поверхности форм элементы управления, перетаскивая их мышью из панели инструментов, создавать обработчики событий, создаваемых этими элементами управления. Вы также познакомились с основными приемами отладки приложений C#. В этой главе мы рассмотрим формы подробнее и научимся задавать для них различные свойства. Настройка внешнего вида и поведения формы Когда мастер проектов создает форму, она имеет название Form1, размеры и другие свойства, принятые по умолчанию. В нем нет меню, инструментальных панелей, строки состояния, полос прокрутки и других атрибутов, которыми обычно снабжаются окна Microsoft Windows. Теперь мы научим Вас настраивать внешний вид формы, чтобы придать ей необходимый дизайн. Как и следовало ожидать, большинство операций по настройке внешнего вида формы выполняется визуально без «ручного» программирования. Для начала поставим перед собой цель создать форму, предназначенную для идентификации пользователей. В этой форме нужно будет предусмотреть поля ввода идентификатора пользователя и пароля, а также кнопки Войти и Отменить. С помощью первой кнопки пользователь сможет попытаться «войти» в систему, а с помощью второй — отказаться от этой операции. Вначале Вам следует создать приложение с названием UserLogin, пользуясь для этого приемами, описанными в предыдущей главе. Пока не добавляйте в окно никакие элементы управления, мы займемся этим позже. Первое, что мы сделаем, это изменим заголовок формы. Щелкните правой кнопкой мыши форму Form1, открытую в окне визуального проектирования приложения, и выберите из контекстного меню строку Properties. При этом в окне свойств, расположенном в правом нижнем углу главного окна Microsoft Visual Studio .NET, будут показаны свойства нашей формы (рис. 3-1).
Рис. 3-1. Просмотр свойств формы Form1 Чтобы изменить заголовок окна, отредактируйте свойство Text. Замените строку Form1 строкой «Идентификация пользователя». После этого нажмите клавишу F5, чтобы оттранслировать и запустить приложение. Теперь Вы увидите измененный заголовок окна (рис. 3-2).
Рис. 3-2. Мы изменили заголовок окна В верхнем левом углу формы находится значок (icon) формы. Этот значок представляет окно формы на панели задач Microsoft Windows, а также в окне, появляющимся на экране компьютера при использовании клавиши табуляции для переключения между окнами различных приложений. По умолчанию мастер проектов добавляет в создаваемый проект файл значка с именем App.ico с изображением цветных прямоугольников. Однако каждое приложение и, возможно, каждая форма приложения, должна иметь собственные значки, чтобы их было легче различать. Чтобы нарисовать новый значок, нужно обладать определенными художественными способностями. Вы можете поручить эту работу профессиональному дизайнеру или воспользоваться готовыми значками. Много платных и свободно доступных рисунков можно найти в Интернете, воспользовавшись любой поисковой системой и ключевыми словами «free clipart». Большая коллекция значков поставляется вместе с системой Microsoft Visual studio .NET. После установки этой системы Вы сможете найти ее в папке Program files\Microsoft Visual Studio .NET\Common7\Graphics\icons. Для того чтобы изменить значок нашей формы идентификации пользователей, скопируйте файл SECUR04.ICO (или любой другой, который Вам понравится) из каталога Program files\Microsoft Visual Studio .NET\Common7\Graphics\icons\Misc в каталог с файлами проекта приложения UserLogin. Затем найдите свойство формы с названием Icon, и щелкните его левой клавишей мыши. Затем щелкните появившуюся кнопку с многоточием (рис. 3-3). Наличие многоточия свидетельствует о том, что для редактирования данного свойства будет открыто дополнительное диалоговое окно.
Рис. 3-3. Изменение значка формы Выберите только что скопированный файл значка SECUR04.ICO в стандартном окне выбора файлов. После этого новый значок появится в верхнем левом углу создаваемой формы. Далее нужно включить новый файл значка в проект нашего приложения. Добавление новых файлов и объектов в проект выполняется при помощи строки Add New Item меню Project главного окна Microsoft Visual Studio .NET. Существующие файлы и объекты добавляются строкой Add Existing Item того же меню. Так как мы будем добавлять готовый файл значка SECUR04.ICO, воспользуйтесь строкой Add Existing Item. После ее выбора на экране появится одноименное диалоговое окно. Выберите в этом окне файл добавляемого значка. Как только Вы это сделаете, имя файла появится в окне Solution Explorer (рис. 3-4).
Рис. 3-4. Файл значка добавлен в проект При необходимости можно отредактировать файл значка. Для этого нужно дважды щелкнуть левой клавишей мыши его имя в окне Solution Explorer. Заметим, что файл значка *.ico может содержать не одно, а сразу несколько изображений, каждое из которых имеет свой размер и свою палитру (т.е. набор цветов). В использованном нами файле SECUR04.ICO имеются два изображения, одно из которых (большое) имеет размер 32х32 пиксела, а другое (маленькое) — размер 16х16 пикселов. Максимальное количество цветов обоих изображений равно 16. Для того чтобы отредактировать нужное изображение, выберите из меню Image главного окна Microsoft Visual Studio .NET строку Current Icon Image Types. Чтобы значок приложения смотрелся лучше при разных размерах и экранных разрешениях, возможно, следует добавить в файл пиктограммы еще несколько изображений. Для этого, находясь в режиме редактирования значка, выберите из меню Image строку New Icon Image Type. При этом на экране появится список типов изображений, показанный на рис. 3-5.
Рис. 3-5. Добавление изображения нового типа Если Вы предполагаете, что создаваемое приложение будет работать на компьютерах с монохромным монитором, добавьте изображения, отмеченные как Monochrome. С помощью кнопки Custom можно создать значки с произвольным размером. Проделав все описанные выше действия по изменению значка формы, оттранслируйте и запустите приложение на выполнение кнопкой F5. Теперь окно формы примет вид, показанный на рис. 3-6.
Рис. 3-6. Новый значок формы По умолчанию окно формы снабжается рамкой, с помощью которой пользователь может изменять размеры окна. Однако такая рамка не всегда удобна. Обычно диалоговые окна, вроде тех, что предназначены для идентификации пользователей, имеют фиксированный размер. Настраивая соответствующим образом свойства формы, можно выбрать необходимый в каждом конкретном случае тип рамки. Отыщите в окне свойств формы свойство FormBorderStyle, задающее стиль рамки (рис. 3-7).
Рис. 3-7. Выбор рамки для нашей формы По умолчанию это свойство имеет значение Sizable. Чтобы пользователь не мог изменять размеры окна при помощи рамки, нужно выбрать одно из значений данного свойства, в названии которого присутствует слово Fixed. Словом Sizable отмечены типы рамок, с помощью которых допускается изменение размеров окна формы. Если выбрать значение None, у формы вообще не будет ни рамки, ни заголовка. Закрыть такое окно можно будет только при помощи комбинации клавиш Alt+F4 (если, конечно, в окне нет кнопки, предназначенной для закрытия формы). Типы рамок, в названии которых присутствует строка ToolWindow, предназначены для создания инструментальных панелей, таких как панели элементов управления и компонентов Microsoft Visual Studio .NET или инструментальных панелей графического редактора Adobe Photoshop. Вы можете провести эксперименты, выбирая разные типы рамок и запуская наше тестовое приложение UserLogin. На рис. 3-8 мы показали внешний вид формы, для которой установлен тип рамки Fixed3D. Это трехмерная рамка, не допускающая изменение размеров окна формы.
Рис. 3-8. Рамка типа Fixed3D Кнопки изменения размеров формы Хотя мы запретили изменение размеров окна при помощи рамки, пользователь все же может раскрыть окно на весь экран (максимизировать окно) или свернуть его в панель задач (минимизировать) при помощи управляющих кнопок, расположенных в правой части заголовка формы. Если по логике работы приложения такие действия недопустимы, следует блокировать некоторые или все упомянутые выше кнопки, настраивая соответствующим образом свойства формы. Свойства MaximizeBox и MinimizeBox по умолчанию имеют значение True, в результате чего в заголовке окна появляются разблокированные кнопки максимизации и минимизации формы. Установив для этих свойств значение False, можно получить окно, в котором имеется только кнопка закрытия формы (рис. 3-9).
Рис. 3-9. Размеры этого окна изменить нельзя Установив значение свойства ControlBox, равным False, можно вообще убрать все кнопки из заголовка формы. Если же задать значение True свойствам ControlBox и HelpButton, в заголовке окна появятся две кнопки, первая из которых предназначена для получения подсказки, а вторая — для закрытия окна (рис. 3-10).
Рис. 3-10. Появилась кнопка запроса подсказки Если щелкнуть кнопку подсказки, курсор мыши будет снабжен вопросительным знаком. Пользователь сможет подвести такой курсор к интересующему его объекту формы и, щелкнув этот элемент, узнать его назначение. По умолчанию формы, создаваемые мастером проектов, имеют скучный серый цвет, как и все стандартные диалоговые окна ОС Microsoft Windows первых версий. К счастью, Вы можете легко задать необходимый фоновый цвет формы и даже указать для формы фоновое изображение, редактируя ее свойства. Чтобы изменить цвет фона формы, необходимо отредактировать свойство BackColor. Щелкнув кнопку раскрытия списка, расположенную справа от названия данного свойства, Вы откроете диалоговое окно с тремя вкладками, показанное на рис. 3-11.
Рис. 3-11. Диалоговое окно выбора цвета На вкладке System находится список так называемых системных цветов ОС Microsoft Windows. Эти цвета может отображать любой видеоконтроллер, даже работающий в «доисторическом» режиме VGA. Вкладка Web содержит более обширный список цветов, которые гарантированно отображаются браузерами при низком цветовом разрешении видеоадаптера (в режиме отображения 256 цветов). И, наконец, с помощью вкладки Custom можно задать любой цвет, выбрав его из палитры или указав значения отдельных составляющих компонентов цвета. Большинство современных компьютеров оборудовано видеоадаптерами, способными отображать более 17 млн. цветов в так называемом режиме TrueColor. Однако для совместимости с более низкими режимами цветового разрешения Вы можете ограничить палитру цветов приложения, выбирая цвета на вкладке Web или даже System. Заметим, что монохромные режимы, а также режимы с низким цветовым разрешением могут встречаться в карманных компьютерах, а также в старых компьютерах типа Notebook и телевизионных приставках. Добавление фонового изображения При создании Web-страниц на языке HTML Web-дизайнеры очень часто пользуются таким приемом, как добавление на страницу фонового изображения. Здесь обычно используется изображение небольшого размера, которое браузер тиражирует (размножает) по поверхности страницы. Этот дизайнерский прием позволяет, с одной стороны, улучшить внешний вид страницы, а с другой — обеспечить небольшое время загрузки страницы по медленным каналам Интернета. Последнее достигается благодаря небольшому размеру файла фонового изображения. Для нашего приложения UserLogin создайте в любом графическом редакторе (например, в Adobe Photoshop), файл bkg.gif с размерами 1х4000 пикселов. Левую часть этого узкого и длинного изображения раскрасьте, например, в темно-синий цвет, а правую — в светло-голубой или белый цвет. Затем скопируйте файл bkg.gif в каталог проекта и добавьте его в проект при помощи строки Add Existing Item меню Project. Для того чтобы назначить это изображение в качестве фонового, отредактируйте свойство формы с именем BackgroundImage. Щелкнув кнопку с изображением многоточия, расположенную справа от имени этого свойства, выберите в появившемся на экране диалоговом окне файл bkg.gif. Теперь окно нашей формы примет вид, показанный на рис. 3-12.
Рис. 3-12. Фоновое изображение в окне формы В левой части этого окна появилась широкая полоса, образовавшаяся в результате тиражирования фонового изображения по вертикали. Заметьте, мы создали файл bkg.gif с очень большой длиной по горизонтали, превышающей горизонтальное разрешение современных мониторов. Это сделано для того, чтобы данное изображение не тиражировалось по горизонтали, иначе вместо одной вертикальной полосы в широком окне может появиться несколько таких полос. Этот прием используется и при создании Web-страниц. В качестве фона автономного приложения можно применить практически любое графическое изображение, однако учтите, что на загрузку изображения размером в несколько мегабайт может уйти немало времени (особенно если производительность компьютера не слишком высока). Поэтому мы рекомендуем не перегружать форму фоновыми изображениями большого размера без особой на то необходимости. Хотя длина нашего изображения bkg.gif по горизонтали велика, размер файла очень мал (всего 153 байта). Дело в том, что в изображении используется всего два цвета, а его высота составляет всего один пиксел. Поэтому на загрузк файла bkg.gif в окно формы будет происходить очень быстро. По умолчанию курсор мыши в окне формы изображается в виде стрелки. Это стандартный курсор для ОС Microsoft Windows. При необходимости нетрудно выбрать курсор другой формы или даже нарисовать свой собственный курсор. Чтобы выбрать курсор, необходимо отредактировать свойство Cursor формы. По умолчанию это свойство имеет значение Default, что соответствует обычному курсору в виде стрелки. При редактировании свойства Cursor Вам будет предложен список, показанный на рис. 3-13.
Рис. 3-13. Выбор формы курсора мыши Курсор, в изображении которого присутствуют, например, песочные часы, обычно используют для индикации состояния ожидания, когда приложение занято какой-то работой, и пользователю нужно немного подождать. Назначение курсоров различной формы описано в пользовательской документации к ОС Microsoft Windows. На рис. 3-14 мы показали окно приложения UserLogin, в котором используется курсор мыши в виде руки.
Рис. 3-14. Курсор в виде руки Мы, однако, не рекомендуем сильно увлекаться использованием курсоров мыши нестандартной формы, т.к. это может запутать пользователя. Добавление элементов управления Как мы уже говорили в предыдущей главе, в форму можно добавлять различные элементы управления, формирующие пользовательский интерфейс, а также программные компоненты. Эта операция выполняется простым перетаскиванием мышью значков необходимых элементов или компонентов в форму из инструментальных панелей. Особенности добавления и обработки событий для наиболее важных компонентов будут предметом изложения довольно значительной части нашей книги. В этом разделе мы расскажем только о добавлении таких компонентов, как текстовые надписи, графические изображения, поля ввода текстовой информации и кнопки. Именно эти компоненты потребуются нам для завершения работы над формой идентификацией пользователей в приложении UserLogin. При добавлении компонентов мы будем пользоваться инструментальной панелью, показанной на рис. 3-15.
Рис. 3-15. Значки элементов управления на инструментальной панели Toolbox В итоге всех действий, описанных в этой главе книги, форма приложения UserLogin должна принять вид, показанный на рис. 3-16.
Рис. 3-16. Готовая форма идентификации пользователей Как видите, по внешнему виду эта форма мало похожа на стандартные диалоговые окна Microsoft Windows. Она скорее напоминает формы, размещаемые на страницах Web-сайтов. На наш взгляд, сегодня имеет смысл придавать приложениям именно такой вид, привычный для современных пользователей Интернета. Что нового появилось в этой форме? Прежде всего, мы добавили логотип и текстовые надписи. Кроме этого, в форме появились два поля ввода текстовой информации, первое из которых (обычное) предназначено для ввода идентификатора пользователя, а второе (специальное) — для ввода пароля. Свойства этого поля настроены таким образом, что введенные символы пароля не отображаются, а заменяются звездочками. Далее, в нижнюю часть формы мы добавили две ссылки на ресурсы Интернета. Когда обработчики событий формы будут готовы, щелчок первой из этих ссылок запустит браузер и загрузит в его окно главную страницу службы восстановления данных DataRecovery.Ru. Вторая ссылка может быть использована для отправки электронного сообщения автору этой книги. Назначение кнопок Войти и Отменить очевидно. Первая из них позволяет войти в систему администрирования, а вторая просто закрывает форму без выполнения каких-либо дополнительных действий. Добавление и настройка текстовых полей В инструментальной панели Toolbox предусмотрено два типа полей для создания текстовых надписей в формах. Это поля Label и LinkLabel (рис. 3-15). При помощи поля Label можно добавлять в форму обычные надписи, выполненные заданным шрифтом. Поле LinkLabel предназначено для добавления в форму ссылок на ресурсы Интернета, такие как адреса Web-сайтов и серверов FTP, адреса электронной почты и пр. Разумеется, Вы можете использовать эти поля и другим образом. Например, когда пользователь щелкнет такое поле мышью, приложение может вывести на экран новую форму. Создавая форму, показанную на рис. 3-16, мы перетащили из панели инструментов несколько полей Label, разместив их на поверхности формы. Для каждого поля необходимо настроить свойства, изменив нужным образом текст надписи, шрифт и цвет текста. Кроме того, нужно отрегулировать мышью размеры областей, выделенных для поля. Рассмотрим основные свойства полей Label, которые чаще всего требуется редактировать. Текст надписи задается свойством Text. Вы можете задать здесь любую текстовую строку с использованием латинского алфавита или символов кириллицы, цифр и знаков пунктуации. Чтобы задать шрифт, которым отображается текстовая строка, отредактируйте свойство Font. При этом вам будет предложено выбрать шрифт из списка шрифтов, установленных на Вашем компьютере (рис. 3-17). Здесь можно выбрать название шрифта, его стиль, размер и (что важно для отечественных разработчиков), написание (в поле Script).
Рис. 3-17. Выбор шрифта для отображения текстовых надписей Создавая приложения, которые предназначены для работы на различных компьютерах, не увлекайтесь особенно выбором нестандартных шрифтов. Если указанного шрифта не найдется на компьютере пользователя, то вместо него ОС подберет другой, наиболее подходящий с ее точки зрения, шрифт. И вовсе не обязательно, что внешний вид Вашей формы от этого улучшится. Мы рекомендуем по возможности пользоваться только самыми основными шрифтами, входящими в комплект ОС Microsoft Windows, такими как Arial, Times New Roman, Courier New. В тех же случаях, когда необходимо использовать какой-то особенный шрифт, следует упомянуть об этом в инструкции по установке. Если у Вас есть лицензия на распространение шрифта, то его можно поставлять вместе с приложением. Более подробно мы расскажем о шрифтах в 10 главе нашей книги. Для того чтобы указать цвет символов добавляемого текстового поля, отредактируйте свойство ForeColor. При этом Вам будет предложено выбрать цвет из диалогового окна с вкладками, показанными ранее на рис. 3-11. При необходимости можно изменить и цвет фона надписи. Это можно сделать, изменив значение свойства BackColor. Свойство BorderStyle указывает, надо ли заключать текстовое поле в рамку, и если надо, то в какую. По умолчанию это свойство имеет значение None, в результате чего рамка не используется. Если нужно заключить поле в тонкую рамку, задайте для этого свойства значение FixedSingle, а если в трехмерную — значение Fixed3D. Если отредактировать значение свойства Cursor, то можно изменить внешний вид курсора, когда он оказывается над текстовым полем. Надо сказать, что для обычных надписей, выполненных с использованием полей Label, эта операция выполняется достаточно редко. Что же касается полей LinkLabel, применяемых для размещения в формах ссылок, то по умолчанию внутри этих полей курсор мыши приобретает форму руки. Это поведение полностью согласуется с поведением курсора мыши внутри окна браузера при просмотре обычных Web-страниц — когда курсор мыши указывает на ссылку, он превращается в «указующую» руку. Еще одно важное свойство TextAlign текстовых полей задает способ выравнивания текста в прямоугольной области, отведенной для поля. Если попытаться его отредактировать, на экране появится окно выбора способа выравнивания, показанное на рис. 3-18.
Рис. 3-18. Выбор выравнивания текста Чтобы задать нужный способ выравнивания, щелкните одну из расположенных в этом окне кнопок. По умолчанию текст выравнивается по левой верхней границе, поэтому соответствующая кнопка изображена в нажатом состоянии. Нажимая те или иные кнопки, нетрудно выровнять текст по вертикали и по горизонтали. При этом в окне дизайнера форм Вы сразу увидите результат своей работы. Настройка свойств текстовых полей LinkLabel Как мы уже говорили, поля LinkLabel предназначены для добавления в форму ссылок на ресурсы Интернета или на другие формы. В этом разделе мы расскажем о настройке основных свойств этого поля на этапе проектирования формы. Большинство настроек свойств полей LinkLabel выполняются точно таким же образом, что и полей Label. Например, текст надписи задается свойством Text, а шрифт — свойством Font. Вид рамки определяется при помощи свойства BorderStyle, форма курсора — свойства Cursor, а выравнивание — свойства TextAlign. Однако есть несколько свойств, специфических для полей LinkLabel. Их мы и рассмотрим в этом разделе. Самые важные из них — это свойства LinkColor, VisitedLinkColor, ActiveLinkColor и DisabledLinkColor. Данные свойства определяют цвета ссылок, находящихся в различных состояниях. Чтобы автономное приложение было больше похоже по своему дизайну на Web-приложение, ссылки LinkLabel ведут себя таким же образом, что и ссылки, расположенные на Web-страницах. При этом они даже раскрашиваются в цвета, привычные для посетителей Web-сайтов. Свойство LinkColor определяет цвет ссылки, которая еще ни разу не использовалась. По умолчанию такие ссылки имеют светло-синий цвет. Когда пользователь делает переход по ссылке, а затем вновь возвращается к работе с той же формой, то цвет ссылки изменяется. Цвет использованных ссылок задается при помощи свойства VisitedLinkColor. По умолчанию это фиолетовый цвет. Если навести курсор мыши на ссылку, то она станет активной. Цвет активной ссылки задается свойством ActiveLinkColor. По умолчанию это красный цвет. И, наконец, ссылка может быть заблокирована. Цвет заблокированной ссылки по умолчанию темно-синий и определяется свойством DisabledLinkColor. Добавление графических изображений Ранее мы уже рассказывали о том, что для формы можно задавать фоновое изображение. Помимо этого имеется возможность размещать любые графические изображения на поверхности формы. Возьмите файл изображения логотипа своей компании или какого-либо другого изображения подходящего размера, запишите его в каталог приложения UserLogin, а затем добавьте в проект. Теперь перетащите мышью в форму из инструментальной панели значок PictureBox. Разместите получившуюся в результате область прямоугольного размера в нужном месте формы и придайте ей необходимые размеры. Теперь нужно привязать к данной области файл графического изображения. Это нужно сделать, отредактировав свойство поля PictureBox с названием Image. Просто выберите нужный файл в диалоговом окне Open (рис. 3-19).
Рис. 3-19. Выбор файла графического изображения Сразу после этого выбранное изображение появится в форме. Теперь останется только отрегулировать расположение изображения и размеры выделенной для него области. Учтите, что Вы не сможете выполнить масштабирование изображения, поэтому данная операция должна выполняться еще при подготовке файла изображения. Позиционирование элементов управления в форме Самый простой способ позиционирования элементов управления, добавленных в форму из окна инструментальной панели, заключается в их перемещении мышью. Тонкая доводка расположения элементов «по месту» может выполняться и клавишами перемещения курсора. Однако в системе Microsoft Visual Studio .NET имеются специальные средства, упрощающие процесс позиционирования элементов управления на поверхности формы. Об этих средствах мы сейчас и будем рассказывать. Для удобства позиционирования элементов в режиме проектирования формы используется специальная точечная сетка (рис. 3-20).
Рис. 3-20. Сетка для точного позиционирования элементов управления Настраивая свойства формы и самих элементов управления, можно установить такой режим проектирования, при котором элементы привязываются узлам сетки и не могут занимать промежуточные положения. Режим привязки облегчает выравнивание границ элементов и самих элементов по вертикали и горизонтали. Управление режимом привязки к сетке выполняется путем настройки свойств формы. Щелкните форму правой клавишей мыши в таком месте, где нет элементов управления (или в окне редактирования формы, но рядом с формой). Затем в контекстном меню выберите строку Properties. Далее в свойствах формы отыщите группу свойств с названием Design (рис. 3-21).
Рис. 3-21. Свойства формы для этапа проектирования Обратите внимание, что свойство DrawGrid по умолчанию имеет значение True. Если заменить его значением False, сетка исчезнет. Скрытие сетки поможет Вам точнее оценить дизайн формы еще на этапе проектирования. Свойство GridSize состоит из свойств GridSize.Width и GridSize.Height. Первое из них задает размер сетки по горизонтали, а второй — по вертикали. В зависимости от требований к точности позиционирования Вы можете оставить значения по умолчанию (8 пикселов), или задать другие. Когда разработка дизайна формы завершена, мы рекомендуем Вам установить значение свойства Locked равным True. После этого изменение (намеренное или случайное) взаимного размеров формы будет невозможно. Заметим, что свойство Locked определено не только для формы, но и для элементов управления. Если Вам нужно зафиксировать расположение в форме какого-то одного элемента управления, установите свойство Locked этого элемента, равным True. И, наконец, назначив свойству SnapToGrid значение False, можно отменить привязку к сетке. После выполнения этой операции элементы можно будет располагать не дискретно, а в любом месте формы. Кроме того, им можно будет придавать любые размеры. Настройка взаимного расположения элементов формы Для точной настройки взаимного расположения элементов управления предназначено меню Format главного окна системы разработки Microsoft Visual Studio .NET. Строки этого меню дублируются для удобства в панели инструментов выравнивания, показанной на рис. 3-22.
Рис. 3-22. Панель инструментов выравнивания элементов управления Чтобы выровнять по горизонтали, например, поля ввода идентификатора пользователя и пароля, нужно выделить их по очереди левой клавишей мыши, удерживая при этом на клавиатуре в нажатом состоянии клавишу Ctrl. То поле (или другой элемент управления), которое будет выделено последним, станет эталонным. Именно по его границе и будут выделены остальные выделенные Вами элементы управления. После выделения выберите из упомянутого выше меню Format строку Align, после чего на экране появится меню инструментов выравнивания (рис. 3-23).
Рис. 3-23. Меню Align Если выбрать из этого меню строку Lefts, выделенные ранее элементы управления будут выровнены по левой границе того элемента, который был выбран последним. Заметим, что вместо меню можно использовать панель инструментов, показанную на рис. 3-22. Строке Lefts в этой панели соответствует вторая кнопка слева. Самая левая кнопка панели инструментов выравнивания обеспечивает привязку выбранного элемента к сетке. Средствами меню Align можно выровнять выделенные элементы по вертикали и горизонтали. Их можно выровнять левой (строка Lefts), правой (Rights), верхней (Tops) и нижней (Bottoms) границам. Можно выполнить центровку элементов по вертикали (Centers) и горизонтали (Middles), а также привязать границы элементов к сетке (to Grid). Строки меню Make the Same Size позволяют сделать одинаковыми размеры выделенных элементов управления по вертикали и горизонтали (рис. 3-24).
Рис. 3-24. Меню Make the Same Size С помощью строк Width и Height можно сделать одинаковыми размеры выделенных элементов управления, соответственно, по ширине и высоте. Строка Both позволяет уравнять одновременно и ширину, и высоту элементов. Если же выбрать строку Size to Grid, то размеры выделенных элементов изменятся таким образом, чтобы оказаться привязанными к сетке. Эта операция удобна, если вначале размеры элементов не были привязаны к сетке, а затем Вы решили выполнить такую привязку. Установка промежутков между элементами Меню Horizontal spacing (рис. 3-25) и Vertical spacing (рис. 3-26) позволяют уровнять расстояние между элементами по горизонтали и вертикали, соответственно. В этой операции задействуют, как правило, не менее трех элементов.
Рис. 3-25. Меню Horizontal spacing
Рис. 3-26. Меню Vertical spacing С помощью строк Make Equal этих меню можно автоматически расположить элементы таким образом, чтобы между ними было равное расстояние. Строки Increase и Decrease позволяют, соответственно, увеличить и уменьшить расстояние между элементами. И, наконец, строка Remove позволяет ликвидировать свободное пространство между элементами, расположив их вплотную. Центровка элементов в окне формы Меню Center in Form (рис. 3-27) предназначено для центровки элементов внутри окна формы.
Рис. 3-27. Меню Center in Form С помощью строки Horizontally можно выполнить центровку по горизонтали, а с помощью строки Vertically — по вертикали. Заметим, что элементы в форме могут пересекаться, перекрывая друг друга. С помощью меню Order (рис. 3-28) разработчик может изменить порядок расположения элементов, выдвигая некоторые элементы на передний план (строка Bring to Front) или убирая некоторые элементы на задний план (строка Send to Back).
Рис. 3-28. Меню Order Как известно, с приложениями Microsoft Windows можно работать и без мыши, с использованием одной только клавиатуры. Нельзя сказать, чтобы этот способ был удобный или широко распространенный, но, строго говоря, если Вы создаете программу с графическим интерфейсом для этой ОС, то она должна быть пригодна к употреблению даже на компьютерах, не оборудованных мышью, трекболом или аналогичным устройством. Стандартные диалоговые окна Microsoft Windows позволяют обходиться без мыши. Для того чтобы изменить состояние того или иного элемента управления, расположенного в таком окне, пользователь вначале должен передать этому элементу фокус ввода. Эта операция выполняется при помощи клавиши табуляции. Когда пользователь нажимает клавишу табуляции, фокус ввода последовательно передается от одного элемента управления к другому. Перебирая элементы управления, пользователь находит нужный и затем изменяет его состояние необходимым образом с помощью клавиатуры или мыши. Точно такое же поведение можно организовать и в формах, создаваемых на базе класса System.Windows.Forms. Для этого нужно настроить свойства TabStop и TabIndex. Свойство TabStop может иметь два значения — True и False. Если у элемента управления, расположенного в форме, это свойство имеет значение, равное True, пользователь может передать фокус ввода данному элементу управления с помощью клавиши табуляции. В том случае, когда значение свойства TabStop равно False, при нажатии на клавишу табуляции фокус ввода будет «перескакивать» через соответствующий элемент управления. Таким образом, для всех элементов управления, которые должны получать фокус ввода с помощью клавиши табуляции, необходимо установить данное свойство равным True. Обычно это такие элементы управления, как поля ввода текстовой информации, кнопки, списки, таблицы, деревья, флажки и т.п. В нашей программе UserLogin свойство TabStop имеет по умолчанию значение True для полей ввода идентификатора пользователя и пароля, а также для кнопок Войти и Отменить. Только что описанное свойство TabStop управляет возможностью получения фокуса элементами управления, расположенными в форме, а свойство TabIndex определяет порядок, в котором эти элементы управления получают фокус ввода при использовании клавиши табуляции. Для каждого элемента управления формы свойство TabIndex имеет свое собственной числовое значение. Во время проектирования дизайнер формы назначает эти значения автоматически в соответствии с порядком, в котором эти элементы были добавлены в форму. Когда пользователь нажимает клавишу табуляции, фокус ввода вначале передается тому элементу управления, который имеет наименьшее значение свойства TabIndex, и для которого значение свойства TabStop равно True. При втором нажатии клавиши табуляции фокус управления передается другому элементу управления, значение свойства TabIndex которого больше, и т.д. Вы можете управлять порядком передачи фокуса ввода при использовании клавиши табуляции, изменяя соответствующим образом значения свойства TabIndex элементов управления, расположенных в форме. Но при этом необходимо следить, чтобы все элементы управления имели разные значения этого свойства, иначе логика передачи фокуса ввода будет нарушена. Итак, мы добавили в форму приложения UserLogin все необходимые текстовые строки, изображения и элементы управления. Вы можете оттранслировать и запустить приложение, нажав в Microsoft Visual Studio .NET кнопку F5. Однако пока наша форма никак не реагирует на использование элементов управления, т.к. мы еще не добавили обработчики событий. Как мы уже говорили, чтобы добавить обработчик события для того или иного элемента управления, нужно щелкнуть его дважды левой клавишей мыши. Обработка идентификатора и пароля Когда пользователь щелкает кнопку Войти, приложение UserLogin должно отобразить на экране идентификатор пользователя и пароль (реальные приложения, разумеется, никогда не должны показывать пароли пользователей). Чтобы реализовать такое поведение, добавьте обработчик события для кнопки Войти. Для этого в окне дизайнера форм нужно дважды щелкнуть левой клавишей мыши указанную кнопку. В ответ дизайнер форм создаст для Вас пустое тело метода button1_Click. Этот метод получит управление во время работы приложения, когда пользователь щелкнет кнопку Войти. Добавьте в тело метода button1_Click вызов метода MessageBox.Show, как это показано ниже: private void button1_Click(object
sender, System.EventArgs e) Обратите внимание, что мы передаем методу MessageBox.Show текстовую строку, составленную из свойств textBox1.Text и textBox2.Text элементов управления, предназначенных для ввода идентификатора пользователя и пароля, соответственно. Свойство Text содержит текстовую строку, представляющую текущее состояние элемента управления. Чтобы пароль пользователя отображался с новой строки, мы использовали символ перевода строки "\n". В результате диалоговое окно с идентификатором пользователя и паролем будет иметь вид, показанный на рис. 3-29.
Рис. 3-29. Диалоговое окно с идентификатором пользователя и паролем Кнопка Отменить предназначена для закрытия окна формы. Эта операция выполняется при помощи метода Close. Добавьте обработчик событий для кнопки Отменить, а затем добавьте вызов метода Close в этот обработчик событий: private void button2_Click(object
sender, System.EventArgs e) Теперь окно нашего приложения можно будет закрывать не только с помощью кнопки, расположенной в заголовке окна, но и с помощью кнопки Отменить. Как мы уже говорили, по своему внешнему виду элемент управления LinkLabel очень похож на ссылку, размещенную на обыкновенной Web-странице. Используя такие элементы управления, можно сделать формы приложений похожими по внешнему виду на страницы Web-сайтов. В нашем приложении UserLogin элемент управления LinkLabel применяется для ссылки на Web-сайт службы восстановления данных http://www.datarecovery.ru, а также для отправки электронного сообщения автору этой книги. Как Вы узнаете позже, эти элементы управления могут быть использованы для отображения на экране новых форм или любых других объектов. Чтобы ссылки, сделанные с помощью элемента управления LinkLabel, заработали, необходимо создать для них обработчики событий. Первую из этих ссылок (с надписью www.datarecovery.ru) необходимо обеспечить таким обработчиком событий: private void linkLabel1_LinkClicked(object sender, Изменение внешнего вида ссылки Первая строка этого обработчика событий обеспечивает изменение внешнего вида ссылки после ее использования: linkLabel1.Links[linkLabel1.Links.IndexOf(e.Link)].Visited = true; Как она работает? Обработчик события получает два параметра. Через параметр sender типа object передается ссылка на объект, вызвавший событие. В нашем случае это будет элемент управления типа LinkLabel с надписью www.datarecovery.ru. Параметр e типа System.Windows.Forms.LinkLabelLinkClickedEventArgs предназначен для передачи параметров от элемента управления, вызвавшего появление события. В частности, через свойство e.Link передается ссылка, которую щелкнул пользователь. Элемент управления LinkLabel может содержать информацию о нескольких ссылках. Полный список ссылок элемента linkLabel1 (с адресом Web-сайта) можно получить при помощи свойства Links. Далее, метод IndexOf позволяет получить из этого списка заданную ссылку, а именно, ссылку e.Link. Теперь остается отметить эту ссылку как использованную, установив значение свойства Visited, равное true. Итак, внешний вид ссылки мы изменили. Теперь обработчик события должен отобразить на экране компьютера содержимое главной страницы Web-сайта. Это можно сделать при помощи метода System.Diagnostics.Process.Start: System.Diagnostics.Process.Start(linkLabel1.Text); Данный метод пытается запустить на локальном компьютере программу или документ, путь к которому передается через единственный параметр. Мы передали этому методу адрес URL нашего Web-сайта www.datarecovery.ru. В результате выполнения метода будет запущен браузер, и в его окне появится загружена искомая Web-страница (рис. 3-30).
Рис. 3-30. Появилась главная страница Web-сайта www.datarecovery.ru Вторая ссылка работает аналогичным образом. Для отправки электронного сообщения мы передаем методу System.Diagnostics.Process.Start наш адрес электронной почты: private void
linkLabel2_LinkClicked(object sender, После использования этой ссылки на экране появится окно почтовой программы, зарегистрированной в системе по умолчанию (рис. 3-31).
Рис. 3-31. Отправка электронного сообщения Полный исходный текст приложения UserLogin Хотя Microsoft Visual Studio .NET позволяет создавать достаточно сложные приложения с помощью дизайнера форм, и Вы можете при этом никогда не увидеть его полного исходного текста, мы будем приводить полные исходные всех наших приложений. Это позволит Вам, с одной стороны, лучше изучить структуру приложений C# с графическим интерфейсом, а с другой — разрабатывать такие приложения на уровне исходных текстов без применения дизайнера форм. Исходный текст приложения UserLogin мы привели в листинге 3-1. Листинг 3-1. Файл ch03\UserLogin\Form1.cs using System; В приложении UserLogin используются те же самые пространства имен, что и в приложении Hello, рассмотренном в предыдущей главе: using System; Если у Вас появится необходимость подключения каких-либо других пространств имен, просто добавьте новые операторы using в конец этого списка. Класс Form1 Приложение UserLogin состоит из одного класса Form1, определенного в пространстве имен UserLogin: namespace UserLogin По мере добавления в окно формы элементов управления, дизайнер форм создает в этом классе различные поля и методы. Поля класса Form1 Для каждого элемента управления, расположенного в форме, дизайнер форм создает по одному полю соответствующего класса: private System.Windows.Forms.Label label1; Эти поля хранят ссылки, необходимые для выполнения всех операций с элементами управления формы. Если для реализации функциональности приложения Вам потребуются новые поля, добавьте их после приведенного выше фрагмента кода. Для инициализации приложения конструктор класса Form1 вызывает метод InitializeComponent, о котором мы рассказывали в предыдущей главе: public Form1() Этот метод создает и инициализирует все элементы управления формы, а также задает их размеры и расположение в окне. При необходимости выполнить какую-либо дополнительную инициализацию Вы можете добавить вызовы других методов, расположив их в теле конструктора после вызова метода InitializeComponent. На самом первом шаге инициализации, на базе класса System.Resources.ResourceManager создается система управления ресурсами, необходимая для работы с национальными языками и параметрами: System.Resources.ResourceManager
resources = new В качестве параметра конструктору класса System.Resources.ResourceManager передается тип создаваемого ресурса. В данном случае это тип формы Form1. Далее метод InitializeComponent создает все необходимые элементы управления, добавленные в форму на этапе проектирования: this.label1
= new System.Windows.Forms.Label(); Когда все элементы управления созданы, необходимо их проинициализировать и разместить в окне формы. На время выполнения этой операции метод InitializeComponent отключает на время механизм генерации сообщений, связанных с размещением элементов в окне формы: this.SuspendLayout(); Инициализация и размещение элементов управления выполняется путем изменения значений соответствующих свойств. Рассмотрим процесс инициализации текстовых полей на примере поля с надписью «DataRecovery.Ru»: // Для отображения этой надписи мы использовали шрифт Haettenschweiler. При этом мы создали этот шрифт как объект класса System.Drawing.Font, а затем присвоили ссылку на этот объект свойству this.label1.Font. Тем самым был изменен шрифт, использованный для отображения надписи. Подробно о шрифтах мы расскажем в 10 главе, а сейчас только отметим, что первый параметр конструктора класса System.Drawing.Font задает название шрифта, второй — его размер, третий — стиль (обычный, наклонный, жирный и т.д.). Четвертый параметр конструктора позволяет выбрать единицу измерения для указания размера шрифта. В нашем случае это пункт (1/72 дюйма). И, наконец, пятый параметр указывает номер страницы Unicode, который должен быть использован для отображения текстовой строки. Значение 204 обозначает страницу с символами кириллицы. Чтобы задать цвет надписи, необходимо изменить свойство this.label1.ForeColor. Дизайнер форм создал объект класса System.Drawing.Color.FromArgb, позволяющий выбрать цвет как набор трех компонентов — красной, зеленой и голубой. Значения компонентов цвета изменяются от 0 до 255. Далее задается расположение надписи. С этой целью изменяется значение свойства this.label1.Location. Дизайнер форм задал координаты в виде объекта класса System.Drawing.Point, передав соответствующему конструктору через параметры координаты надписи по горизонтальной и вертикальной оси. Что же касается размеров надписи, то они задаются при помощи свойства this.label1.Size. Дизайнер присвоил этому свойству ссылку на объект класса System.Drawing.Size, задающий размер объекта по горизонтали и вертикали. Свойство this.label1.Name задает идентификатор (имя) надписи. С помощью этого идентификатора можно, например, изменять текста надписи или ее другие атрибуты. Что же касается текста надписи, то он задается свойством this.label1.Text. Хотя надпись и не получает фокус ввода, дизайнер форм присваивает ей последовательный номер, определяющий порядок, в котором элементы управления получают фокус ввода при использовании клавиши табуляции. Как видите, инициализация и размещение простой текстовой надписи занимает несколько строк программного текста. К счастью, дизайнер форм создает этот текст для Вас автоматически. Инициализация полей ввода текста В процессе инициализации полей, предназначенных для ввода текста, определяется значение пяти различных свойств: // Свойства this.textBox1.Location и this.textBox1.Size задают, соответственно, расположение и размеры поля. Мы рассказывали о них в предыдущем разделе. Аналогично, дизайнер форм задал имя поля при помощи свойства this.textBox1.Name, и порядковый номер для табуляции в поле this.textBox1.TabIndex. Свойство this.textBox1.Text позволяет задать надпись, которая появится в поле ввода сразу после отображения формы. Мы этой возможностью не пользуемся, и поэтому в данное свойство записывается пустая строка. Инициализация графических изображений При размещении в форме графического изображения (такого, например, как логотип компании), мы добавляли объект в ресурсы приложения, изменяя свойство Image. Предварительно мы включали файл изображения в проект, добавляя его к ресурсам приложения. Вот как происходит инициализация элемента управления, содержащего наше изображение: // Здесь с помощью метода resources.GetObject мы извлекаем данные нашего изображения из ресурсов приложения. Эти данные затем приводятся к типу System.Drawing.Bitmap (растровые графические изображения), а затем полученная ссылка используется для инициализации свойства this.pictureBox1.Image. Подробнее о графических изображениях мы расскажем позже в 10 главе, посвященной рисованию в окне форм. Размеры и расположение кнопок, их имя, текст и порядок табуляции задается таким же образом, что и для текстовых полей: // Дополнительно кнопке назначается обработчик событий: this.button1.Click += new System.EventHandler(this.button1_Click); Этот обработчик получит управление, когда пользователь щелкнет кнопку. Исходный текст обработчиков для кнопок нашего приложения уже был описан ранее в этой главе: private void button1_Click(object
sender, System.EventArgs e) Инициализация полей LinkLabel Процедура инициализации полей LinkLabel очень похожа на процедуру инициализации обыкновенных текстовых полей Label. Отличие заключается в том, что для наших полей LinkLabel назначаются обработчики событий: // Исходные тексты обработчиков событий для полей нашей формы были описаны ранее в разделе «Ссылки на ресурсы Интернета». Последнее, что делает метод InitializeComponent, это настройка свойств самой формы Form1. Рассмотрим этот процесс подробнее. Свойство this.AutoScaleBaseSize задает базовый размер для масштабирования, используемый во время отображения формы: // При масштабировании формы этот размер сопоставляется с размером системного шрифта. Цвет фона формы задается при помощи свойства this.BackColor: this.BackColor =
System.Drawing.Color.FromArgb( Этот цвет составляется из отдельных компонентов при помощи метода System.Drawing.Color.FromArgb. Наша форма имеет фоновое графическое изображение. Это изображение задается свойством this.BackgroundImage: this.BackgroundImage =
((System.Drawing.Bitmap) Область формы, предназначенная для отображения элементов управления и рисования, называется клиентской областью (client area). Размеры этой области определяются свойством this.ClientSize: this.ClientSize = new System.Drawing.Size(362, 271); Для размещения элементов управления в окне формы используется метод this.Controls.AddRange: this.Controls.AddRange(new System.Windows.Forms.Control[] { Этому методу передается ссылка на массив добавляемых элементов управления. Стиль рамки, окантовывающей окно формы, задается свойством this.FormBorderStyle: this.FormBorderStyle = Так как мы запросили отображение кнопки помощи в заголовке формы, дизайнер формы установил значение свойства this.HelpButton равным true: this.HelpButton = true; Далее в процессе инициализации метод InitializeComponent назначает форме значок, с помощью которого форма будет представлена на панели задач и в окне переключения приложений: this.Icon = Значок загружается из ресурсов приложения методом resources.GetObject. Кнопки максимизации и минимизации формы не нужны, поэтому свойства this.MaximizeBox и this.MinimizeBox получают значение false: this.MaximizeBox = false; И последние шаги: this.Name
= "Form1"; Здесь метод InitializeComponent задает имя формы (свойство this.Name), текст заголовка окна формы (свойство this.Text). Завершив размещение элементов управления в окне формы, метод InitializeComponent разрешает обработку сообщений, связанных с размещением элементов в окне формы: this.ResumeLayout(false); Напомним, что эта обработка была отключена в самом начале работы метода InitializeComponent. Дизайнер форм позволяет назначить обработчик события для каждого элемента управления, размещенного в форме. Если в процессе проектирования формы Вы случайно дважды щелкнули элемент управления, для которого не нужно создавать обработчик события, то этот обработчик можно удалить. Допустим, Вы по ошибке дважды щелкнули окно формы в дизайнере форм. В результате по умолчанию в исходный текст приложения будет добавлен пустой обработчик событий Form1_Load: private void Form1_Load(object sender,
System.EventArgs e) Чтобы удалить его, откройте окно дизайнера форм и щелкните форму один раз. Далее в инструментальной панели, расположенной в верхней части окна свойств формы Properties щелкните кнопку Events. На рис. 3-22 эта кнопка показана в нажатом виде.
Рис. 3-32. Диалоговое окно событий В результате Вы увидите список всех событий, возможных для объекта (в нашем случае для формы). На рис. 3-22 мы показали, что для события Load (загрузка формы) был создан обработчик события с именем Form1_Load. Чтобы удалить обработчик события, просто сотрите его имя. Кстати, в этом окне Вы можете не только удалять обработчики событий, но и создавать их (что не менее важно). Для создания обработчика Вам достаточно щелкнуть в этом окне имя нужного события. Можно удалить обработчик событий и вручную, редактируя текст программы. Однако чтобы это сделать, недостаточно стереть код обработчика события. Еще нужно удалить код, подключающий этот обработчик к элементу управления. Допустим, при подготовке формы приложения UserLogin Вы по ошибке дважды щелкнули поле ввода идентификатора пользователя. Как результат, в исходном тексте приложения появится тело обработчика сообщения: private void
textBox1_TextChanged(object sender, System.EventArgs e) Этот обработчик позволяет отслеживать процесс ввода текста в поле редактирования. Однако если эта возможность Вам не нужна, удалите исходный текст метода. Удалите также код, подключающий этот обработчик события к полю редактирования: this.textBox1.TextChanged +=
|
Библиотека
Братьев
Фроловых
Братьев
Фроловых
![[Назад]](../../prev.gif){kind=small}
![[Содержание]](../../sod.gif){kind=small}
![[Дальше]](../../next.gif){kind=small}
