День пятый. Темы и расцветка
Вступление
По умолчанию все телефоны под управлением Windows Phone 7 используют черные цвета. Это не прихоть разработчиков, а необходимая мера для продления работы телефона. Дело в том, что AMOLED-экраны, используемые в телефонах Windows Phone 7, имеют такую особенность, что при черном цвете потребление заряда батареи гораздо ниже, чем при светлом экране. Но, пользователь может изменить по своему желанию используемую тему на другую, более подходящему собственному вкусу.
Согласованный внешний вид и соблюдение рекомендаций дизайна Metro крайне важны для Windows Phone приложений. На следующем изображении показаны примеры различных основных цветов (accent colors), а также светлая и тёмная темы.
Цветовые темы
Сначала несколько слов о том, как поменять цветовую тему. На стартовом экране коснитесь правой стрелки в верхнем правом углу и перейдите к странице Settings (Настройки). Здесь вы можете выбрать визуальную тему: темную (светлый текст на темном фоне, используется по умолчанию) и светлую (темный текст на светлом фоне). Если выбрать новую тему и запустить примеры из прошлых уроков, то увидим, что цвета темы изменяются автоматически. Обратите внимание, что при смене темы меняется только цвет. Другие ресурсы (шрифты, размеры элементов) не меняются.
По своей сути тема — это набор ресурсов, используемых для персонализации визуальных элементов Windows Phone. Вы можете создавать свои приложения, которые будут выглядеть как родные системные приложения. Стилевые свойства включают в себя фоновые цвета и расцветку.
Таким образом, тема Windows Phone является комбинацией фона и расцветки. Цвет фона — это общий цвет для всей поверхности страницы, а цвет расцветки — это цвет, используемый в элементах управления и других визуальных элементах. Для фона есть два варианта: Dark и Light, для расцветки используются 10 вариантов.
Расцветка
Кроме выбора темы (темной или светлой) система позволяет также выбрать расцветку из десяти различных цветов, которые будут использоваться в используемых темах. Выбранная расцветка позволит раскрасить нужным цветом значки, плитки, ссылки и т.д. Список возможных цветов: Magenta, Purple, Teal, Lime, Brown, Pink, Orange, Blue, Red, Green
Производитель телефона может добавить еще свой одинадцатый цвет, но вам стоит избегать использования такого цвета в коде, так как нет возможности убедиться, что данный цвет используется на целевом устройстве, что вызовет ошибку.
Используем системные цвета
Вы, конечно, можете использовать свои цвета в приложении, чтобы подчеркнуть свою индивидуальность. Но, когда вы меняете цвета, подумайте, как будет выглядеть интерфейс в другой теме и при другой расцветке. Для серьезных программ предпочтительнее использовать системные цвета, не прописывая жестко цветовые значения. Обратите внимание, что встроенные элементы управления по умолчанию подстраиваются под тему и расцветку. Вот как меняет свой цвет элемент Slider (Слайдер) при двух разных выбранных расцветках.
Вот как выглядит приложение в разных вариантах расцветки (выбраны светлая и темная тема, а также цвета Brown, Teal и Purple).
Использование встроенных стилей
Также, как и каскадные таблицы стилей (CSS) совместно с HTML, XAML позволяет вам применять те же настройки для свойств элементов управления, используя специальный синтаксис, называемый расширением разметки. С помощью стилей и ресурсов вы можете повторно использовать настройки и создать для вашего приложения согласованный внешний вид.
Существует множество встроенных стилей и ресурсов для использования в Windows Phone проектах, которые соответствуют требованиям дизайна Metro и подходят как для светлой, так и для тёмной темы. Эти ресурсы включают кисти, цвета, шрифты, стили текста и темы.
Необходимые ресурсы подключаются к приложению при запуске. Вы можете установить ресурсы в дизайнере при помощи свойств, а также в XAML при помощи элемента разметки .
В следующем примере показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью расширения разметки.
В данном коде мы присвоили цвет кнопки через разметку StaticResource, задав кисть с именем PhoneAccentBrush. Если пользователь выберет в настройках телефона другую расцветку, то цвет кнопки в вашем приложении также изменится на выбранный цвет. Таки образом ваше приложение будет соответствовать цветовым предпочтениям пользователя.
На следующем изображении показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью окна Properties.
Поскольку фон предыдущего примера имеет значение PhoneAccentBrush, цвет кнопки будет основываться на текущем основном цвете (accent color), выбранном пользователем. На следующем изображении показано, как кнопка выглядит, когда пользователь выбирает в качестве основного цвета синий или зеленый.
Рекомендация по проектированию интерфейса: Если основной или фоновый цвет элемента управления задан явно, убедитесь, что его содержание одинаково хорошо видно как при темной, так и при светлой теме оформления. Если указанного цвета не видно, также явно задайте фон или основной цвет, чтобы он был достаточно контрастным или выберите более подходящий цвет.
Также можно использовать ресурсы, связанные со шрифтами: имя шрифта, его размер и т.п.
Если вам нужно динамически изменять стили, то можно это сделать через код следующим образом:
Кстати, дизайн приложений, использующих другие цвета, удобнее делать в программе Expression Blend 4, который специально предназначен как раз для дизайнеров. Откройте ваш проект в Expression Blend. Для этого щелкните правой кнопкой мыши на имени проекта в Solution Explorer и выберите команду Open In Expression Blend….
В открывшейся программе найдите вкладку Device (в верхней части окна) и перейдите на нее.
Вкладка позволяет увидеть, как будет выглядеть приложение с различными темами и расцветкой.
Color Resources
Перейдем теперь на вкладку Color Resources, которую можно найти внутри вкладки Properties, выбрав какой-либо элемент управления. Window Phone 7 имеет множество стандартных цветов, которые вы можете использовать в своих приложениях. Например, на картинке можно увидеть, что предлагаемые Expression Blend стандартные цвета PhoneAccentColor и PhoneBackgroundColor меняются в зависимости от темы, выбранной на вкладке «Device». На первой картинке выбрана тёмная тема и синяя расцветка, а на второй светлая тема и оранжевая расцветка.
Выбирая эти цвета для нашего приложения, вы подключаете предопределенные системные значения цветов. И когда пользователь будет менять тему или расцветку, то наше приложение также подстроится под новые настройки. Пример такого подхода продемонстрирован ниже. Добавим в приложение из прошлого занятия прямоугольник с градиентной заливкой, начиная со цвета PhoneBackgroundColor и заканчивая цветом PhoneAccentColor. Кроме того цвет заголовка страницы также использует выбранную расцветку.
Теперь, когда пользователь будет менять тему или расцветку на своем устройстве, наше приложение также будет использовать выбранные цвета. Обратите внимание, что заголовок приложения (слово Котики) выводится цветом Lime, который я установил в настройках телефона.
При разработке собственных элементов также придерживайтесь подобного стиля — используйте стандартные значения цветов PhoneBackgroundColor, PhoneAccentColor и т.п.
Создание собственных стилей
Если вы хотите создать свой собственный стиль, как правило, вы должны объявить стиль как ресурс страницы или панели и применить его в качестве статического ресурса с помощью расширения разметки. Каждый стиль, как правило, имеет ключ (key), который используется для ссылки на него в дальнейшем, и целевой тип (target type), который указывает, к какому типу элементов управления он может быть применен. Основная часть стиля — это коллекция объектов Setter, которые содержат параметры Property (свойство) и Value (значение). Вы можете создавать стили в Visual Studio, указывая их прямо в коде XAML или вы можете использовать Expression Blend, который позволяет создавать стили более визуализированным способом. При создании ресурсов, которые устанавливают цвета, вы должны убедиться, что ваш выбор цветов одинаково хорошо выглядит как в светлой, так и в тёмной темах.
Как использовать цвета, которых нет в настройках Windows 10 Mobile?
Практически каждому пользователю смартфона с операционной системой Windows Phone не особо нравится то, что в стандартных настройках интерфейса маловато цветов оформления. Не многие знают, что, благодаря синхронизации вашего планшета или компьютера на Windows 8/8.1/10 с вашим смартфоном, можно значительно упростить взаимодействие со своим смартфоном. Если у Вас имеется планшет или компьютер на Windows 8/8.1/10 и вы хотите использовать большее разнообразие цветов оформления, то Вам нужно выполнить простую инструкцию.
Шаг 1. Убедитесь, что на вашем смартфоне и компьютере выполнен вход под одной учётной записью. Это необходимо, чтобы ваши параметры синхронизировались и не возникало лишних проблем с пользователями. Вы можете сможете с лёгкостью создать учётную запись Windows LiveID с помощью нашей инструкции.
Шаг 2. Перейдите в настройки OneDrive на своём компьютере. Сделать это можно, вызвав строку поиска и введя слово «Синхронизация». Затем перейдите в синхронизацию параметров. В подразделе «Параметры персонализации» активируйте все пункты.
Шаг 3. Теперь необходимо убедиться, что параметры синхронизации также активированы и в настройках Вашего смартфона. Для этого перейдите в подпункт «Синхронизация ваших параметров» и если отключены «Индивидуальные параметры синхронизации», то необходимо включить их.
Шаг 4. Теперь будут происходить основные манипуляции. Если всё работает должным образом и у Вас стабильное сетевое соединение, то в параметрах персонализации «Цвет фона» выберите абсолютно любой цвет и оттенок. Что бы вы бы не поставили, тоже самое установится и на вашем смартфоне.
Шаг 5. В настройках персонализации вашего телефона должен появиться дополнительный цветной кубик, который и является цветом, который вы выбрали на своём компьютере. Для Вас доступно, грубо говоря, 324 цвета — 18 цветов и столько же их оттенков.
Элементы управления
Свойства элементов управления
Visual Studio предлагает нам неплохой выбор различных элементов управления для разработки на Windows Phone 8.1. Рассмотрим наиболее распространенные элементы управления и их свойства.
x:Name
По установленному свойству x:Name впоследствии можно будет обращаться к элементу, как в коде c#, так и в xaml разметке. Например, в xaml-коде у нас определена следующая кнопка:
Здесь у нас задан атрибут Click с названием метода обработчика button1_Click , который будет определен в файле кода C# и будет вызываться по нажатию кнопки. Тогда в связанном файле кода C# мы можем обратиться к этой кнопке:
Поскольку свойство Name имеет значение button1 , то через это значение мы можем обратиться к кнопке в коде.
Ширина и высота
У элемента можно установить ширину с помощью свойства Width и высоту с помощью свойства Height. Эти свойства принимают значение типа double . Хотя общая рекомендация состоит в том, что желательно избегать жестко закодированных в коде ширины и высоты.
Также мы можем задать возможный диапазон ширины и высоты с помощью свойств MinWidth/MaxWidth и MinHeight/MaxHeight. И при растяжении или сжатии контейнеров элементы с данными заданными свойствами не будут выходить за пределы установленных значений.
Выравнивание
HorizontalAlignment
Свойство HorizontalAlignment выравнивает элемент по горизонтали относительно правой или левой стороны контейнера и соответственно может принимать значения Left, Right, Center (положение по центру), Stretch (растяжение по всей ширине). Например:
VerticalAlignment
Также мы можем задать для элемента выравнивание по вертикали с помощью свойства VerticalAlignment, которое принимает следующие значения: Top (положение в верху контейнера), Bottom (положение внизу), Center (положение по центру), Stretch (растяжение по всей высоте). Например:
Отступы padding и margin
Это свойство устанавливает отступы вокруг элемента. Синтаксис: Margin=»левый_отступ верхний_отступ правый_отступ нижний_отступ». Например, установим отступы у одной кнопки слева и сверху, а у другой кнопки справа и снизу:
Visibility
Это свойство устанавливает параметры видимости элемента и может принимать одно из двух значений:
Visible — элемент виден и участвует в компоновке.
Collapsed — элемент не виден и не участвует в компоновке.
Свойства настройки шрифтов
FontFamily определяет семейство шрифта (например, Arial, Verdana и т.д.)
FontSize определяет высоту шрифта
FontStyle определяет наклон шрифта, принимает одно из трех значений — Normal , Italic , Oblique .
FontWeight определяет толщину шрифта и принимает ряд значений, как Black , Bold и др.
FontStretch определяет, как будет растягивать или сжимать текст, например, значение Condensed сжимает текст, а Expanded — растягивает.
Выравнивание содержимого
Выравнивание содержимого по горизонтали задается свойством HorizontalContentAlignment . Оно может принимать четыре значения:
Right : текст выравнивается по правому краю элемента
Left : выравнивание по левому краю
Center : выравнивание по центру
Stretch : текст растягивается по ширине элемента
Для выравнивания содержимого по вертикали применяется свойство VerticalContentAlignment . Оно может принимать четыре значения:
Top : текст выравнивается по верхнему краю элемента
Bottom : выравнивание по нижнему краю
Center : выравнивание по центру
Stretch : текст растягивается по высоте элемента
FlowDirection
Данное свойство задает направление текста. Если оно равно RightToLeft, то текст начинается с правого края, если — LeftToRight, то с левого.
Цвета фона и шрифта
Свойства Background и Foreground задают соответственно цвет фона и текста элемента управления.
Простейший способ задания цвета в коде xaml: Background=»#ffffff» . В качестве значения свойство Background (Foreground) может принимать запись в виде шестнадцатеричного значения в формате #rrggbb , где rr — красная составляющая, gg — зеленая составляющая, а bb — синяя. Также можно задать цвет в формате #aarrggbb .
Либо можно использовать названия цветов напрямую:
Однако при компиляции будет создаваться объект SolidColorBrush , который и будет задавать цвет элемента. То есть определение кнопки выше фактически будет равноценно следующему:
SolidColorBrush представляет собой кисть, покрывающую элемент одним цветом. Позже мы подробнее поговорим о цветах. А пока надо знать, что эти записи эквивалентны, кроме того, вторая форма определения цвета позволяет задать другие кисти — например, градиент.
Это надо также учитывать при установке или получении цвета элемента в коде c#: