VII Международная студенческая научная конференция Студенческий научный форум - 2015

Введение

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

Однако, Windows Presentation Foundation (WPF) Visual Studio позволяют объединить их работу. Дизайнер и разработчик имеют возможность использовать одну платформу и единый язык описания для создания богатого, динамичного пользовательского интерфейса. Visual Studio позволяет интерактивную и динамичную разработку с помощью конструктора, который предоставляет возможности визуального проектирования для создания элементов управления и приложений WPF. Конструктор поддерживает целый ряд функций, позволяющих создавать код XAML для приложения WPF.

XAML - язык разметки для программирования приложений, основанный на XML. XAML описывает пользовательский интерфейс. Но он не влияет на логику приложения, которая управляется процедурным кодом. XAML может использоваться как для браузер-базированных приложений, так и для десктопных приложений.

Пример разработки дизайна с помощью языка XAML

Рис 1. Дизайн приложения

Примером разработки дизайна визуального интерфейса с помощью языка XAML послужит разработанное приложение для Центра Трансфера Технологий ТПУ. Это приложение носит информативный характер и используется для структурирования и распространения информации.

Главной концепцией для дизайна приложения стал каталог ТПУ ЦТТ, созданный в минималистичном стиле.

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

Title="ДостиженияТПУ"

WindowStartupLocation="CenterScreen"

Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}" Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}"

Фон главного окна задается с помощью изображения:

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

Для этого были определены количество элементов, их размер и расположение на форме. После чего были заданы количество строк и столбцов и их размеры.

Далее все элементы управления размещаются в описанных ячейках. Ниже приведен способ слияния ячеек и расположения элемента, на примере кнопки «Разработки ТПУ»:

Рис 2. Пример использования

С помощью встроенных средств Visual Studio можно рисовать необходимые фигуры без графических редакторов. В качестве примера рассмотрим дизайн полос в верхней и нижней части окна. Для них был использован градиент в двух местах, указанных с помощью координат:

Для примера задания свойств элементов с помощью XAML опишем кнопку пуск/пауза используемую для воспроизведения и остановки видео. Так как она расположена непосредственно на другом элементе, который отображает видео, то сделана прозрачной. С помощью XAML были описаны все свойства элемента. Его размер, расположение на форме, а также ширина и цвет границ.

С помощью тега можно изменить встроенные свойства элементов, например подсвечивание кнопки при наведении мыши.

На элементе Button можно расположить изображение или текст, которые будут находится внутри кнопки.

Заключение

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

Литература

1. Официальный сайт Microsoft Developer Network [Электронный ресурс]. Режим доступа: http://msdn.microsoft.com/ru-ru/library/ms752059(v=vs.110).aspx , свободный.

2. Ликнесс Джереми Приложения для Windows 8 на C# и XAML = Building Windows 8 Apps with C# and XAML. — 1-е изд. — СПб.: Питер, 2013. — 368 с. — ISBN 978-5-496-00349-0.

3. WPF tutorial [Электронный ресурс]. Режим доступа: http://www.wpf-tutorial.com/xaml/basic-xaml/

Код для цитирования: Скопировать