Поделиться через

Xamarin.Forms Кисти: линейные градиенты

  • Статья

Класс LinearGradientBrush является производным от GradientBrush класса и красит область с линейным градиентом, который смешает два или более цветов вдоль линии, известной как градиентная ось. GradientStop объекты используются для указания цветов в градиенте и их позициях. Дополнительные сведения об объектах см. в GradientStop разделе Xamarin.Forms Кисти: Градиенты.

Класс LinearGradientBrush определяет следующие свойства:

  • StartPointтип Point, представляющий начальные двухмерные координаты линейного градиента. Значение по умолчанию этого свойства — 0,0.
  • EndPointтип Point, представляющий конечные двухмерные координаты линейного градиента. Значение по умолчанию этого свойства — (1,1).

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Класс LinearGradientBrush также является методом IsEmpty , который возвращает bool значение, представляющее, назначена ли кисть любым GradientStop объектам.

Примечание.

Линейные градиенты также можно создать с linear-gradient() помощью функции CSS.

Создание linearGradientBrush

Градиентные остановки градиентной кисти линейной градиентной кисти расположены вдоль оси градиента. Ориентация и размер оси градиента можно изменить с помощью кисти StartPoint и EndPoint свойств. Управляя этими свойствами, можно создавать горизонтальные, вертикальные и диагоналиные градиенты, изменить направление градиента, сжать распространение градиента и многое другое.

EndPoint Свойства StartPoint относятся к крашенной области. (0,0) представляет верхний левый угол крашенной области, а (1,1) представляет нижний правый угол крашенной области. На следующей схеме показана градиентная ось для диагонали линейной градиентной кисти:

Кадр с диагональной градиентной осью

На этой схеме пунктирная линия показывает градиентную ось, которая выделяет путь интерполяции градиента от начальной точки до конечной точки.

Создание горизонтального линейного градиента

Чтобы создать горизонтальный линейный градиент, создайте LinearGradientBrush объект и задайте его значение (0,0) и его StartPoint EndPoint значение (1,0). Затем добавьте два или более GradientStop объектов LinearGradientBrush.GradientStops в коллекцию, которые указывают цвета в градиенте и их позициях.

В следующем примере XAML показано горизонтальное LinearGradientBrush значение, заданное в виде Background Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame рисуется с LinearGradientBrush помощью интерполяции от желтого до зеленого по горизонтали:

Фрейм, окрашенный горизонтальным линейным ГрадиентомBrush

Создание вертикального линейного градиента

Чтобы создать вертикальный линейный градиент, создайте LinearGradientBrush объект и задайте его значение (0,0) и его StartPoint EndPoint значение (0,1). Затем добавьте два или более GradientStop объектов LinearGradientBrush.GradientStops в коллекцию, которые указывают цвета в градиенте и их позициях.

В следующем примере XAML показана вертикальная LinearGradientBrush , заданная в виде Background Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame рисуется с LinearGradientBrush помощью интерполяции от желтого до зеленого по вертикали:

Рамка, окрашенная с помощью вертикального линейногоградиентаBrush

Создание диагонали линейного градиента

Чтобы создать диагональный линейный градиент, создайте LinearGradientBrush объект и задайте для нее значение (0,0) и EndPoint его StartPoint значение (1,1). Затем добавьте два или более GradientStop объектов LinearGradientBrush.GradientStops в коллекцию, которые указывают цвета в градиенте и их позициях.

В следующем примере XAML показана диагонали LinearGradientBrush , заданная в виде Background Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame рисуется с LinearGradientBrush помощью интерполяции от желтого к зеленому диагонали:

Фрейм, окрашенный диагоналией LinearGradientBrush