Кисти применяются для заливки фона элементов пользовательского интерфейса. Так, например, для создания градиента необходимо использовать кисть GradientBrush, которая имеет 2 разновидности. Но обо всем по порядку.
На данный момент существует 5 разновидностей кисти:
- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush
- ImageBrush
- VideoBrush
Для экспериментов создадим новый silverlight проект. О создании проекта читайте «Создание silverlight приложения в Visual Studio»
SolidColorBrush
Самый простой вид кисти, используется по умолчанию при установке свойства Fill или Stroke объекта. Для применения необходимо внутри конструкции <Элемент.Fill> вставить <SolidColorBrush/> тег. Для задания цвета используется атрибут Color. О возможных значениях следует поговорить подробней.
Цвет можно задать тремя разными способами:
- Имя цвета. Например, “Black”, “Red”, “Blue” и т.д.
- 6-символьная нотация. Используется шестнадцатеричное представление цвета. Например, #FF0000 - красный, #D378AE, #235467 и т.д.
- 8-символьная нотация. То же самое, что и 6-символьная, только добавлены 2 символа, стоящие перед значениями цвета, задающие уровень прозрачности элемента. Например, #7FFF0000 - полупрозрачный, красный.
Ниже приведён пример применения кисти.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <SolidColorBrush Color="Blue"/>
15: </Rectangle.Fill>
16: </Rectangle>
17: </Canvas>
LinearGradientBrush
Как следует из названия это линейный градиент. Суть заключается в указании двух точек (начала и конца градиента) прямой, по которой расположиться градиент, и двух цветов, между которыми будет отображаться плавный переход – это и есть градиент. Взгляните на следующий пример:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
15: <GradientStop Color="#FF000000" Offset="0"/>
16: <GradientStop Color="#FFFFFFFF" Offset="1"/>
17: </LinearGradientBrush>
18: </Rectangle.Fill>
19: </Rectangle>
20: </Canvas>
Здесь мы задали начальные точки градиента с помощью StartPoint и EndPoint и присвоили им значения «0,0.5» и «1,0.5» соответственно. Что это значит? Первая координата – X, вторая – Y, так вот если принять ширину и высоту фигуры за 1 (X и Y), а именно так задаются координаты линейного градиента в silverlight, то становиться понятно, что в нашем случае прямая градиента расстилается от середины левой грани фигуры (X=0 – левая грань, Y=0.5 – её середина) до середины правой.
Далее мы объявили <GradientStop/> - это точка останова, то есть здесь мы задаем некоторый цвет, который будет плавно переходить в соседние на прямой, если таковые имеются. Имеет атрибуты Color и Offset. С первым все понятно, а вот второй – это координата точки на градиентной прямой, длина которой равна 1.
С простым градиентом все понятно, но что делать, если нам нужно больше цветов? Для этого и существуют точки остановки на прямой, в которых можно задать дополнительный цвет. Просто добавим ещё один или несколько <GradientStop/>:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
15: <GradientStop Color="#FF000000" Offset="0"/>
16: <GradientStop Color="#FFFFFFFF" Offset="1"/>
17: <GradientStop Color="#FF1E26DC" Offset="0.745"/>
18: <GradientStop Color="#FFEC1F1F" Offset="0.409"/>
19: <GradientStop Color="#FF7CFF00" Offset="0.096"/>
20: </LinearGradientBrush>
21: </Rectangle.Fill>
22: </Rectangle>
23: </Canvas>
Теперь мы имеем 5 ключевых цветов, и между каждыми соседними наблюдается плавный переход. Естественно, можно сделать и резкий, если расположить две точки в непосредственной близости друг от друга.
RadialGradientBrush
Начнём сразу с примера:
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <RadialGradientBrush Center="0,0.5">
15: <GradientStop Color="#FF000000" Offset="0"/>
16: <GradientStop Color="#FFFFFFFF" Offset="1"/>
17: <GradientStop Color="#FFF02121" Offset="0.216"/>
18: </RadialGradientBrush>
19: </Rectangle.Fill>
20: </Rectangle>
21: </Canvas>
Здесь с помощью <RadialGradientBrush/> мы объявили круговой градиент. Суть заключается в том, что вокруг некоторой точки образуется рассеивающийся во все стороны круговой градиент. Для большего понимания посмотрите на результат:
С помощью Center можно задать координаты центра градиента.
ImageBrush
С помощью данной кисти можно задать изображение как заливку элемента. Объявляется с атрибутом ImageSource, который указывает на адрес картинки. Сама картинка может располагаться на этом же сервере или загружаться с другого, во втором случае нужно указать URL-адрес картинки.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <ImageBrush ImageSource="image.jpg"/>
15: </Rectangle.Fill>
16: </Rectangle>
17: </Canvas>
VideoBrush
То же самое, что и ImageBrush, только в качестве материала заливки служит видео и атрибут для указания файла называется SourceName. Формат видео файла – WMV, стандартный для windows. Если ваше видео другого формата, то его нужно конвертировать, например, с помощью Windows Movie Maker, который устанавливается по умолчанию в Windows Vista/XP.
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page"
7: >
8: <Rectangle Width="439"
9: Height="198"
10: Stroke="#FF000000"
11: Canvas.Left="46"
12: Canvas.Top="102">
13: <Rectangle.Fill>
14: <VideoBrush SourceName="video.wmv"/>
15: </Rectangle.Fill>
16: </Rectangle>
17: </Canvas>
По неясным мне причинам видео проигрываться отказалось, но я думаю, что через некоторое время причина найдется.