Курсовая работа на тему: «Windows Presentation Foundation»


Скачать 369.89 Kb.
НазваниеКурсовая работа на тему: «Windows Presentation Foundation»
страница3/5
Куничник Д С
Дата05.11.2012
Размер369.89 Kb.
ТипКурсовая
1   2   3   4   5

1.4 Разработка с использованием WPF


Разумеется, XAML можно писать вручную, но это достаточно сложно, поэтому в большинстве случаев дизайнеры пользуются Expression Blend и только в случае необходимости нестандартных решений, добавляют код вручную. Если открыть Visual Studio и создать новое WPF приложение, то будет автоматически сгенерирован код, включающий всего два элемента: окно Window и поле Grid («решетка»), на который можно поместить элементы управления. При этом может существовать только один элемент верхнего уровня. И каждый элемент является контейнером. Таким образом, образуется иерархия. (Рис.1)


Рис. 1

Внутри дескрипторов помещаются атрибуты и свойства, такие как имя класса, стартовые высота и ширина. Стоит отметить, что 300 единиц обозначают специальную единицу измерения, которая представляет собой 1\96 дюйма экрана. Таким образом решается проблема с различными разрешениями и форматами и приложение будет адекватно работать практически при любых условиях.

В связи с особенностями оформления XAML кода, некоторые символы (при написании кода вручную) нужно заменять на специальные коды, аналогичные кодам в HTML. Например, если мы попытаемся задать кнопке текст «», то компилятор будет думать, что мы создаем объект «Click» с свойством me. То есть, вместо «<» нужно использовать «<» и т.д.


2. Разработка WPF-приложения «Словарь»

    1. Технические задачи


  1. Разработать дизайн приложения.

  2. Реализовать озвучку слов.

  3. Создать подключение к базе данных на основе ADO.NET.

  4. Осуществить:

  • создание словарной базы данных

  • наполнение базы данных;

  • поиск по базе данных;

  • интерактивный дизайн;

  • анимацию части действий;

  • реализовать прозрачность окна и элементов словаря;

  • использование drag and drop;

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

  1. Провести тестирование и исправление обнаруженных ошибок.



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, который будет работать со всеми зонами сайта. Он также управляет персонализацией страницы. Чтобы его добавить, нужно в любом месте внутри тега
написать .

Теперь нужно добавить Web-part зоны в соответствующие ячейки. Можно воспользоваться панелью Toolbox (Рис.8), либо вставлять их вручную.


Рис.8

Так в левую нижнюю ячейку таблицы мы вставляем компонент CatalogZone, который будет отображать все доступные в данный момент зоны. В среднюю и правую зоны вставляем простые объекты WebPartZone. (Рис.9)


Рис.9

Зоны являются простыми контейнерами, а значит с ними можно работать также, как и с ячейками таблицы. Следующим элементом дизайна будет являться календарь. (Рис.10)


Рис.10

Простым перетаскиванием добавляем его в правую зону (HelpZone).
1   2   3   4   5

Похожие:

Разместите кнопку на своём сайте:
cat.convdocs.org


База данных защищена авторским правом ©cat.convdocs.org 2012
обратиться к администрации
cat.convdocs.org
Главная страница