Заливка цветом может применяться к фигурам, тексту и элементам Path. При указании цвета допустимы именованные названия, а также код в шестнадцатеричной форме. В табл.5.1 приводится описание основных атрибутов заливки.
| № | Название |
|---|---|
| 5.1.1 | |
Fill |
|
| Описание | |
| Заливка цветом внутренней части фигуры или текста | |
| Диапазон значений | |
| Именованные названия, шестнадцатеричный индекс цвета | |
| Значение по умолчанию | |
| Белый и прозрачный (#FFFFFFFF) | |
| № | Название |
| 5.1.2 | |
Opacity |
|
| Описание | |
| Прозрачность заливки фигуры может задаваться в численных значениях. Кроме этого, в XAML поддерживается шестнадцатеричная запись вида ARGB, где A – величина, определяющее канал прозрачности. Значение 00 соответствует полной прозрачности, FF – непрозрачности | |
| Диапазон значений | |
| Число между 0 (полная прозрачность) и 1 (полная непрозрачность ) | |
| Значение по умолчанию | |
| 0 | |
| № | Название |
| 5.1.3 | |
FillRule |
|
| Описание | |
| Режим заливки фигуры, при которой остаются пустые (незакрашенные) области | |
| Диапазон значений | |
| Значение по умолчанию | |
| EvenOdd |
Ранее мы пользовались при заливке только атрибутом Fill . Следовательно, мы имели дело с полностью непрозрачными объектами, заполняемыми цветом полностью. В табл. 5.2 приводятся примеры использования атрибутов заливки.
| № | Код | Вид в браузере |
|---|---|---|
| 5.2.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="210" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="0" Canvas.Top="25" Width="210" Height="50" Fill="black" /> <Rectangle Canvas.Left="10" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.1" /> <Rectangle Canvas.Left="30" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.2" /> <Rectangle Canvas.Left="50" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.3" /> <Rectangle Canvas.Left="70" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.4" /> <Rectangle Canvas.Left="90" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.5" /> <Rectangle Canvas.Left="110" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.6" /> <Rectangle Canvas.Left="130" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.7" /> <Rectangle Canvas.Left="150" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.8" /> <Rectangle Canvas.Left="170" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.9" /> <Rectangle Canvas.Left="190" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="1" /> </Canvas> |
|
|
| Описание | ||
| Полоски с различными значениями прозрачности | ||
| № | Код | Вид в браузере |
| 5.2.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="210" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="0" Canvas.Top="25" Width="210" Height="50" Fill="black" /> <Canvas Width="210" Height="100" Canvas.Left="0" Canvas.Top="0" Opacity="0.6"> <Rectangle Canvas.Left="10" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="30" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="50" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="70" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="90" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="110" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="130" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="150" Canvas.Top="0" Width="10" Height="100" Fill="red"/> <Rectangle Canvas.Left="170" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="190" Canvas.Top="0" Width="10" Height="100" Fill="red" /> </Canvas> </Canvas> |
|
|
| Описание | ||
| Задание единой прозрачности для группы элементов при помощи элемента Canvas | ||
| № | Код | Вид в браузере |
| 5.2.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="0"
Canvas.Top="25"
Width="210" Height="50"
Fill="black" />
<Path Fill="red"
Opacity="0.6" >
<Path.Data>
<GeometryGroup FillRule="NonZero" >
<RectangleGeometry Rect="
10,0 10 100" />
<RectangleGeometry Rect="
30,0 10 100" />
<RectangleGeometry Rect="
50,0 10 100" />
<RectangleGeometry Rect="
70,0 10 100" />
<RectangleGeometry Rect="
90,0 10 100" />
<RectangleGeometry Rect="
110,0 10 100" />
<RectangleGeometry Rect="
130,0 10 100" />
<RectangleGeometry Rect="
150,0 10 100" />
<RectangleGeometry Rect="
170,0 10 100" />
<RectangleGeometry Rect="
190,0 10 100" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Задание единой прозрачности для группы элементов, объединенных в элементе Path | ||
| № | Код | Вид в браузере |
| 5.2.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210"
Height="100"
Background="White"
x:Name="Page">
<Polygon Points="50,6
18,86 98,38 2,38 82,86"
FillRule="NonZero"
Fill="red" Stroke="black"
StrokeThickness="1"/>
<Polygon Points="151,6
119,86 199,38 103,38 183,86"
FillRule="EvenOdd"
Fill="red"
Stroke="black"
StrokeThickness="1"/>
</Canvas>
|
|
|
| Описание | ||
| Режимы заливки – полная и с пустыми областями | ||
| № | Код | Вид в браузере |
| 5.2.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" Height="100"
Background="White"
x:Name="Page">
<Polygon Points="50,6 18,86
98,38 2,38 82,86"
Fill="red" Stroke="black"
StrokeThickness="1"/>
<Polygon Points="151,6 119,
86 199,38 103,38 183,86"
FillRule="EvenOdd"
Fill="red"
Stroke="black"
StrokeThickness="1"/>
</Canvas>
|
|
|
| Описание | ||
Значение EvenOdd совпадает с принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.2.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xam"
Width="350" Height="100"
Background="Black"
x:Name="Page">
<TextBlock
Canvas.Top="10"
Canvas.Left="15"
FontFamily="Arial"
FontSize="40"
FontWeight="Bold"
>
<Run Text="Red "
Foreground="Red" />
<Run Text="Green "
Foreground="Green" />
<Run Text="Blue "
Foreground="Blue" />
</TextBlock>
<TextBlock
Canvas.Top="50"
Canvas.Left="15"
FontFamily="Arial"
FontSize="40"
FontWeight="Bold"
Opacity="0.5">
<Run Text="Red "
Foreground="Red" />
<Run Text="Green "
Foreground="Green" />
<Run Text="Blue "
Foreground="Blue" />
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Полностью непрозрачный и частично прозрачный текст на черном фоне | ||
Линейная градиентная заливка предназначена для получения плавного цветового перехода в направлении, заданной прямой. Элемент LinearGradientBrush формирует содержимое заливки заданной фигуры:
<Rectangle Width="150" Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red" Offset="0" />
<GradientStop Color="yellow" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Внутри элемента LinearGradientBrush задаются цвета градиента с помощью тегов GradientStop и граница области каждого из цветов в атрибутах Оffset (рис. 5.1):
(рис 5.1) Определение LinearGradientBrush
Атрибут Offset определяет области покрытия исходных цветов и формируемого ими промежуточного. Так, на рисунке первый цвет занимает 0.3 от всей области, второй цвет также 0.3 (1- 0.7=0.3), а область градиента занимает всю остальную часть, т.е. 0.4. В табл. 5.3 приводится примеры с различными значениями атрибута Offset.
| № | Код | Вид в браузере |
|---|---|---|
| 5.3.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1 |
||
| № | Код | Вид в браузере |
| 5.3.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.2" />
<GradientStop Color="yellow"
Offset="0.8" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.2 и 0.8. Хорошо заметны области чистых цветов |
||
| № | Код | Вид в браузере |
| 5.3.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.3" />
<GradientStop Color="yellow"
Offset="0.7" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.3 и 0.7 |
||
| № | Код | Вид в браузере |
| 5.3.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.5" />
<GradientStop Color="yellow"
Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со вторыми предельными граничными значениями – 0.5 и 0.5. В этом случае градиент вырождается в две области с чистыми цветами |
||
В рассмотренных случаях мы видели направление градиента только в одном направлении – из верхнего левого угла в правый нижний. Для произвольного направления вводится набор атрибутов StartPoint="0,0" EndPoint="1,1" следующим образом:
<Rectangle Width="150" Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="red" Offset="0" />
<GradientStop Color="yellow" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
В этом случае градиент будет совпадать с направлением, принятым по умолчанию (рис. 5.2):
(рис 5.2) Направление градиента
Атрибуты StartPoint="0,0" EndPoint="1,1" задают координаты двух точек, в направлении которых будет направлен градиент. При этом для углов области градиента значения атрибутов определяются указанным на рисунке образом. Можно провести аналогию между этими значениями и обычными координатами – оси направлены совершенно одинаково. В табл. 5.4 приведены различные предельные случаи направления градиента.
| № | Код | Вид в браузере |
|---|---|---|
| 5.4.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента из верхнего левого в правый нижний угол. Совпадает с принятым по умолчанию | ||
| № | Код | Вид в браузере |
| 5.4.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента слева направо | ||
| № | Код | Вид в браузере |
| 5.4.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента сверху вниз | ||
| № | Код | Вид в браузере |
| 5.4.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="1,0"
EndPoint="0,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента справа налево. В принципе, такое же расположение можно получить, если поменять местами цвета градиента | ||
| № | Код | Вид в браузере |
| 5.4.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1"
EndPoint="0,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента снизу вверх | ||
Для других, промежуточных значений, можно изменять значения атрибутов в диапазоне от 0 до 1.
Внутри определения градиента можно помещать несколько цветов:
<LinearGradientBrush>
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="0.2" />
<GradientStop Color="Orange" Offset="0.3" />
<GradientStop Color="Yellow" Offset="0.4" />
<GradientStop Color="Green" Offset="0.5" />
<GradientStop Color="DeepSkyBlue" Offset="0.6" />
<GradientStop Color="Blue" Offset="0.7" />
<GradientStop Color="Purple" Offset="0.8" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
Таким образом, получается серия цветов, напоминающая радугу (спектр). В табл. 5.5 приводятся различные примеры использования градиента.
| № | Код | Вид в браузере |
|---|---|---|
| 5.5.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="
Blue" Offset="0" />
<GradientStop Color="
Red" Offset="0.2" />
<GradientStop Color="
Orange" Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="
Green" Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Градиент содержащий серию цветов | ||
| № | Код | Вид в браузере |
| 5.5.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Применение градиента к окружности | ||
| № | Код | Вид в браузере |
| 5.5.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="250" Height="150"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
FontFamily="Arial Bold"
FontSize="90"
FontWeight="Bold">
Текст
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Заливка градиентом текста | ||
| № | Код | Вид в браузере |
| 5.5.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="130" Height="130"
Canvas.Left="10" Canvas.Top="10"
Fill="Black"/>
<Rectangle Width="150" Height="
150" Opacity="0.8">
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Прозрачность для всего прямоугольника, заполненного градиентом | ||
| № | Код | Вид в браузере |
| 5.5.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="130"
Height="130" Canvas.Left="10"
Canvas.Top="10" Fill="Black"/>
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Градиентная прозрачность | ||
Радиальная градиентная заливка позволяет получать плавное изменение цвета в направлении от центра или к центру окружности. Синтаксис практически совпадает с определением линейного градиента, за исключением ключевого слова RadialGradientBrush:
<Ellipse Width="150" Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
Графически распределение цвета выглядит так (рис. 5.3):
(рис 5.3) Определение RadialGradientBrush
Атрибут Offset в данном случае отсчитывается в направлении радиуса окружности. В табл. 5.6 приводятся примеры с различными значениями этого атрибута.
| № | Код | Вид в браузере |
|---|---|---|
| 5.6.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1. |
||
| № | Код | Вид в браузере |
| 5.6.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="1" />
<GradientStop Color="Yellow"
Offset="0" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1. Цвета градиента поменяли местами |
||
| № | Код | Вид в браузере |
| 5.6.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Yellow"
Offset="0.8" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.2 и 0.8. Как и в случае линейного градиента хорошо заметны области чистых цветов |
||
| № | Код | Вид в браузере |
| 5.6.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.7" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Атрибуты Offset со значениями – 0.3 и 0.7 | ||
| № | Код | Вид в браузере |
| 5.6.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.5" />
<GradientStop Color="Yellow"
Offset="0.5" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со вторыми предельными граничными значениями – 0.5 и 0.5. В этом случае градиент вырождается в две радиальные области с чистыми цветами |
||
Для элемента RadialGradientBrush можно задать область распространения непосредственно в его определении, при помощи атрибутов RadiusX, RadiusY и Center:
<Ellipse Width="150" Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.5"
RadiusY="0.5" Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
В этом случае область градиента будет локализована в центре фигуры в окружности с радиусом 25% (рис. 5.4)
(рис 5.4) Локализация радиального градиента
Применять набор этих свойств удобно в случае заливки произвольных, не сферических фигур – радиальная окружность будет присутствовать в области однородного цвета. В табл. 5.7 приводятся примеры использования этих атрибутов.
| № | Код | Вид в браузере |
|---|---|---|
| 5.7.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.5"
RadiusY="0.5"
Center="0.5,0.5" >
<GradientStop Color="
Red" Offset="0" />
<GradientStop
Color="Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Значения атрибутов совпадают с принятыми по умолчанию | ||
| № | Код | Вид в браузере |
| 5.7.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.25"
RadiusY="0.25"
Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Градиент локализован в окружности с радиусом 25%. | ||
| № | Код | Вид в браузере |
| 5.7.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="300"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="
Red" Offset="0" />
<GradientStop
Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="150"
Height="150"
Canvas.Top="150"
Canvas.Left="0" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.25"
RadiusY="0.25"
Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Заливка прямоугольника |
||
| № | Код | Вид в браузере |
| 5.7.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.75"
RadiusY="0.75"
Center="0.5,0.5" >
<GradientStop Color=
"Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Увеличение площади распространения градиента позволяет выделить его определенную часть | ||
| № | Код | Вид в браузере |
| 5.7.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.25"
RadiusY="0.25"
Center="0.25,0.25" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Отсекание фигурой изображение градиента, локализованного в верхней левой части | ||
| № | Код | Вид в браузере |
| 5.7.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.25"
RadiusY="0.25"
Center="0.75,0.75" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Отсекание фигурой изображение градиента, локализованного в правой нижней части | ||
В последних двух примерах заметно "обрезанное" расположение области градиента. Для получения эффекта светового блика на фигуре также используется GradientOrigin, который подстраивает распространение градиента под геометрические размеры фигуры (табл. 5.8).
| № | Код | Вид в браузере |
|---|---|---|
| 5.8.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush Gradient
Origin="0.25,0.25" >
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Эффект светового блика в левой верхней части фигуры | ||
| № | Код | Вид в браузере |
| 5.8.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="
0.75,0.75" >
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Эффект светового блика в правой нижней части фигуры | ||
Как и в случае линейного градиента, допускается применение нескольких цветов и управление прозрачностью при помощи именованного значения "Transparent" (табл. 5.9)
| № | Код | Вид в браузере |
|---|---|---|
| 5.9.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Заливка окружности |
||
| № | Код | Вид в браузере |
| 5.9.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Заливка прямоугольника |
||
| № | Код | Вид в браузере |
| 5.9.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="250" Height="150"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
FontFamily="Arial Bold"
FontSize="90"
FontWeight="Bold">
Текст
<TextBlock.Foreground>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="
Orange"
Offset="0.3" />
<GradientStop Color="
Yellow"
Offset="0.4" />
<GradientStop Color="
Green"
Offset="0.5" />
<GradientStop Color="
DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Заливка текста |
||
| № | Код | Вид в браузере |
| 5.9.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="30"
Canvas.Left="0" Canvas.
Top="60" Fill="Black"/>
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="
Blue"
Offset="0" />
<GradientStop Color="
Transparent"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| № | Код | Вид в браузере |
| 5.9.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150" Height="30"
Canvas.Left="0" Canvas.Top="
60" Fill="Black"/>
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="Transparent"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Оформление фигуры определяется не только ее заливкой, но и контуром. В первых лекциях мы определяли цвет заливки и ее толщину. Теперь рассмотрим другие атрибуты контура, доступные в XAML – графике. Описание основных атрибутов приводятся в табл. 5.10.
| № | Название |
|---|---|
| 5.10.1 | |
Stroke |
|
| Описание | |
| Рисование контура фигуры | |
| Диапазон значений | |
| Цвет | |
| Значение по умолчанию | |
| Абсолютно непрозрачный белый цвет (#000000) | |
| № | Название |
| 5.10.2 | |
StrokeThickness |
|
| Описание | |
| Толщина линии | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| 1 пиксел | |
| № | Название |
| 5.10.3 | |
StrokeDashArray |
|
| Описание | |
| Определение стиля линии – сплошная, пунктиром или точками | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| Сплошная. В качестве значения допускается указание ряда чисел | |
| № | Название |
| 5.10.4 | |
StrokeDashOffset |
|
| Описание | |
| Определение отступа при задании пунктирной линии | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| 0 | |
| № | Название |
| 5.10.5 | |
StrokeStartLineCap, StrokeEndLineCap |
|
| Описание | |
| Задание типа линии на концах – обычная (Flat), скругленная (Round), с выступом (Square) и треугольная (Triangle). | |
| Диапазон значений | |
| Flat | Round | Square | Triangle | |
| Значение по умолчанию | |
| Flat | |
| № | Название |
| 5.10.6 | |
StrokeLineJoin |
|
| Описание | |
| Тип линии на изгибе – обычный ( |
|
| Диапазон значений | |
| Значение по умолчанию | |
| № | Название |
| 5.10.7 | |
StrokeMiterLimit |
|
| Описание | |
Получает или устанавливает ограничение отношения длины StrokeThickness элемента |
|
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| - |
В табл. 5.11приводятся различные примеры использования атрибутов контура.
| № | Код | Вид в браузере |
|---|---|---|
| 5.11.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="90"
Canvas.Left = "0" Canvas.Top="30"
Fill="Black"/>
<Ellipse Width="120"
Height="120"
Fill="Blue" StrokeThickness="15"
Canvas.Left="15" Canvas.Top="15">
<Ellipse.Stroke >
<LinearGradientBrush
Opacity="0.8">
<GradientStop Color="Red"
Offset="0"/>
<GradientStop Color="Red"
Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Применение прозрачности к контуру. Заметно проведение контура по центральной части краев фигуры | ||
| № | Код | Вид в браузере |
| 5.11.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="90" Canvas.Left = "0"
Canvas.Top="30" Fill="Black"/>
<Ellipse Width="120"
Height="120" Fill="Blue"
StrokeThickness="15"
Canvas.Left="15"
Canvas.Top="15">
<Ellipse.Stroke >
<LinearGradientBrush
Opacity="0.8">
<GradientStop Color="Red"
Offset="0"/>
<GradientStop Color="Yellow"
Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Полупрозрачный контур с градиентной заливкой | ||
| № | Код | Вид в браузере |
| 5.11.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeDashArray определяет размер точек пунктира |
||
| № | Код | Вид в браузере |
| 5.11.4 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="3" /> </Canvas> |
|
|
| Описание | ||
Большее значение атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="15" /> </Canvas> |
|
|
| Описание | ||
Очень большое значение атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.6 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,1" /> </Canvas> |
|
|
| Описание | ||
Пара значений атрибута StrokeDashArray определяет размер точек и интервал между ними |
||
| № | Код | Вид в браузере |
| 5.11.7 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="3,6" /> </Canvas> |
|
|
| Описание | ||
Большее значение пары атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.8 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,3,6" /> </Canvas> |
|
|
| Описание | ||
Получение пунктирной линии. Тройка значений атрибута StrokeDashArray определяет размер точек, интервал между ними и размер отрезков |
||
| № | Код | Вид в браузере |
| 5.11.9 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" /> </Canvas> |
|
|
| Описание | ||
| Повторяющиеся тройки значений приводят к тому же самому результату | ||
| № | Код | Вид в браузере |
| 5.11.10 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="15" Y1="0" X2="15" Y2="100" Stroke="black" StrokeThickness="1"/> <Line X1="0" Y1="10" X2="200" Y2="10" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="0" /> <Line X1="0" Y1="30" X2="200" Y2="30" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="3" /> <Line X1="0" Y1="50" X2="200" Y2="50" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="6" /> <Line X1="0" Y1="70" X2="200" Y2="70" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="9" /> <Line X1="0" Y1="90" X2="200" Y2="90" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="12" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeDashOffset позволяет задать начальный отступ пунктирной линии |
||
| № | Код | Вид в браузере |
| 5.11.11 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Flat", совпадающим с принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.11.12 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Round", задают сглаживание на концах. Заметно выступающее расположение линии – для обеих линий заданы одинаковые значения абсцисс |
||
| № | Код | Вид в браузере |
| 5.11.13 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Square" StrokeEndLineCap="Square"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Square", завершают линию обычным образом, но позволяют получить выступы по краям. |
||
| № | Код | Вид в браузере |
| 5.11.14 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Triangle", завершают линию треугольным оформлением |
||
| № | Код | Вид в браузере |
| 5.11.15 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением ", принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.11.16 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Round" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением "Round", задающим сглаженный изгиб |
||
| № | Код | Вид в браузере |
| 5.11.17 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Bevel" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением "Bevel", задающим рубленый изгиб |
||
| № | Код | Вид в браузере |
| 5.11.18 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="600" Background="White" x:Name="Page"> <Line X1="70" Y1="0" X2="70" Y2="600" Stroke="Black" StrokeThickness="1"/> <Line X1="95" Y1="0" X2="95" Y2="600" Stroke="Black" StrokeThickness="1"/> <Polyline Points="10,30 70,50 10,70" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="1" /> <Polyline Points=" 10,130 70,150 10,170" Stroke="Red" S trokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit="2" /> <Polyline Points=" 10,230 70,250 10,270" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="3" /> <Polyline Points=" 10,330 70,350 10,370" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="4" /> <Polyline Points=" 10,430 70,450 10,470" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit="5" /> <Polyline Points=" 10,530 70,550 10,570" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="6" /> </Canvas> |
|
|
| Описание | ||
В данном случае значения атрибута StrokeMiterLimit до четырех задают рубленый изгиб, равные и больше четырех – обычный |
||
Элемент Clip предназначен для отсекания заданной областью части изображения. Этот инструмент хорошо знаком пользователям графических программ, например, в Adobe Photoshop для таких задач имеются специальные инструменты (рис. 5.5):
(рис 5.5) Инструмент горизонтальный текст-маска в программе Adobe Photoshop
Код для элемента Clip выглядит так:
<Image Width="291" Height="195"
Source="sea2.jpg" Stretch="Fill" >
<Image.Clip>
<EllipseGeometry Center="150,100"
RadiusX="90" RadiusY="90" />
</Image.Clip>
</Image>
Внутри элемента определяется фигура, которая будет ограничивать изображения. Элемент Image предназначен для помещения в XAML – документ внешнего графического файла – в данном случае используется "sea2.jpg". В табл. 5.12 приводятся примеры использования элемента Clip.
| № | Код | Вид в браузере |
|---|---|---|
| 5.12.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<EllipseGeometry
Center="150,100"
RadiusX="90"
RadiusY="90" />
</Image.Clip>
</Image>
</Canvas>
|
|
|
| Описание | ||
Отсекание части изображения окружностью. Изображение "sea2.jpg" было добавлено в папку проекта (рис. 5.6):  (рис 5.6) Содержимое проекта Silverlight-сайта
|
||
| № | Код | Вид в браузере |
| 5.12.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" Clip="M20,10 L280,10 L20, 190 L280,190 z" > </Image> </Canvas> |
|
|
| Описание | ||
Отсекание части изображения при помощи задания атрибута Clip |
||
| № | Код | Вид в браузере |
| 5.12.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<GeometryGroup>
<EllipseGeometry
Center="100,100"
RadiusX="90"
RadiusY="90" />
<EllipseGeometry
Center="200,100"
RadiusX="90"
RadiusY="90" />
</GeometryGroup>
</Image.Clip>
</Image>
</Canvas>
|
|
|
| Описание | ||
Отсекание изображения с помощью двух пересекающихся окружностей. Заметна центральная область, которая не стала маской. Для того чтобы получить полностью Нарисовать две окружности: <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" />
<Ellipse Width="180"
Height="180"
Canvas.Left = "5"
Fill="White"
Canvas.Top="10"/>
<Ellipse Width="180"
Height="180"
Canvas.Left = "105"
Fill="White"
Canvas.Top="10" />
</Canvas>
В режиме дизайна изображение будет выглядеть так (рис. 5.7):  (рис 5.7) Подготовка к клипированию области
Объединить их с помощью пункта меню "Object \ Combine \ Unite" (рис. 5.8):  (рис 5.8) Объединение фигур
В результате получиться код, представляемый объектом Path: <Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" /> <Path Width="280" Height="180" Fill="White" Stretch="Fill" Canvas.Left="5" Canvas.Top="10" Data="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171.49439,-1.1920927E-06 190,2.2737368E-13 C239.70563,-1.1920927E-06 280,40. 294371 280,89.999999 C280,139.70563 239.70563,180 190, 180 C171.49439,180 154.29328,174.41478 140,164.82373 C125.70672,174.41478 108.50561,180 89.999999,180 40. 294373,180 0,139.70563 0,89.999999 0,40.294371 40. 294373,-1.1920927E- 06 89.999999,2.2737368E- 13 z"/> </Canvas> Значение, содержащееся в атрибуте <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" Clip="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171.49439,-1.1920927E-06 190,2. 2737368E-13 C239.70563,-1.1920927E -06 280,40.294371 280,89.999999 C280,139.70563 239.70563,180 190, 180 C171.49439,180 154.29328,174.41478 140,164.82373 C125.70672,174.41478 108.50561,180 89.999999,180 40.29 4373,180 0,139.70563 0,89.999999 0,40.294371 40.294373, -1.1920927E-06 89.999 999,2.2737368E-13 z" Canvas.Top="8" Canvas.Left="8" /> </Canvas> Теперь фигура действительно полностью клипирует изображение (рис. 5.9):  (рис 5.9) Готовый результат объединения фигур
|
||
| № | Код | Вид в браузере |
| 5.12.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Rectangle Width="291" Height="195" Canvas.Left="0" Canvas.Top="0" Fill="Black"/> <Image Width="291 " Height=" 195" Source="sea2.jpg" Stretch="Fill" Clip="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171. 49439,-1.1920927E-06 190,2.2737 368E-13 C239.70563,-1.1920927 E-06 280,40.294371 280,89.9 99999 C280,139.70563 239.705 63,180 190,180 C171.49439,180 154.29328,174.41478 140,164. 82373 C125.70672,174.41478 108.50561,180 89.999999,180 40.294373,180 0,139.70563 0,89.999999 0,40.294371 40. 294373,-1.1920927E-06 89.99 9999,2.2737368E-13 z" Canvas.Top="8" Canvas.Left="8" /> </Canvas> |
|
|
| Описание | ||
| Для оформления можно использовать дополнительные элементы | ||
| № | Код | Вид в браузере |
| 5.12.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Rectangle Width="291"
Height="195"
Canvas.Left="0"
Canvas.Top="0"
Fill="Pink"/>
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<EllipseGeometry
Center="150,100"
RadiusX="90"
RadiusY="90" />
</Image.Clip>
</Image>
<Ellipse Width = "180"
Height="180"
Canvas.Left = "60"
Canvas.Top="10"
Stroke="Red"
StrokeThickness="5"
StrokeDashArray="1,1" />
</Canvas>
|
|
|
| Описание | ||
| Для последовательности элементов, среди которых имеется элемент Image, справедлив тот же самый |
||
При работе с объектом Clip можно было заметить, что внутреннее оформление фигуры, определяемой внутри элемента, игнорируется. Элемент OpacityMask является инструментом, поддерживающим все свойства элемента Clip с учетом графической структуры заполнителя. Фрагмент кода для элемента OpacityMask выглядит так:
<Image Width="291"
Height="195" Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
Здесь в качестве заливки фигуры-заполнителя используется
| № | Код | Вид в браузере |
|---|---|---|
| 5.13.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="
Blue" Offset="0" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Применение в качестве заполнителя маски окружности с градиентной заливкой | ||
| № | Код | Вид в браузере |
| 5.13.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="
Blue" Offset="0.8" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Применение в качестве заполнителя маски окружности с градиентной заливкой. Уменьшением размера градиентной области достигается увеличение площади открытой поверхности | ||
| № | Код | Вид в браузере |
| 5.13.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="Red"
Offset="0.9" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
<Rectangle Width="291"
Height="195" >
<Rectangle.Fill>
<RadialGradientBrush >
<GradientStop Color="
Transparent" Offset="0.8" />
<GradientStop Color="
Blue" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
При использовании заполнителя, заполненного градиентом любого цвета, на рисунке заметно уменьшение прозрачности белого цвета. Для получения нужного цвета используется комбинация обычного элемента OpacityMask и наложения |
||
| № | Код | Вид в браузере |
| 5.13.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<ImageBrush ImageSource="fish.png"/>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
Применение в качестве заполнителя внешнего графического файла в формате PNG. Исходное изображение было подготовлено во внешнем графическом редакторе (рис. 5.10):  (рис 5.10) Подготовка изображения в формате PNG
Далее оно также было добавлено в папку с проектом (рис. 5.11):  (рис 5.11) Содержимое папки проекта
|
||
| № | Код | Вид в браузере |
| 5.13.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<ImageBrush
Viewport="0,0,50,50"
ViewportUnits="Absolute"
TileMode="Tile"
ImageSource="fish.png"/>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Создание паттерна с помощью атрибута и "TileBrush.Viewport Property": http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.viewport.aspx | ||
| № | Код | Вид в браузере |
| 5.13.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="350" Height="200"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
Canvas.Left="25"
FontFamily="Arial"
FontSize="150"
Foreground="Red"
>
АБВ
<TextBlock.OpacityMask>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<GradientStop
Color="Blue"
Offset="0" />
<GradientStop
Color="Transparent"
Offset="1.2" />
</LinearGradientBrush>
</TextBlock.OpacityMask>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Маскированный текст | ||
Мы закончили рассмотрение основных возможностей рисования, связанных с простой графикой.
Заливка цветом может применяться к фигурам, тексту и элементам Path. При указании цвета допустимы именованные названия, а также код в шестнадцатеричной форме. В табл.5.1 приводится описание основных атрибутов заливки.
| № | Название |
|---|---|
| 5.1.1 | |
Fill |
|
| Описание | |
| Заливка цветом внутренней части фигуры или текста | |
| Диапазон значений | |
| Именованные названия, шестнадцатеричный индекс цвета | |
| Значение по умолчанию | |
| Белый и прозрачный (#FFFFFFFF) | |
| № | Название |
| 5.1.2 | |
Opacity |
|
| Описание | |
| Прозрачность заливки фигуры может задаваться в численных значениях. Кроме этого, в XAML поддерживается шестнадцатеричная запись вида ARGB, где A – величина, определяющее канал прозрачности. Значение 00 соответствует полной прозрачности, FF – непрозрачности | |
| Диапазон значений | |
| Число между 0 (полная прозрачность) и 1 (полная непрозрачность ) | |
| Значение по умолчанию | |
| 0 | |
| № | Название |
| 5.1.3 | |
FillRule |
|
| Описание | |
| Режим заливки фигуры, при которой остаются пустые (незакрашенные) области | |
| Диапазон значений | |
| Значение по умолчанию | |
| EvenOdd |
Ранее мы пользовались при заливке только атрибутом Fill . Следовательно, мы имели дело с полностью непрозрачными объектами, заполняемыми цветом полностью. В табл. 5.2 приводятся примеры использования атрибутов заливки.
| № | Код | Вид в браузере |
|---|---|---|
| 5.2.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="210" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="0" Canvas.Top="25" Width="210" Height="50" Fill="black" /> <Rectangle Canvas.Left="10" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.1" /> <Rectangle Canvas.Left="30" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.2" /> <Rectangle Canvas.Left="50" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.3" /> <Rectangle Canvas.Left="70" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.4" /> <Rectangle Canvas.Left="90" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.5" /> <Rectangle Canvas.Left="110" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.6" /> <Rectangle Canvas.Left="130" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.7" /> <Rectangle Canvas.Left="150" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.8" /> <Rectangle Canvas.Left="170" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="0.9" /> <Rectangle Canvas.Left="190" Canvas.Top="0" Width="10" Height="100" Fill="red" Opacity="1" /> </Canvas> |
|
|
| Описание | ||
| Полоски с различными значениями прозрачности | ||
| № | Код | Вид в браузере |
| 5.2.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="210" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="0" Canvas.Top="25" Width="210" Height="50" Fill="black" /> <Canvas Width="210" Height="100" Canvas.Left="0" Canvas.Top="0" Opacity="0.6"> <Rectangle Canvas.Left="10" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="30" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="50" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="70" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="90" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="110" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="130" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="150" Canvas.Top="0" Width="10" Height="100" Fill="red"/> <Rectangle Canvas.Left="170" Canvas.Top="0" Width="10" Height="100" Fill="red" /> <Rectangle Canvas.Left="190" Canvas.Top="0" Width="10" Height="100" Fill="red" /> </Canvas> </Canvas> |
|
|
| Описание | ||
| Задание единой прозрачности для группы элементов при помощи элемента Canvas | ||
| № | Код | Вид в браузере |
| 5.2.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="0"
Canvas.Top="25"
Width="210" Height="50"
Fill="black" />
<Path Fill="red"
Opacity="0.6" >
<Path.Data>
<GeometryGroup FillRule="NonZero" >
<RectangleGeometry Rect="
10,0 10 100" />
<RectangleGeometry Rect="
30,0 10 100" />
<RectangleGeometry Rect="
50,0 10 100" />
<RectangleGeometry Rect="
70,0 10 100" />
<RectangleGeometry Rect="
90,0 10 100" />
<RectangleGeometry Rect="
110,0 10 100" />
<RectangleGeometry Rect="
130,0 10 100" />
<RectangleGeometry Rect="
150,0 10 100" />
<RectangleGeometry Rect="
170,0 10 100" />
<RectangleGeometry Rect="
190,0 10 100" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Задание единой прозрачности для группы элементов, объединенных в элементе Path | ||
| № | Код | Вид в браузере |
| 5.2.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210"
Height="100"
Background="White"
x:Name="Page">
<Polygon Points="50,6
18,86 98,38 2,38 82,86"
FillRule="NonZero"
Fill="red" Stroke="black"
StrokeThickness="1"/>
<Polygon Points="151,6
119,86 199,38 103,38 183,86"
FillRule="EvenOdd"
Fill="red"
Stroke="black"
StrokeThickness="1"/>
</Canvas>
|
|
|
| Описание | ||
| Режимы заливки – полная и с пустыми областями | ||
| № | Код | Вид в браузере |
| 5.2.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" Height="100"
Background="White"
x:Name="Page">
<Polygon Points="50,6 18,86
98,38 2,38 82,86"
Fill="red" Stroke="black"
StrokeThickness="1"/>
<Polygon Points="151,6 119,
86 199,38 103,38 183,86"
FillRule="EvenOdd"
Fill="red"
Stroke="black"
StrokeThickness="1"/>
</Canvas>
|
|
|
| Описание | ||
Значение EvenOdd совпадает с принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.2.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xam"
Width="350" Height="100"
Background="Black"
x:Name="Page">
<TextBlock
Canvas.Top="10"
Canvas.Left="15"
FontFamily="Arial"
FontSize="40"
FontWeight="Bold"
>
<Run Text="Red "
Foreground="Red" />
<Run Text="Green "
Foreground="Green" />
<Run Text="Blue "
Foreground="Blue" />
</TextBlock>
<TextBlock
Canvas.Top="50"
Canvas.Left="15"
FontFamily="Arial"
FontSize="40"
FontWeight="Bold"
Opacity="0.5">
<Run Text="Red "
Foreground="Red" />
<Run Text="Green "
Foreground="Green" />
<Run Text="Blue "
Foreground="Blue" />
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Полностью непрозрачный и частично прозрачный текст на черном фоне | ||
Линейная градиентная заливка предназначена для получения плавного цветового перехода в направлении, заданной прямой. Элемент LinearGradientBrush формирует содержимое заливки заданной фигуры:
<Rectangle Width="150" Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red" Offset="0" />
<GradientStop Color="yellow" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Внутри элемента LinearGradientBrush задаются цвета градиента с помощью тегов GradientStop и граница области каждого из цветов в атрибутах Оffset (рис. 5.1):
(рис 5.1) Определение LinearGradientBrush
Атрибут Offset определяет области покрытия исходных цветов и формируемого ими промежуточного. Так, на рисунке первый цвет занимает 0.3 от всей области, второй цвет также 0.3 (1- 0.7=0.3), а область градиента занимает всю остальную часть, т.е. 0.4. В табл. 5.3 приводится примеры с различными значениями атрибута Offset.
| № | Код | Вид в браузере |
|---|---|---|
| 5.3.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1 |
||
| № | Код | Вид в браузере |
| 5.3.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.2" />
<GradientStop Color="yellow"
Offset="0.8" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.2 и 0.8. Хорошо заметны области чистых цветов |
||
| № | Код | Вид в браузере |
| 5.3.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.3" />
<GradientStop Color="yellow"
Offset="0.7" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.3 и 0.7 |
||
| № | Код | Вид в браузере |
| 5.3.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="red"
Offset="0.5" />
<GradientStop Color="yellow"
Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со вторыми предельными граничными значениями – 0.5 и 0.5. В этом случае градиент вырождается в две области с чистыми цветами |
||
В рассмотренных случаях мы видели направление градиента только в одном направлении – из верхнего левого угла в правый нижний. Для произвольного направления вводится набор атрибутов StartPoint="0,0" EndPoint="1,1" следующим образом:
<Rectangle Width="150" Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="red" Offset="0" />
<GradientStop Color="yellow" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
В этом случае градиент будет совпадать с направлением, принятым по умолчанию (рис. 5.2):
(рис 5.2) Направление градиента
Атрибуты StartPoint="0,0" EndPoint="1,1" задают координаты двух точек, в направлении которых будет направлен градиент. При этом для углов области градиента значения атрибутов определяются указанным на рисунке образом. Можно провести аналогию между этими значениями и обычными координатами – оси направлены совершенно одинаково. В табл. 5.4 приведены различные предельные случаи направления градиента.
| № | Код | Вид в браузере |
|---|---|---|
| 5.4.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента из верхнего левого в правый нижний угол. Совпадает с принятым по умолчанию | ||
| № | Код | Вид в браузере |
| 5.4.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента слева направо | ||
| № | Код | Вид в браузере |
| 5.4.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента сверху вниз | ||
| № | Код | Вид в браузере |
| 5.4.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="1,0"
EndPoint="0,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента справа налево. В принципе, такое же расположение можно получить, если поменять местами цвета градиента | ||
| № | Код | Вид в браузере |
| 5.4.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1"
EndPoint="0,0">
<GradientStop Color="red"
Offset="0" />
<GradientStop Color="yellow"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Направление градиента снизу вверх | ||
Для других, промежуточных значений, можно изменять значения атрибутов в диапазоне от 0 до 1.
Внутри определения градиента можно помещать несколько цветов:
<LinearGradientBrush>
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="0.2" />
<GradientStop Color="Orange" Offset="0.3" />
<GradientStop Color="Yellow" Offset="0.4" />
<GradientStop Color="Green" Offset="0.5" />
<GradientStop Color="DeepSkyBlue" Offset="0.6" />
<GradientStop Color="Blue" Offset="0.7" />
<GradientStop Color="Purple" Offset="0.8" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
Таким образом, получается серия цветов, напоминающая радугу (спектр). В табл. 5.5 приводятся различные примеры использования градиента.
| № | Код | Вид в браузере |
|---|---|---|
| 5.5.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="
Blue" Offset="0" />
<GradientStop Color="
Red" Offset="0.2" />
<GradientStop Color="
Orange" Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="
Green" Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Градиент содержащий серию цветов | ||
| № | Код | Вид в браузере |
| 5.5.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Применение градиента к окружности | ||
| № | Код | Вид в браузере |
| 5.5.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="250" Height="150"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
FontFamily="Arial Bold"
FontSize="90"
FontWeight="Bold">
Текст
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1">
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Заливка градиентом текста | ||
| № | Код | Вид в браузере |
| 5.5.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="130" Height="130"
Canvas.Left="10" Canvas.Top="10"
Fill="Black"/>
<Rectangle Width="150" Height="
150" Opacity="0.8">
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Прозрачность для всего прямоугольника, заполненного градиентом | ||
| № | Код | Вид в браузере |
| 5.5.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="130"
Height="130" Canvas.Left="10"
Canvas.Top="10" Fill="Black"/>
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Градиентная прозрачность | ||
Радиальная градиентная заливка позволяет получать плавное изменение цвета в направлении от центра или к центру окружности. Синтаксис практически совпадает с определением линейного градиента, за исключением ключевого слова RadialGradientBrush:
<Ellipse Width="150" Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
Графически распределение цвета выглядит так (рис. 5.3):
(рис 5.3) Определение RadialGradientBrush
Атрибут Offset в данном случае отсчитывается в направлении радиуса окружности. В табл. 5.6 приводятся примеры с различными значениями этого атрибута.
| № | Код | Вид в браузере |
|---|---|---|
| 5.6.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1. |
||
| № | Код | Вид в браузере |
| 5.6.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="1" />
<GradientStop Color="Yellow"
Offset="0" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1. Цвета градиента поменяли местами |
||
| № | Код | Вид в браузере |
| 5.6.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Yellow"
Offset="0.8" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со значениями – 0.2 и 0.8. Как и в случае линейного градиента хорошо заметны области чистых цветов |
||
| № | Код | Вид в браузере |
| 5.6.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.7" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Атрибуты Offset со значениями – 0.3 и 0.7 | ||
| № | Код | Вид в браузере |
| 5.6.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red"
Offset="0.5" />
<GradientStop Color="Yellow"
Offset="0.5" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Атрибуты Offset со вторыми предельными граничными значениями – 0.5 и 0.5. В этом случае градиент вырождается в две радиальные области с чистыми цветами |
||
Для элемента RadialGradientBrush можно задать область распространения непосредственно в его определении, при помощи атрибутов RadiusX, RadiusY и Center:
<Ellipse Width="150" Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.5"
RadiusY="0.5" Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
В этом случае область градиента будет локализована в центре фигуры в окружности с радиусом 25% (рис. 5.4)
(рис 5.4) Локализация радиального градиента
Применять набор этих свойств удобно в случае заливки произвольных, не сферических фигур – радиальная окружность будет присутствовать в области однородного цвета. В табл. 5.7 приводятся примеры использования этих атрибутов.
| № | Код | Вид в браузере |
|---|---|---|
| 5.7.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.5"
RadiusY="0.5"
Center="0.5,0.5" >
<GradientStop Color="
Red" Offset="0" />
<GradientStop
Color="Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Значения атрибутов совпадают с принятыми по умолчанию | ||
| № | Код | Вид в браузере |
| 5.7.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.25"
RadiusY="0.25"
Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Градиент локализован в окружности с радиусом 25%. | ||
| № | Код | Вид в браузере |
| 5.7.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="300"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="
Red" Offset="0" />
<GradientStop
Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="150"
Height="150"
Canvas.Top="150"
Canvas.Left="0" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.25"
RadiusY="0.25"
Center="0.5,0.5" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Заливка прямоугольника |
||
| № | Код | Вид в браузере |
| 5.7.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush
RadiusX="0.75"
RadiusY="0.75"
Center="0.5,0.5" >
<GradientStop Color=
"Red"
Offset="0" />
<GradientStop Color="
Yellow" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Увеличение площади распространения градиента позволяет выделить его определенную часть | ||
| № | Код | Вид в браузере |
| 5.7.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.25"
RadiusY="0.25"
Center="0.25,0.25" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Отсекание фигурой изображение градиента, локализованного в верхней левой части | ||
| № | Код | Вид в браузере |
| 5.7.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush RadiusX="0.25"
RadiusY="0.25"
Center="0.75,0.75" >
<GradientStop Color="Red"
Offset="0" />
<GradientStop Color="Yellow"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Отсекание фигурой изображение градиента, локализованного в правой нижней части | ||
В последних двух примерах заметно "обрезанное" расположение области градиента. Для получения эффекта светового блика на фигуре также используется GradientOrigin, который подстраивает распространение градиента под геометрические размеры фигуры (табл. 5.8).
| № | Код | Вид в браузере |
|---|---|---|
| 5.8.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush Gradient
Origin="0.25,0.25" >
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Эффект светового блика в левой верхней части фигуры | ||
| № | Код | Вид в браузере |
| 5.8.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="
0.75,0.75" >
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Эффект светового блика в правой нижней части фигуры | ||
Как и в случае линейного градиента, допускается применение нескольких цветов и управление прозрачностью при помощи именованного значения "Transparent" (табл. 5.9)
| № | Код | Вид в браузере |
|---|---|---|
| 5.9.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Заливка окружности |
||
| № | Код | Вид в браузере |
| 5.9.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="150" >
<Rectangle.Fill>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="Orange"
Offset="0.3" />
<GradientStop Color="Yellow"
Offset="0.4" />
<GradientStop Color="Green"
Offset="0.5" />
<GradientStop Color="DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
| Заливка прямоугольника |
||
| № | Код | Вид в браузере |
| 5.9.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="250" Height="150"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
FontFamily="Arial Bold"
FontSize="90"
FontWeight="Bold">
Текст
<TextBlock.Foreground>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="0.2" />
<GradientStop Color="
Orange"
Offset="0.3" />
<GradientStop Color="
Yellow"
Offset="0.4" />
<GradientStop Color="
Green"
Offset="0.5" />
<GradientStop Color="
DeepSkyBlue"
Offset="0.6" />
<GradientStop Color="Blue"
Offset="0.7" />
<GradientStop Color="Purple"
Offset="0.8" />
<GradientStop Color="White"
Offset="1" />
</RadialGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Заливка текста |
||
| № | Код | Вид в браузере |
| 5.9.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="30"
Canvas.Left="0" Canvas.
Top="60" Fill="Black"/>
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="
Blue"
Offset="0" />
<GradientStop Color="
Transparent"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| № | Код | Вид в браузере |
| 5.9.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150" Height="30"
Canvas.Left="0" Canvas.Top="
60" Fill="Black"/>
<Ellipse Width="150"
Height="150" >
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Color="Transparent"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
Оформление фигуры определяется не только ее заливкой, но и контуром. В первых лекциях мы определяли цвет заливки и ее толщину. Теперь рассмотрим другие атрибуты контура, доступные в XAML – графике. Описание основных атрибутов приводятся в табл. 5.10.
| № | Название |
|---|---|
| 5.10.1 | |
Stroke |
|
| Описание | |
| Рисование контура фигуры | |
| Диапазон значений | |
| Цвет | |
| Значение по умолчанию | |
| Абсолютно непрозрачный белый цвет (#000000) | |
| № | Название |
| 5.10.2 | |
StrokeThickness |
|
| Описание | |
| Толщина линии | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| 1 пиксел | |
| № | Название |
| 5.10.3 | |
StrokeDashArray |
|
| Описание | |
| Определение стиля линии – сплошная, пунктиром или точками | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| Сплошная. В качестве значения допускается указание ряда чисел | |
| № | Название |
| 5.10.4 | |
StrokeDashOffset |
|
| Описание | |
| Определение отступа при задании пунктирной линии | |
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| 0 | |
| № | Название |
| 5.10.5 | |
StrokeStartLineCap, StrokeEndLineCap |
|
| Описание | |
| Задание типа линии на концах – обычная (Flat), скругленная (Round), с выступом (Square) и треугольная (Triangle). | |
| Диапазон значений | |
| Flat | Round | Square | Triangle | |
| Значение по умолчанию | |
| Flat | |
| № | Название |
| 5.10.6 | |
StrokeLineJoin |
|
| Описание | |
| Тип линии на изгибе – обычный ( |
|
| Диапазон значений | |
| Значение по умолчанию | |
| № | Название |
| 5.10.7 | |
StrokeMiterLimit |
|
| Описание | |
Получает или устанавливает ограничение отношения длины StrokeThickness элемента |
|
| Диапазон значений | |
| Числовые значения | |
| Значение по умолчанию | |
| - |
В табл. 5.11приводятся различные примеры использования атрибутов контура.
| № | Код | Вид в браузере |
|---|---|---|
| 5.11.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="90"
Canvas.Left = "0" Canvas.Top="30"
Fill="Black"/>
<Ellipse Width="120"
Height="120"
Fill="Blue" StrokeThickness="15"
Canvas.Left="15" Canvas.Top="15">
<Ellipse.Stroke >
<LinearGradientBrush
Opacity="0.8">
<GradientStop Color="Red"
Offset="0"/>
<GradientStop Color="Red"
Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Применение прозрачности к контуру. Заметно проведение контура по центральной части краев фигуры | ||
| № | Код | Вид в браузере |
| 5.11.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
<Rectangle Width="150"
Height="90" Canvas.Left = "0"
Canvas.Top="30" Fill="Black"/>
<Ellipse Width="120"
Height="120" Fill="Blue"
StrokeThickness="15"
Canvas.Left="15"
Canvas.Top="15">
<Ellipse.Stroke >
<LinearGradientBrush
Opacity="0.8">
<GradientStop Color="Red"
Offset="0"/>
<GradientStop Color="Yellow"
Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Canvas>
|
|
|
| Описание | ||
| Полупрозрачный контур с градиентной заливкой | ||
| № | Код | Вид в браузере |
| 5.11.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeDashArray определяет размер точек пунктира |
||
| № | Код | Вид в браузере |
| 5.11.4 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="3" /> </Canvas> |
|
|
| Описание | ||
Большее значение атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="15" /> </Canvas> |
|
|
| Описание | ||
Очень большое значение атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.6 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,1" /> </Canvas> |
|
|
| Описание | ||
Пара значений атрибута StrokeDashArray определяет размер точек и интервал между ними |
||
| № | Код | Вид в браузере |
| 5.11.7 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="3,6" /> </Canvas> |
|
|
| Описание | ||
Большее значение пары атрибута StrokeDashArray |
||
| № | Код | Вид в браузере |
| 5.11.8 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,3,6" /> </Canvas> |
|
|
| Описание | ||
Получение пунктирной линии. Тройка значений атрибута StrokeDashArray определяет размер точек, интервал между ними и размер отрезков |
||
| № | Код | Вид в браузере |
| 5.11.9 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="150" Height="150" Background="White" x:Name="Page"> <Ellipse Width = "140" Height="140" Canvas.Left = "5" Canvas.Top="5" Stroke="Red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" /> </Canvas> |
|
|
| Описание | ||
| Повторяющиеся тройки значений приводят к тому же самому результату | ||
| № | Код | Вид в браузере |
| 5.11.10 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="15" Y1="0" X2="15" Y2="100" Stroke="black" StrokeThickness="1"/> <Line X1="0" Y1="10" X2="200" Y2="10" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="0" /> <Line X1="0" Y1="30" X2="200" Y2="30" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="3" /> <Line X1="0" Y1="50" X2="200" Y2="50" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="6" /> <Line X1="0" Y1="70" X2="200" Y2="70" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="9" /> <Line X1="0" Y1="90" X2="200" Y2="90" Stroke="red" StrokeThickness="5" StrokeDashArray="1,3,6,1,3,6" StrokeDashOffset="12" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeDashOffset позволяет задать начальный отступ пунктирной линии |
||
| № | Код | Вид в браузере |
| 5.11.11 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Flat", совпадающим с принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.11.12 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Round", задают сглаживание на концах. Заметно выступающее расположение линии – для обеих линий заданы одинаковые значения абсцисс |
||
| № | Код | Вид в браузере |
| 5.11.13 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Square" StrokeEndLineCap="Square"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Square", завершают линию обычным образом, но позволяют получить выступы по краям. |
||
| № | Код | Вид в браузере |
| 5.11.14 | ||
<Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com /winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Line X1="10" Y1="25" X2="190" Y2="25" Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"/> <Line X1="10" Y1="60" X2="190" Y2="60" Stroke="Red" StrokeThickness="50"/> </Canvas> |
|
|
| Описание | ||
Атрибуты StrokeStartLineCap и StrokeEndLineCap со значением "Triangle", завершают линию треугольным оформлением |
||
| № | Код | Вид в браузере |
| 5.11.15 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением ", принятым по умолчанию |
||
| № | Код | Вид в браузере |
| 5.11.16 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Round" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением "Round", задающим сглаженный изгиб |
||
| № | Код | Вид в браузере |
| 5.11.17 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="100" Background="White" x:Name="Page"> <Polyline Points="20,80 50,20 80,80" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Bevel" /> </Canvas> |
|
|
| Описание | ||
Атрибут StrokeLineJoin со значением "Bevel", задающим рубленый изгиб |
||
| № | Код | Вид в браузере |
| 5.11.18 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="100" Height="600" Background="White" x:Name="Page"> <Line X1="70" Y1="0" X2="70" Y2="600" Stroke="Black" StrokeThickness="1"/> <Line X1="95" Y1="0" X2="95" Y2="600" Stroke="Black" StrokeThickness="1"/> <Polyline Points="10,30 70,50 10,70" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="1" /> <Polyline Points=" 10,130 70,150 10,170" Stroke="Red" S trokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit="2" /> <Polyline Points=" 10,230 70,250 10,270" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="3" /> <Polyline Points=" 10,330 70,350 10,370" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="4" /> <Polyline Points=" 10,430 70,450 10,470" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit="5" /> <Polyline Points=" 10,530 70,550 10,570" Stroke="Red" StrokeThickness="15" StrokeLineJoin="Miter" StrokeMiterLimit ="6" /> </Canvas> |
|
|
| Описание | ||
В данном случае значения атрибута StrokeMiterLimit до четырех задают рубленый изгиб, равные и больше четырех – обычный |
||
Элемент Clip предназначен для отсекания заданной областью части изображения. Этот инструмент хорошо знаком пользователям графических программ, например, в Adobe Photoshop для таких задач имеются специальные инструменты (рис. 5.5):
(рис 5.5) Инструмент горизонтальный текст-маска в программе Adobe Photoshop
Код для элемента Clip выглядит так:
<Image Width="291" Height="195"
Source="sea2.jpg" Stretch="Fill" >
<Image.Clip>
<EllipseGeometry Center="150,100"
RadiusX="90" RadiusY="90" />
</Image.Clip>
</Image>
Внутри элемента определяется фигура, которая будет ограничивать изображения. Элемент Image предназначен для помещения в XAML – документ внешнего графического файла – в данном случае используется "sea2.jpg". В табл. 5.12 приводятся примеры использования элемента Clip.
| № | Код | Вид в браузере |
|---|---|---|
| 5.12.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<EllipseGeometry
Center="150,100"
RadiusX="90"
RadiusY="90" />
</Image.Clip>
</Image>
</Canvas>
|
|
|
| Описание | ||
Отсекание части изображения окружностью. Изображение "sea2.jpg" было добавлено в папку проекта (рис. 5.6): (рис 5.6) Содержимое проекта Silverlight-сайта
|
||
| № | Код | Вид в браузере |
| 5.12.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" Clip="M20,10 L280,10 L20, 190 L280,190 z" > </Image> </Canvas> |
|
|
| Описание | ||
Отсекание части изображения при помощи задания атрибута Clip |
||
| № | Код | Вид в браузере |
| 5.12.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<GeometryGroup>
<EllipseGeometry
Center="100,100"
RadiusX="90"
RadiusY="90" />
<EllipseGeometry
Center="200,100"
RadiusX="90"
RadiusY="90" />
</GeometryGroup>
</Image.Clip>
</Image>
</Canvas>
|
|
|
| Описание | ||
Отсекание изображения с помощью двух пересекающихся окружностей. Заметна центральная область, которая не стала маской. Для того чтобы получить полностью Нарисовать две окружности: <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" />
<Ellipse Width="180"
Height="180"
Canvas.Left = "5"
Fill="White"
Canvas.Top="10"/>
<Ellipse Width="180"
Height="180"
Canvas.Left = "105"
Fill="White"
Canvas.Top="10" />
</Canvas>
В режиме дизайна изображение будет выглядеть так (рис. 5.7): (рис 5.7) Подготовка к клипированию области
Объединить их с помощью пункта меню "Object \ Combine \ Unite" (рис. 5.8): (рис 5.8) Объединение фигур
В результате получиться код, представляемый объектом Path: <Canvas xmlns="http://schemas.microsoft.com /client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" /> <Path Width="280" Height="180" Fill="White" Stretch="Fill" Canvas.Left="5" Canvas.Top="10" Data="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171.49439,-1.1920927E-06 190,2.2737368E-13 C239.70563,-1.1920927E-06 280,40. 294371 280,89.999999 C280,139.70563 239.70563,180 190, 180 C171.49439,180 154.29328,174.41478 140,164.82373 C125.70672,174.41478 108.50561,180 89.999999,180 40. 294373,180 0,139.70563 0,89.999999 0,40.294371 40. 294373,-1.1920927E- 06 89.999999,2.2737368E- 13 z"/> </Canvas> Значение, содержащееся в атрибуте <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Image Width="291" Height="195" Source="sea2.jpg" Stretch="Fill" Clip="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171.49439,-1.1920927E-06 190,2. 2737368E-13 C239.70563,-1.1920927E -06 280,40.294371 280,89.999999 C280,139.70563 239.70563,180 190, 180 C171.49439,180 154.29328,174.41478 140,164.82373 C125.70672,174.41478 108.50561,180 89.999999,180 40.29 4373,180 0,139.70563 0,89.999999 0,40.294371 40.294373, -1.1920927E-06 89.999 999,2.2737368E-13 z" Canvas.Top="8" Canvas.Left="8" /> </Canvas> Теперь фигура действительно полностью клипирует изображение (рис. 5.9): (рис 5.9) Готовый результат объединения фигур
|
||
| № | Код | Вид в браузере |
| 5.12.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="291" Height="195" Background="White" x:Name="Page"> <Rectangle Width="291" Height="195" Canvas.Left="0" Canvas.Top="0" Fill="Black"/> <Image Width="291 " Height=" 195" Source="sea2.jpg" Stretch="Fill" Clip="M89.999999,2.2737368E-13 C108.50561,-1.1920927E-06 125.70672,5.5852163 140,15.17627 C154.29328,5.5852163 171. 49439,-1.1920927E-06 190,2.2737 368E-13 C239.70563,-1.1920927 E-06 280,40.294371 280,89.9 99999 C280,139.70563 239.705 63,180 190,180 C171.49439,180 154.29328,174.41478 140,164. 82373 C125.70672,174.41478 108.50561,180 89.999999,180 40.294373,180 0,139.70563 0,89.999999 0,40.294371 40. 294373,-1.1920927E-06 89.99 9999,2.2737368E-13 z" Canvas.Top="8" Canvas.Left="8" /> </Canvas> |
|
|
| Описание | ||
| Для оформления можно использовать дополнительные элементы | ||
| № | Код | Вид в браузере |
| 5.12.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Rectangle Width="291"
Height="195"
Canvas.Left="0"
Canvas.Top="0"
Fill="Pink"/>
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.Clip>
<EllipseGeometry
Center="150,100"
RadiusX="90"
RadiusY="90" />
</Image.Clip>
</Image>
<Ellipse Width = "180"
Height="180"
Canvas.Left = "60"
Canvas.Top="10"
Stroke="Red"
StrokeThickness="5"
StrokeDashArray="1,1" />
</Canvas>
|
|
|
| Описание | ||
| Для последовательности элементов, среди которых имеется элемент Image, справедлив тот же самый |
||
При работе с объектом Clip можно было заметить, что внутреннее оформление фигуры, определяемой внутри элемента, игнорируется. Элемент OpacityMask является инструментом, поддерживающим все свойства элемента Clip с учетом графической структуры заполнителя. Фрагмент кода для элемента OpacityMask выглядит так:
<Image Width="291"
Height="195" Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
Здесь в качестве заливки фигуры-заполнителя используется
| № | Код | Вид в браузере |
|---|---|---|
| 5.13.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="
Blue" Offset="0" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Применение в качестве заполнителя маски окружности с градиентной заливкой | ||
| № | Код | Вид в браузере |
| 5.13.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="
Blue" Offset="0.8" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Применение в качестве заполнителя маски окружности с градиентной заливкой. Уменьшением размера градиентной области достигается увеличение площади открытой поверхности | ||
| № | Код | Вид в браузере |
| 5.13.3 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<RadialGradientBrush >
<GradientStop Color="Red"
Offset="0.9" />
<GradientStop Color="
Transparent" Offset="1" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
<Rectangle Width="291"
Height="195" >
<Rectangle.Fill>
<RadialGradientBrush >
<GradientStop Color="
Transparent" Offset="0.8" />
<GradientStop Color="
Blue" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
|
|
|
| Описание | ||
При использовании заполнителя, заполненного градиентом любого цвета, на рисунке заметно уменьшение прозрачности белого цвета. Для получения нужного цвета используется комбинация обычного элемента OpacityMask и наложения |
||
| № | Код | Вид в браузере |
| 5.13.4 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291"
Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<ImageBrush ImageSource="fish.png"/>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
Применение в качестве заполнителя внешнего графического файла в формате PNG. Исходное изображение было подготовлено во внешнем графическом редакторе (рис. 5.10): (рис 5.10) Подготовка изображения в формате PNG
Далее оно также было добавлено в папку с проектом (рис. 5.11): (рис 5.11) Содержимое папки проекта
|
||
| № | Код | Вид в браузере |
| 5.13.5 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291"
Height="195"
Source="sea2.jpg"
Stretch="Fill" >
<Image.OpacityMask>
<ImageBrush
Viewport="0,0,50,50"
ViewportUnits="Absolute"
TileMode="Tile"
ImageSource="fish.png"/>
</Image.OpacityMask>
</Image>
</Canvas>
|
|
|
| Описание | ||
| Создание паттерна с помощью атрибута и "TileBrush.Viewport Property": http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.viewport.aspx | ||
| № | Код | Вид в браузере |
| 5.13.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="350" Height="200"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Top="5"
Canvas.Left="25"
FontFamily="Arial"
FontSize="150"
Foreground="Red"
>
АБВ
<TextBlock.OpacityMask>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<GradientStop
Color="Blue"
Offset="0" />
<GradientStop
Color="Transparent"
Offset="1.2" />
</LinearGradientBrush>
</TextBlock.OpacityMask>
</TextBlock>
</Canvas>
|
|
|
| Описание | ||
| Маскированный текст | ||
Мы закончили рассмотрение основных возможностей рисования, связанных с простой графикой.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.