Курсовая работа на тему: «Windows Presentation Foundation»
Скачать 369.9 Kb.
|
1.4 Разработка с использованием WPFРазумеется, XAML можно писать вручную, но это достаточно сложно, поэтому в большинстве случаев дизайнеры пользуются Expression Blend и только в случае необходимости нестандартных решений, добавляют код вручную. Если открыть Visual Studio и создать новое WPF приложение, то будет автоматически сгенерирован код, включающий всего два элемента: окно Window и поле Grid («решетка»), на который можно поместить элементы управления. При этом может существовать только один элемент верхнего уровня. И каждый элемент является контейнером. Таким образом, образуется иерархия. (Рис.1) Рис. 1 Внутри дескрипторов помещаются атрибуты и свойства, такие как имя класса, стартовые высота и ширина. Стоит отметить, что 300 единиц обозначают специальную единицу измерения, которая представляет собой 1\96 дюйма экрана. Таким образом решается проблема с различными разрешениями и форматами и приложение будет адекватно работать практически при любых условиях. В связи с особенностями оформления XAML кода, некоторые символы (при написании кода вручную) нужно заменять на специальные коды, аналогичные кодам в HTML. Например, если мы попытаемся задать кнопке текст « 2. Разработка WPF-приложения «Словарь»
2.2 Создание дизайнаВ качестве средства разработки внешнего вида приложения будет использоваться Microsoft Expression Blend 3. Основная идея приложения – в удобстве. Во-первых, когда на окно приложения не будет наведен курсов, оно должно будет уменьшаться до маленького квадрата, не закрывающего рабочую область пользователя. Во-вторых, будет достаточно высокая степень прозрачности, что также сделает пользование словарем при чтении текстов удобным. В-третьих, окно должно будет всегда в режиме «Always on top» - пользователю не придется постоянно сворачивать и разворачивать окна. Первое, что нужно сделать – создать WPF проект. Для этого нужно нажать на Project-New project (Рис.2). Рис. 2 Далее, появится окно ввода названия проекта. Назовем его «Dictionary», выберем «WPF Application», язык – C# и нажмем «Ok». (Рис.3) Выделим основное окно и изменим его размер,- ширина будет равняться 368 единицам измерения и высота – 364. Как уже отмечалось ранее, единицы измерения показывают размер экрана, а не количество точек, выбранный размер окна будет заметно больше размера рабочей области. Это было сделано для создания небольшой дополнительной прозрачной зоны вокруг самого словаря, которая будет отслеживать движения курсора мыши. Поменяем цвет фона и границ фона. Выберем для Background и Border Brush любой цвет и поменяем Alpha (прозрачность) на 0. Также нужно нажать «Allow Transparency». Далее,- изменить Opacity до 94%. (Рис.4) Рис. 4 Далее мы будем создавать зону отображения. Для этого выберем LayoutRoot и поменяем его свойства. Во-первых перетащим его мышкой в середину и поставим «замки» по правому нижниму углу. Выберем ширину равной 247, и высоту равной 324. Начнем создание элементов управления. По задумке, неактивное окно будет свернуто до небольшой полупрозрачной кнопки. Для этого из вкладки Assets перетащим элемент управления Button. Внешний вид кнопки не соответствует желаемому, поэтому нажмем правой кнопкой мыши и выберем «Edit template», в результате чего будет создано копия кнопки. Удалим из неё все объекты кроме корневого - LayoutRoot. Добавим Rectangle (прямоугольник), выберем салатовый цвет и Opacity равной 71%. Создадим ещё один Rectangle, зададим ему белый цвет, Opacity на уровне 20%, RadiusX и RadiusY равными 1.75 – что создаст белый, едва заметный прямоугольник с закругленными углами, имитирующий отливание света от большого зеленого прямоугольника. Последнее, что нужно для нашей кнопки – красивая буква «D», - поместим TextBox, выберем шрифт Cruiz MT и размер 24 pt. В результате получится красивый элемент управления, показанный на рисунке 5. Рис. 5 Для предания большей интерактивности, можно встроить анимацию, которая будет воспроизводиться при наведении мыши. Для этого нажмем F6, что переведет Blend в режим «Анимация». Создадим новый триггер, который будет запускаться при наведении мыши – MouseEnter и добавим к нему анимацию. Для этого выделим букву D, добавим кадр на 0.5 секунде анимации и изменим цвет на белый. Добавим ещё один кадр на 1 секунде и поменяем цвет обратно на черный. Создадим ещё один триггер – MouseLeave, в списке выберем созданную анимацию и действие – «Remove» (Рис. 6). Таким образом, кнопка получила законченный вид: при наведении курсора будет включаться анимация в виде мерцающий буквы D. Рис. 6. Аналогично создадим ещё одну кнопку, которая будет запускать озвучивание просматриваемого слова. Также будет запускаться анимация при наведении курсора. (Рис.7) Рис. 7 Теперь добавим TextBox, ListBox, RichTextBox, которые будут использованы соответственно для ввода нужного слова; вывода списка слов, начинающихся на введенное; и отображение словарной статьи. (Рис.8) На этом создание внешнего вида приложения закончено. сайта используется Visual Web Developer 2008 (Express Edition). Создаем новый проект, для этого находим пункт меню File/New Web Site. В появившемся окне New Web Site выбираем ASP.NET Web Site. Далее определяем путь, где будет храниться наш сайт, а также язык программирования – Visual C# и нажимаем Ok. (Рис.1) Рис.1 Теперь можно приступить к разработке Web-дизайна. Нажимаем кнопку Split для того, чтобы разделить экран на две части и видеть как код сайта, так и его внешний вид (используем концепцию WYSIWYG). В результате мы увидим следующее (Рис.2): Рис.2 Для создания каркаса сайта мы будем использовать стандартные HTML таблицы. Чтобы её добавить, можно как написать соответствующий HTML-код вручную в верхней части (Source), так и вставить её из панели инструментов Toolbox используя Design. Мы воспользуемся вторым способом. (Рис.3) Рис.3 Далее мы редактируем таблицу так, как если бы мы работали с таблицами в Microsoft Word. Удаляем третью лишнюю строку, выделив её и нажав Del. Объединяем две первых ячейки верхней строки: выделяем их, нажимаем на них правой кнопкой мыши и выбираем Modify\Merge Cells. В результате у нас получится следующее: (Рис.4)  Рис.4 Настраиваем размеры и цвета каждой отдельной ячейки используя CSS (каскадные таблицы стиля). Для этого находим нужную нам ячейку, в панели Properties выбираем Style и нажимаем на троеточие, справа от этого свойства. (Рис.5) Рис.5 В появившемся далее окне выбираем нужные нам атрибуты для каждой из ячеек. Так у самой первой ячейки выбираем шрифт Verdana, размер 16pt. Для всей верхней строки таблицы определяем цвет #00ccff, высота – 22px, вертикальное выравненивание – middle. Для ячеек нижней строки определяем вертикальное выравнивание top, ширина ячеек – 20%, 60%, 20% соответственно. (Рис.6) Рис.6 В результате, у нас получится следующее. (Рис.7): Рис.7 Теперь осталось добавить компоненты WebPartManager and WebPartZone, позволяющие делать интерфейс сайта настраиваемым (наподобие сайта www.msn.com). Сначала нужно добавить компонент WebPartManager, который будет работать со всеми зонами сайта. Он также управляет персонализацией страницы. Чтобы его добавить, нужно в любом месте внутри тега |
Похожие:
 | Курсовая работа на тему : Формирование рынка ценных бумаг в Украине Курсовая работа содержит 38 листов, 2 рисунка, 2 таблицы и было использовано 11 источников | | Курсовая работа по дисциплине Электромагнитная совместимость систем... Курсовая работа состоит из 20 с, в которых содержаться: 3 рисунка, 3 таблицы, 6 формул и 4 ссылки на литературу |
 | Курсовая работа на тему «Открытый урок» Данная курсовая работа выполнена для того, чтобы учителя русского языка и литературы могли использовать разработанные мною уроки... | | Отчет по дисциплине «Учебная практика по информатике» Лабораторная работа № Тема: «Операционная система ms windows». Знакомство с ос windows xp. 4 |
| Курсовая работа Курсовая работа оформляется в виде электронного файла и прикрепляется к своей странице в системе мониторинга нир. Распечатывать работу... | | Курсовая работа На тему: «Учет затрат и калькулирование себестоимости продукции» |
| Курсовая работа по аудиту, на тему: «Аудит учета кассовых операций» | | Курсовая работа по «(указать наименование дисциплины)» на тему «(указать выбранную тему)» Подведите курсор к букве с (содержание). Далее Абзац. Положение на странице. Поставить «птичку» в окошечко с новой страницы |
| Курсовая работа по дисциплине «Предпринимательское право» Курсовая работа имеет целью систематизацию, закрепление и расширение теоретических знаний, углубленное изучение и решение студентом... | | Курсовая работа по курсу тэс на тему “Расчет технических характеристик Канала связи |
| Курсовая работа на тему: Wi-Fi технология беспроводной связи Архитектура, компоненты сети и стандарты | | Курсовой работы. Составитель: доцент Корляков А. С. Екатеринбург... Курсовая работа самостоятельная работа студента, выполняемая в соответствии с типовой программой учебного процесса по подготовке... |
| Курсовая работа Компьютерная графика Савин И. И. 16. 12. 2008 Работа... Московский государственный институт электроники и математики (технический университет) | | Рекомендации к оформлению курсовой и дипломной работы по истории искусства. Курсовая работа Курсовая работа задание, которое выполняется студентами в определённый срок и по определённым требованиям. Защита курсовых работ... |
| Курсовая работа по дисциплине на тему: «Мониторы» Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования | | Курсовая работа на тему: «Совершенствование системы мотивации как... |
