Градиенты с XAML

Использование эффектов градиента с элементами градиента.

Мы видели, как залить поверхность цветом, или текстурой. Сложнее, но с удивительным эстетическим результатом, эти эффекты.

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

GradientStop

, атрибутами которого являются цвет и смещение в изображении, Offset - фактическое значение, указывающее начальную точку раскрашивания.

<GradientStop
  Color="Red"
  Offset="0.20" 
/>

Чтобы иметь эффект градиента, требуется по крайней мере два цвета, то есть два тега GradientStop. С помощью маяка у нас будет одинаковый цвет, и у нас будет столько же цветов, сколько и маяков ...
Каждый цвет начинается с указанного смещения и переходит к следующему смещению цвета (от следующего ГрадиентСтоп), но между началом и концом цвета цвет понижается в зависимости от следующего цвета.

Линейный градиент

Применяется к поверхности с элементом:

LinearGradientBrush

Он рисует градиентную поверхность от верхнего левого угла до нижнего правого угла.
Однако начальную и конечную точки можно изменить с помощью свойств:

StartPoint
Endpoint

Этим свойствам присваивается пара координат.

В нашем примере к поверхности применяется красно-белый градиент, поэтому нам нужны два градиента GradientStops:

<Rectangle
   Width="200"
   Height="100" >
    <Rectangle.Fill>
        <LinearGradientBrush>
             <GradientStop Color="White" Offset="0.50" />
             <GradientStop Color="Red" Offset="0.50" />
        </LinearGradientBrush>
    <Rectangle.Fill>
<Rectangle>

Отображение цветного прямоугольника с градиентом:

См. код XAML.

Радиальный градиент

Будет получен круговой градиент с тегом:

RadialGradientBrush

Свойства LineraGradientBrush.
В нашем примере смещение светлого цвета составит 1 от края, а красного цвета - 0,50 для толщины градиента половины радиуса:

<LinearGradientBrush>
      <GradientStop Color="White" Offset="1" />
      <GradientStop Color="Red" Offset="0.50" />
</LinearGradientBrush>

Пример:

См. полный код XAML.