Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1541 / 149 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Теги: bezier curve, condenser, deep zoom, deep zoom composer, javascript, microsoft word, miter, monotype, nonzero, quadratic, silverlight, анимация, браузеры, вертикальный порядок, видео, графика, интерфейсы, приложения, радиальный градиент, редакторы, форматы, цвета, элементы
Лекция 5:

Рисование
A
|
версия для печати
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >
Таблица 5.3. Элемент LinearGradientBrush, атрибут 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. Элемент LinearGradientBrush, направление градиента
№ Код Вид в браузере
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>
Дальше >>
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >

Вопросы и ответы

вопросов: 0