|
45 дней с Windows Phone 7. День #5. Системная тема.
Вчера мы говорили об ориентации экрана и о том, как подстроиться под текущую ориентацию в своём приложении. Сегодня мы поговорим о том, как подстроиться под текущую тему графического оформления, выбранную пользователем. Тёмные и светлые темы. На телефонах с Windows Phone 7 есть возможность выбора светлой(Light) или тёмной темы(Dark). Вот как выглядит тестовое приложение в каждой из тем.
Акцентные цвета. Пользователи кроме выбора темы, могут установить системный акцентный цвет. Операционная система предоставляет на выбор десять светлых цветов. Акцентный цвет широко используется на стартовой странице телефона, но также может применяться и в Ваших приложениях. Вот список предлагаемых цветов:
Подумайте о значениях по умолчанию. При разработке под Windows Phone 7 часто хочется изменить цвет чего-нибудь в приложении. И я не останавливаю Вас. Но, когда Вы меняете цвета, подумайте, как будет выглядеть интерфейс в другой теме и при другом акцентном цвете. Старайтесь чаще использовать цвета из системной темы, а не жестко заданные значения. Для того, чтобы с цветами было легче работать воспользуйтесь инструментом Expression Blend. Вкладка «Device» в Expression Blend. Откройте проект Windows Phone 7 Silverlight приложения в Expression Blend. Если Вы работаете в Visual Studio, в контекстном меню проекта в окне Solution Explorer выберите пункт «Open In Expression Blend…».
Когда откроется Expression Blend, слева вверху найдите вкладку «Device» (устройство). Она будет выглядеть примерно так:
Данная вкладка позволит Вам прямо в окне дизайнера увидеть как будет выглядеть Ваше приложение с различной темой и акцентным цветом. Это становится полезным, когда Вы используете системные и не только цвета в Вашем приложении. Допустим, Вы хотите, чтобы фон Вашего приложения был градиентным и включал акцентный цвет, выбранный пользователем. Помочь нам в этом может ещё одна возможность Expression Blend: вкладка Color resources. Color resources. Многие разработчики не любят работать в Expression Blend, так как Visual Studio им удобнее и привычнее. И, если Вы пишете код, то пишите его в Visual Studio. Но работать с дизайном приложений действительно значительно удобнее в Blend. Window Phone 7 имеет множество стандартных цветов, которые можно использовать в своих приложениях. На картинке ниже, можно увидеть, что предлагаемые Expression Blend стандартные цвета меняются в зависимости от темы, выбранной на вкладке «Device». На первой картинке системной является стандартная тёмная тема и синий акцентный цвет, а на второй светлая тема и оранжевый акцентный цвет. Вкладку Color resources можно найти внутри вкладки «Properties» (справа вверху), выбрав какой-либо элемент управления.
В примере кода ниже страница имеет градиентный фон. Первым цветом в градиенте является PhoneBackgroundColor, а вторым PhoneAccentColor. Кроме того цвет заголовка страницы также является акцентным цветом телефона: <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title--> <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="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="system theming" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"> <TextBlock.Foreground> <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/> </TextBlock.Foreground> </TextBlock> </StackPanel>
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Height="601" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,6,0,0" x:Name="textBlock1" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis turpis sit amet diam elementum molestie. Cras quis massa ante. Morbi sit amet arcu quam, non dignissim nibh. Nunc lectus leo, ornare quis imperdiet id, fringilla vel diam. Proin vitae augue non sem sollicitudin imperdiet ut quis diam. Nulla vitae nulla eros. Curabitur mauris justo, eleifend eu sodales ac, blandit vitae mauris. Pellentesque erat lorem, euismod at sodales eget, sollicitudin sed velit. Praesent est sapien, hendrerit tempor tincidunt quis, posuere ac nunc. Nam odio nisl, feugiat eget blandit sit amet, dapibus id tellus. Sed blandit nisi nunc. Aliquam fermentum justo tristique risus porta sollicitudin. Aenean aliquam congue ornare. Curabitur blandit mi quis odio convallis adipiscing." VerticalAlignment="Top" Width="468" /> </Grid> </Grid> Для установки цветов используется механизм связывания данных (Data Binding). Значение берётся из статического ресурса: Color="{StaticResource PhoneAccentColor}" На картинках показана данная страница при двух разных темах и акцентных цветах. Само приложение при этом не менялось.
Как программно узнать текущую тему. Если Вам требуется в процессе работы приложения узнать, какая сейчас выбрана тема: тёмная или светлая, проверьте значение одного из системных ресурсов: PhoneDarkThemeVisibility или PhoneLightThemeVisibility. Первый ресурс возвращает значение видимости тёмной темы, а второй светлой: var darkVisibility = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"]; if (darkVisibility == Visibility.Visible) { //Тёмная тема }else{ //Светлая тема } Скачайте пример кода и откройте его в Expression Blend. Поиграйтесь с цветовыми ресурсами (Color Resources) и вкладкой Device для просмотра изменений. Это определённо сделает Вашу жизнь проще.
Автор Jeff Blankenburg |
|
.png)
.png)
.png)
.png)
.png)