Главная » Разработка для Windows Phone 7 » Цвета и кисти Windows Phone 7

0

Вернем TextBlock в исходное состояние:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<TextBlock Text="Hello, Windows Phone 7!" /> </Grid>

На экране отображается текст белого цвета (или черного, в зависимости от выбранной темы), потому что свойство Foreground задано в корневом элементе MainPage.xaml. Можно переопределить пользовательские настройки, задав свойство Background для Grid и Foreground для TextBlock:

<Grid x:Name="ContentPanel" Background="Blue" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

У Grid есть свойство Background, но нет свойства Foreground. У TextBlock есть свойство Foreground, но нет свойства Background. Свойство Foreground является наследуемым. Иногда может показаться, что наследуется и свойство Background, но это не так. По умолчанию Background имеет значение null, что делает фон прозрачным. Если фон элемента прозрачен, сквозь него виден фон его родительского элемента, это и создает впечатление того, что данное свойство наследуется.

Значения null и Transparent свойства Background создают одинаковый визуальный эффект, но обусловливают различную реакцию элемента на касание. Grid, свойству Background которого задано значение по умолчанию null, не распознает сенсорный ввод! Если требуется, чтобы у Grid не было собственного фона, но он отвечал на сенсорный ввод, свойству Background должно быть задано значение Transparent. Также можно сделать обратное: задать свойству IsHitTestVisible (Является видимым для касания) элемента с не-null фоном значение false, что обеспечит его безразличность к сенсорному вводу.

Цвета могут задаваться не только стандартными названиями, но также строкой, включающей одноразрядные шестнадцатеричные значения для красного, зеленого и синего в диапазоне от 00 до FF. Например:

Foreground="#FF0 0 0 0"

Это тоже красный. Также можно задать четыре двузначных шестнадцатеричных числа, первое из которых является значением альфа-канала, определяющим прозрачность. Значение 00 – полностью прозрачный, FF – полностью непрозрачный, и все промежуточные значения определяют промежуточные степени прозрачности. Зададим такое значение:

Foreground="#8 0FF0 0 0 0"

Текст будет несколько размытого пурпурного цвета из-за просвечивающегося синего фона.

Если поставить буквы sc перед знаком решетки, для задания компонентов красного, синего и зеленого можно использовать значения от 0 до 1:

Foreground="sc# 1 0 0"

Также перед этими тремя цифрами можно указать значение от 0 до 1 для альфа-канала.

Эти два метода числового задания цветов не эквивалентны, в чем можно убедиться, поместив эти два TextBlock в один Grid:

<Grid x:Name="ContentPanel" Background="Blue" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="RGB COLOR"

HorizontalAlignment="Left" Foreground="#8 0 8 0 8 0" />

<TextBlock Text="scRGB COLOR"

HorizontalAlignment="Right" Foreground="sc# 0.5 0.5 0.5" />

</Grid>

В обоих случаях задан серый цвет, но элемент справа выглядит намного светлее элемента слева.

Цвета, получаемые с помощью шестнадцатеричного формата, вероятно, наиболее привычны. Одноразрядные значения красного, зеленого и синего прямо пропорциональны напряжению, передаваемому на пикселы экрана. Яркость мониторов находится в нелинейной зависимости от напряжения, но человеческий глаз также имеет нелинейную чувствительность к яркости. Эти две «нелинейности» уравновешивают друг друга (почти), поэтому текст слева выглядит несколько темнее.

При использовании цветового пространства scRGB мы задаем значения в диапазоне от 0 до 1, которые пропорциональны яркости, но нелинейность восприятия яркости человеческим глазом создает эффект приглушенного цвета. Чтобы получить средненасыщенный серый с помощью scRGB, необходимо задавать значения, намного меньше 0,5, например:

Foreground="sc# 0.2 0.2 0.2"

Вернемся к одному TextBlock в Grid:

<Grid x:Name="ContentPanel" Background="Blue" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

Точно так же как мы делали это ранее со свойством FontSize, вынесем свойство Foreground как свойство-элемент:

<TextBlock Text="Hello, Windows Phone 7!"> <TextBlock.Foreground> Red

</TextBlock.Foreground> </TextBlock>

Когда мы задаем свойство Foreground в XAML, для элемента в фоновом режиме создается SolidColorBrush. SolidColorBrush можно также создать явно в XAML:

<TextBlock Text="Hello, Windows Phone 7!"> <TextBlock.Foreground>

<SolidColorBrush Color="Red" /> </TextBlock.Foreground> </TextBlock>

Свойство Color тоже можно вынести как свойство-элемент:

<TextBlock Text="Hello, Windows Phone 7!"> <TextBlock.Foreground> <SolidColorBrush>

<SolidColorBrush.Color> Red

</SolidColorBrush.Color> </SolidColorBrush> </TextBlock.Foreground> </TextBlock>

Можно пойти даже еще дальше:

<TextBlock Text="Hello, Windows Phone 7!"> <TextBlock.Foreground> <SolidColorBrush>

<SolidColorBrush.Color> <Color>

<Color.A>

255 </Color.A>

<Color.R>

#FF

</Color.R> </Color> </SolidColorBrush.Color> </SolidColorBrush> </TextBlock.Foreground> </TextBlock>

Обратите внимание, что свойство A структуры Color должно быть задано явно, потому что его значение по умолчанию 0, что означает прозрачный.

Использование свойств-элементов, возможно, не имеет особого смысла для простых цветов и SolidColorBrush. Но эта методика становится просто незаменимой, если требуется задать в XAML значение свойства, которое не может быть выражено простой текстовой строкой. Например, если необходимо использовать градиентную кисть, а не SolidColorBrush.

Начнем с простого одноцветного TextBlock, но при этом вынесем свойство Background контейнера для содержимого как свойство-элемент:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.Background>

<SolidColorBrush Color="Blue" /> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

Удалим SolidColorBrush и заменим его на LinearGradientBrush (Линейная градиентная кисть):

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

У LinearGradientBrush есть свойство типа GradientStops (Точки градиента), поэтому добавим теги свойств-элементов для свойства GradientStops:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush>

<LinearGradientBrush.GradientStops> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

Свойство GradientStops типа GradientStopCollection (Коллекция точек градиента), поэтому вставим теги и для него:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush>

<LinearGradientBrush.GradientStops> <GradientStopCollection> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

Теперь добавим здесь пару объектов GradientStop. У GradientStop есть свойства Offset (Смещение) и Color:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush>

<LinearGradientBrush.GradientStops> <GradientStopCollection>

<GradientStop Offset="0" Color="Blue" /> <GradientStop Offset="1" Color="Green" /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!"

Foreground="Red" />

</Grid>

Вот так с помощью свойств-элементов можно создать градиентную кисть в разметке. На экране телефона это выглядит следующим образом:

Значения Offset находятся в диапазоне от 0 до 1 и отсчитываются относительно элемента, закрашиваемого кистью. Может использоваться более двух смещений:

<Grid x:Name="ContentPanel" Grid.Row=M1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush>

<LinearGradientBrush.GradientStops> <GradientStopCollection>

<GradientStop Offset="0" Color="Blue" /> <GradientStop Offset="0.5" Color="White" /> <GradientStop Offset="1" Color="Green" /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

По сути, кисть «знает» размер области для закрашивания и подстраивает себя соответственно ей.

По умолчанию градиент распространяется из верхнего левого угла в нижний правый угол. Такое поведение обусловлено значениями по умолчанию свойств StartPoint (Начальная точка) и EndPoint (Конечная точка) объекта LinearGradientBrush. Как следует из их имен, значения этих свойств являются координатами, и отсчитываются они относительно верхнего левого угла закрашиваемого элемента. Значение по умолчанию для StartPoint – (0, 0), т.е. верхний левый угол; значение по умолчанию для EndPoint – (1, 1), т.е. нижний правый угол. Если изменить их и задать, например, (0, 0) и (0, 1), градиент будет распространяться сверху вниз:

<Grid x:Name="ContentPanel" Grid.Row=M1" Margin="12,0,12,0"> <Grid.Background>

<LinearGradientBrush StartPoint=M0 0" EndPoint=M0 1"> <LinearGradientBrush.GradientStops> <GradientStopCollection>

<GradientStop Offset="0" Color=мвlue" /> <GradientStop Offset=м0.5м Color="White" /> <GradientStop Offset="1" Color="GreenM /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Grid.Background>

<TextBlock Text="Hello, Windows Phone 7!" Foreground="Red" />

</Grid>

Каждая точка задается просто двумя числами, разделенными пробелом или запятой. Есть также свойства, определяющие, что происходит вне области допустимых значений Offset, если диапазон задан значениями, отличными от 0 и 1.

LinearGradientBrush является производным от GradientBrush. От GradientBrush наследуется еще один класс, RadialGradientBrush (Радиальная градиентная кисть). Рассмотрим разметку для более крупного TextBlock, в качестве значения Foreground которого задан RadialGradientBrush:

<TextBlock Text=,,GRADIENT"

FontFamily="Arial Black" FontSize="72"

HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.Foreground>

<RadialGradientBrush>

<RadialGradientBrush.GradientStops> <GradientStopCollection>

<GradientStop Offset="0" Color="Transparent" /> <GradientStop Offset="1" Color="Red" /> </GradientStopCollection> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </TextBlock.Foreground> </TextBlock>

И вот как это сочетание выглядит на экране:

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии