Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1544 / 153 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Лекция 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