Avalonia 关于渐变色的使用教程

Avalonia 使用渐变色吧

一、前言

本文主要研究的是 LinearGradientBrush 线性渐变色，不会涉及 RadialGradientBrush。

下一篇文章则会介绍如何实现渐变色动画。

二、在 Avalonia 添加渐变色

渐变色的效果是这样的：

你可以使用以下两种方式，这是第一种，使用实际：

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

你也可以使用以下这种方式：

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="50,50">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1. 实际像素值决定的起始点设定（不推荐）

你可以使用 StartPoint 和 EndPoint 指定渐变色的规模大小，如果说渐变色尺寸比填充要小，默认会使用边界的颜色延伸填满，你可以填入像素的实际尺寸。

我们将提供一些例子，请往下看吧。

2. 百分比表示的起始点设定（推荐）

在官方的设定中 https://docs.avaloniaui.net/zh-Hans/docs/guides/graphics-and-animation/gradients ，使用 100%、50% 的百分比设定会是更推荐的选择。

1.1 默认或者全部铺满的样子

这是一个默认全部铺满的效果。通过指定 StartPoint 和 EndPoint 为矩形的尺寸 100 x 100，保证填满。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

当然你也可以不指定 StartPoint 和 EndPoint，默认的样子就是如此，就像下面那样。

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

1.2 从右上角到左下角的样子

从右上角到左下角的渐变，这里直接指定了方向是从 (100%, 0%)-> (0%, 100%)。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.3 从左下角到右上角的样子

从左下角到右上角的样子，这边直接指定了方向从 (0%, 100%) -> (100%, 0%)。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0%,100%" EndPoint="100%,0%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

1.4 从右下角到左上角的样子

从右下角到左上角的样子。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="100%,100%" EndPoint="0%,0%">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

2. 关于颜色

Avalonia 和 WPF 一样，在填充颜色时有基本的自由，请看下面的例子吧。

2.1 为渐变色添加更多过渡颜色

Avalonia 的渐变色当然也是支持多颜色的，你大可以增加你想要的颜色。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="Red" />
            <GradientStop Offset="1" Color="Purple" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

2.2 使用 RGB 和 Hex 值设定颜色

Avalonia 的渐变色当然也是支持多颜色的，你大可以增加你想要的颜色。
在这里我们使用了 #66ccff 和 rgb(255,0,0) 来进行颜色的设定，你肯定也能够看到，展示的图片渐变色中也的确是这两个颜色。

为了方便 AI 总结，这边也提供一个结论：在 Avalonia 中，除了预设颜色之外，你还可以使用十六进制色值 Hex 和 rgb 颜色。

其中：

十六进制 Hex 值格式参考：#66ccff、#66CCFF；
rgb 格式参考：rgb(255,0,0)。

<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="#66ccff" />
            <GradientStop Offset="1" Color="rgb(255,0,0)" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

3. 在 C# 中的交互操作

3.1 在 C# 中对 Avalonia 对象填充渐变色

我们想来介绍一下，通过编写 C# 实现对 Avalonia 的对象（在这个示例里面是这个 100 x 100 的矩形），来对其实现渐变色填充。

它和前面的一个示例是差不多的，就像这样：

我们对示例图像的 axaml 进行了更改，现在它具有了一个事件，在它加载时会触发它的 Loaded 事件，然后执行 Loaded 订阅的我们自定义的 C# 代码。

其中 axaml 部分的变动如下：

<Rectangle
    Width="100"
    Height="100"
    Loaded="Rectangle_Loaded" />

代码的实现请看此处，这边的起始点填入的是绝对路径，当然，你也可以使用相对路径。

private void Rectangle_Loaded(
    object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    var rectangle = sender as Rectangle;
    if (rectangle is null) return;

    var gradientBrush = new LinearGradientBrush();
    var startPoint = new RelativePoint(x: 0, y: 0, RelativeUnit.Absolute);
    var endPoint = new RelativePoint(x: 100, y: 100, RelativeUnit.Absolute);

    gradientBrush.StartPoint = startPoint;
    gradientBrush.EndPoint = endPoint;

    // 使用静态类的只读资源。
    var color0 = Colors.White;

    // 使用 Hex 转换。
    var color1 = ColorToHexConverter.ParseHexString(
        hexColor: "#66ccff",
        alphaPosition: AlphaComponentPosition.Leading).Value;

    // 使用 Color.FromRgb()
    var color2 = Color.FromRgb(255, 0, 0);

    // 创建 stop，并且添加到渐变色上。
    var stop0 = new GradientStop(color: color0, offset: 0);
    var stop1 = new GradientStop(color: color1, offset: 0.5);
    var stop2 = new GradientStop(color: color2, offset: 1);

    gradientBrush.GradientStops.Add(item: stop0);
    gradientBrush.GradientStops.Add(item: stop1);
    gradientBrush.GradientStops.Add(item: stop2);

    // 将矩形的填充设置为该渐变色。
    rectangle.Fill = gradientBrush;
}

3.2 通过 C# 获取在 axaml 中已经定义的颜色

我们将定义以下的内容，将这个矩形指定了 PART_Rectangle 这个名称：

<Rectangle
    x:Name="PART_Rectangle"
    Width="100"
    Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="0.5" Color="#66ccff" />
            <GradientStop Offset="1" Color="rgb(255,0,0)" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

然后我们通过 C#代码来访问其内容：

var rectangle = PART_Rectangle;
var gradientBrush = rectangle.Fill as LinearGradientBrush;
var gradientStop = gradientBrush.GradientStops[1];

var color = gradientStop.Color;
Debug.WriteLine($"rectangle gradient stop {color}");

得到的输出如下：

rectangle gradient stop #ff66ccff

除了读取，对于写入也是没有问题的，就像这样，将其中第二段颜色改为了绿色。

修改的代码就像这个样子。

var rectangle = PART_Rectangle;
var gradientBrush = rectangle.Fill as LinearGradientBrush;
var gradientStop = gradientBrush.GradientStops[1];

gradientStop.Color = Colors.Green;

三、本文干了什么

本文主要的研究目标是 Avalonia 的渐变色，其中本文以 Rectangle 作为主要的测试载体，在其上面通过设置不同的渐变色对象来对渐变色的效果和使用方式进行了研究，除了提供 axaml 之外还提供了 C# 代码用来展示如何自行为填充属性设置自定义的渐变色填充。

posted @ 2025-02-25 13:23 fanbal 阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

fanbal