День пятый. Темы и расцветка
Вступление
По умолчанию все телефоны под управлением 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 при помощи элемента разметки {StaticResource}.
В следующем примере показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью расширения разметки.
<Button Content="Button" Height="72" Background="{StaticResource PhoneAccentBrush}" Width="160" />
В данном коде мы присвоили цвет кнопки через разметку StaticResource, задав кисть с именем PhoneAccentBrush. Если пользователь выберет в настройках телефона другую расцветку, то цвет кнопки в вашем приложении также изменится на выбранный цвет. Таки образом ваше приложение будет соответствовать цветовым предпочтениям пользователя.
На следующем изображении показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью окна Properties.
Поскольку фон предыдущего примера имеет значение PhoneAccentBrush, цвет кнопки будет основываться на текущем основном цвете (accent color), выбранном пользователем. На следующем изображении показано, как кнопка выглядит, когда пользователь выбирает в качестве основного цвета синий или зеленый.
Рекомендация по проектированию интерфейса: Если основной или фоновый цвет элемента управления задан явно, убедитесь, что его содержание одинаково хорошо видно как при темной, так и при светлой теме оформления. Если указанного цвета не видно, также явно задайте фон или основной цвет, чтобы он был достаточно контрастным или выберите более подходящий цвет.
Также можно использовать ресурсы, связанные со шрифтами: имя шрифта, его размер и т.п.
<TextBlock Height="45"
HorizontalAlignment="Left"
Margin="20,154,0,0"
Name="textBlock1"
Text="TextBlock"
VerticalAlignment="Top"
Width="213"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeLarge}"/>
Если вам нужно динамически изменять стили, то можно это сделать через код следующим образом:
Color backgroundColor = (Color)Application.Current.Resources["PhoneBackgroundColor"];
Кстати, дизайн приложений, использующих другие цвета, удобнее делать в программе 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. Кроме того цвет заголовка страницы также использует выбранную расцветку.
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Stroke="Black" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/>
<GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="КОШКИН ДОМ" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="котики" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
Теперь, когда пользователь будет менять тему или расцветку на своем устройстве, наше приложение также будет использовать выбранные цвета. Обратите внимание, что заголовок приложения (слово Котики) выводится цветом Lime, который я установил в настройках телефона.
При разработке собственных элементов также придерживайтесь подобного стиля - используйте стандартные значения цветов PhoneBackgroundColor, PhoneAccentColor и т.п.
Создание собственных стилей
Если вы хотите создать свой собственный стиль, как правило, вы должны объявить стиль как ресурс страницы или панели и применить его в качестве статического ресурса с помощью расширения разметки. Каждый стиль, как правило, имеет ключ (key), который используется для ссылки на него в дальнейшем, и целевой тип (target type), который указывает, к какому типу элементов управления он может быть применен. Основная часть стиля — это коллекция объектов Setter, которые содержат параметры Property (свойство) и Value (значение). Вы можете создавать стили в Visual Studio, указывая их прямо в коде XAML или вы можете использовать Expression Blend, который позволяет создавать стили более визуализированным способом. При создании ресурсов, которые устанавливают цвета, вы должны убедиться, что ваш выбор цветов одинаково хорошо выглядит как в светлой, так и в тёмной темах.
Реклама
