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

  • Статья

Download Sample Скачайте пример

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

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

  • Centerтип Point, представляющий центральную точку круга для радиального градиента. Значением по умолчанию этого свойства является (0,5,0,5).
  • Radiusdoubleтип, представляющий радиус круга радиального градиента. Значение по умолчанию этого свойства равно 0,5.

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

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

Примечание.

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

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

Градиентные остановки градиента радиальной кисти расположены вдоль оси градиента, определенной кругом. Градиентная ось сияет от центра круга до его окружности. Положение и размер круга можно изменить с помощью кисти Center и Radius свойств. Круг определяет конечную точку градиента. Поэтому градиентная остановка в 1.0 определяет цвет по окружности. Градиентная остановка в 0.0 определяет цвет в центре круга.

Чтобы создать радиальный градиент, создайте RadialGradientBrush объект и задайте его Center и Radius свойства. Затем добавьте два или более GradientStop объектов RadialGradientBrush.GradientStops в коллекцию, которые указывают цвета в градиенте и их позициях.

В следующем примере XAML показано RadialGradientBrush , как задано BackgroundFrameзначение :

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
        <RadialGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.1" />
            <GradientStop Color="DarkBlue"
                          Offset="1.0" />
        </RadialGradientBrush>
    </Frame.Background>
</Frame>

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

Frame painted with a centered RadialGradientBrush

В следующем примере XAML центр радиального градиента перемещается в левый верхний угол:Frame

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

В этом примере фон Frame рисуется с RadialGradientBrush помощью интерполяции от красного до темно-синего. Центр радиального градиента расположен в левом верхнем углу Frame:

Frame painted with a top-left RadialGradientBrush

Следующий пример XAML перемещает центр радиального градиента в правый нижний угол Frame:

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="1.0,1.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

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

Frame painted with a bottom-right RadialGradientBrush