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 属性更改渐变轴的方向和大小。 通过操作这些属性，可以创建水平、垂直和对角线渐变、反转渐变方向和压缩渐变扩散等。

StartPoint 和 EndPoint 属性是相对于绘制区域而言的。 (0,0) 表示正在绘制区域的左上角，(1,1) 表示正在绘制区域的右下角。 下图显示对角线线性渐变画笔的渐变轴：

在该图中，虚线表示渐变轴，突出显示渐变从起点到终点的内插路径。

创建水平线性渐变

如果要创建水平线性渐变，请创建 LinearGradientBrush 对象并将其 StartPoint 设置为 (0,0)，将其 EndPoint 设置为 (1,0)。 然后，在 LinearGradientBrush.GradientStops 集合中添加两个或多个 GradientStop 对象，以便指定渐变的颜色及其位置。

下列 XAML 示例显示水平 LinearGradientBrush，其被设置为 Frame 的 Background：

<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，从黄色到绿色水平内插：

创建垂直线性渐变

如果要创建垂直线性渐变，请创建 LinearGradientBrush 对象并将其 StartPoint 设置为 (0,0)，将其 EndPoint 设置为 (0,1)。 然后，在 LinearGradientBrush.GradientStops 集合中添加两个或多个 GradientStop 对象，以便指定渐变的颜色及其位置。

下列 XAML 示例显示垂直 LinearGradientBrush 设置为 Frame 的 Background：

<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 从黄色垂直内插到绿色：

创建对角线线性渐变

如果要创建对角线线性渐变，请创建 LinearGradientBrush 对象，并将其 StartPoint 设置为(0,0)，将其 EndPoint 设置为 (1.1)。 然后，在 LinearGradientBrush.GradientStops 集合中添加两个或多个 GradientStop 对象，以便指定渐变的颜色及其位置。

下列 XAML 示例显示对角线 LinearGradientBrush，该对角线被设置为 Frame 的 Background ：

<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：

相关链接

• Xamarin.Forms 画笔：渐变