Pull to refresh

Создание приложения для Windows Phone 7 от начала до конца. Часть 8. Создание согласованного внешнего вида

Reading time 4 min
Views 6.4K
Original author: Microsoft Developer Guidance team
Предыдущая часть

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

В этой части вы узнаете:
  • Как использовать стили, встроенные в Windows Phone.
  • Как создать свой собственный стиль.
  • Что такое шаблоны данных.

Цвета и темы


Согласованный внешний вид и соблюдение рекомендаций дизайна Metro крайне важны для Windows Phone приложений. На следующем изображении показаны примеры различных основных цветов (accent colors), а также светлая и тёмная темы.

image

Использование встроенных стилей


Также, как и каскадные таблицы стилей (CSS) совместно с HTML, XAML позволяет вам применять те же настройки для свойств элементов управления, используя специальный синтаксис, называемый расширением разметки. С помощью стилей и ресурсов вы можете повторно использовать настройки и создать для вашего приложения согласованный внешний вид.

Существует множество встроенных стилей и ресурсов для использования в Windows Phone проектах, которые соответствуют требованиям дизайна Metro и подходят как для светлой, так и для тёмной темы. Эти ресурсы включают кисти, цвета, шрифты, стили текста и темы.

В следующем примере показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью расширения разметки.
  1. <Button Content="Button" Height="72" Background="{StaticResource PhoneAccentBrush}" Width="160" />
* This source code was highlighted with Source Code Highlighter.

На следующем изображении показано, как привязать к фону (background) элемента управления Button кисть, являющуюся встроенным в Windows Phone ресурсом, с помощью окна Properties.

image

Поскольку фон предыдущего примера имеет значение PhoneAccentBrush, цвет кнопки будет основываться на текущем основном цвете (accent color), выбранном пользователем. На следующем изображении показано, как кнопка выглядит, когда пользователь выбирает в качестве основного цвета синий или зеленый.

image

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

В следующем примере показан TextBlock со страницы со сводной информацией приложения Fuel Tracker, где свойство Style имеет значение стиля, являющегося встроенным в Windows Phone ресурсом, с помощью расширения разметки.
  1. <TextBlock Grid.Row="0" Grid.Column="0"
  2.     Style="{StaticResource PhoneTextLargeStyle}"
  3.     Text="CURRENT MPG:"
  4.     HorizontalAlignment="Right" VerticalAlignment="Center"/>
* This source code was highlighted with Source Code Highlighter.

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

Список доступных встроенных стилей и ресурсов для Windows Phone вы можете увидеть здесь: Theme Resources for Windows Phone. Дополнительные сведения о расширениях разметки вы можете получить здесь: XAML Overview.

Создание собственных стилей


Если вы хотите создать свой собственный стиль, как правило, вы должны объявить стиль как ресурс страницы или панели и применить его в качестве статического ресурса с помощью расширения разметки. Каждый стиль, как правило, имеет ключ (key), который используется для ссылки на него в дальнейшем, и целевой тип (target type), который указывает, к какому типу элементов управления он может быть применен. Основная часть стиля — это коллекция объектов Setter, которые содержат параметры Property (свойство) и Value (значение). Вы можете создавать стили в Visual Studio, указывая их прямо в коде XAML или вы можете использовать Expression Blend, который позволяет создавать стили более визуализированным способом. При создании ресурсов, которые устанавливают цвета, вы должны убедиться, что ваш выбор цветов одинаково хорошо выглядит как в светлой, так и в тёмной темах.

Приложение Fuel Tracker использует стили во многих местах. Например, страница со сводной информацией содержит стили LabelStyle и ValueStyle в первом элементе Pivot, который определен в разделе ресурсов Grid. В файле страницы со сводной информацией эти стили применяются к объектам TextBlock. Следующий фрагмент XAML-кода показывает пример того, как определяются стили и как они применяются.
  1. <Grid.Resources>
  2.     <Style x:Key="LabelStyle" TargetType="TextBlock">
  3.         <Setter Property="HorizontalAlignment" Value="Right"/>
  4.         <Setter Property="Margin" Value="15,5" />
  5.     </Style>
  6.     <Style x:Key="ValueStyle" TargetType="TextBlock">
  7.         <Setter Property="Margin" Value="15,5" />
  8.     </Style> 
  9. </Grid.Resources>
  10.  
  11. . . .
  12.  
  13. <TextBlock Grid.Row="2" Grid.Column="0"
  14.     Style="{StaticResource LabelStyle}"
  15.     Text="date:"></TextBlock>
  16.  
  17. <TextBlock Grid.Row="2" Grid.Column="1"
  18.     Style="{StaticResource ValueStyle}"
  19.     Text="{Binding FillupHistory[0].Date,     Converter={StaticResource StringFormatter},     ConverterParameter=\{0:d\} }" ></TextBlock>
* This source code was highlighted with Source Code Highlighter.

Шаблоны данных


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

Следующая часть
Tags:
Hubs:
+20
Comments 5
Comments Comments 5

Articles