День #2. Цвета и цветовые темы

Posted on Ноябрь 15, 2010

4


Снова привет всем! Вчера мы с вами рассмотрели основы проекта приложения для WP7. Сегодня мы поговорим немного о цветах и цветовых темах.

В WP7 есть цвет фона и цвет текста. Фон бывает светлый и темный. Ниже мы посмотрим примеры.

Цвета текста:

Приятно то, что разработчики платформы ОЧЕНЬ позаботились о разработчиках, если вы создаете все по умолчанию, то при изменении темы со светлой на темную, белый текст станет черным. Но есть же и случаи, когда мы хотим сделать все «красиво».

Обычно при разработке приложения, мы не думаем о цветовых темах. Допустим мы делаем приложение, которое отображает некоторый текст:

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

Светлая тема:

Я бы сказал, что не все хорошо видно, но читать можно, а вот если бы текст был немного светлее? Потому давайте все же зададим несколько свойств <TextBlock>, что бы получить стандартные цвета для заголовков, а текст сделаем цветом по умолчанию.

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Блог Антона Полховского" Style="{StaticResource PhoneTextNormalStyle}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Foreground="Yellow" x:Name="PageTitle" Text="День #2." Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

* This source code was highlighted with Source Code Highlighter.


Итак, результат:

Перед этим, я установил светлую тему и «Accent Color» поставил красным. Как видим, приложение само поменяло цвет текста, там где мы его явно не задавали, и заголовок стал красным, благодаря тому, что ты можем извлечь значение цвета Color=»{StaticResource PhoneAccentColor}».  На все это следует обратить большое внимание при разработке приложений, потому что впечатление, которое получит пользователь очень влияет на дальнейшее пользование Программным Продуктом и никто не станет пользоваться приложением, если не видно текста 🙂

Где же посмотреть все эти названия системных цветов? Для начала, откроем все в бленде:

И в бленде смотрим слева на вкладку Brushes

Это цвета темы по умолчанию, при изменении темы или цветов(Например Розовый) изменятся и цвета:

И, финальная версия в двух цветах:

Завтра мы рассмотрим ориентацию экрана.

День #3. Ориентация экрана.

Реклама