如何在MAUI中实现CSS的background-repeat: repeat效果？

我已为MAUI应用添加了背景图且运行正常，但需要实现图片重复平铺的效果，等同于CSS中的background-repeat: repeat。当前使用的代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CartographersMapGenerator.View.Testing"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Testing">
    <Grid>
        <Image Aspect="AspectFit" Source="dotnet_bot.png" />
        <Grid>
            <Label>
                All page content goes here
            </Label>
        </Grid>
       
    </Grid>
</ContentPage>

当前代码运行效果：

解决方案：使用SkiaSharp实现跨平台平铺背景 #

MAUI原生Image控件不支持平铺属性，推荐用SkiaSharp实现跨平台的图片平铺效果，步骤如下：

1. 安装SkiaSharp依赖 #

在项目中安装SkiaSharp.Views.Maui NuGet包。

2. 创建自定义平铺背景View #

新建TiledBackgroundView.cs类：

using SkiaSharp;
using SkiaSharp.Views.Maui;

namespace CartographersMapGenerator;

public class TiledBackgroundView : SKCanvasView
{
    public static readonly BindableProperty ImageSourceProperty =
        BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(TiledBackgroundView), null, propertyChanged: OnImageSourceChanged);

    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }

    private SKBitmap _bitmap;

    private static async void OnImageSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is TiledBackgroundView view && newValue is ImageSource source)
        {
            view._bitmap = await LoadBitmapAsync(source, view);
            view.InvalidateSurface();
        }
    }

    private static async Task<SKBitmap> LoadBitmapAsync(ImageSource source, VisualElement view)
    {
        if (source is FileImageSource fileSource)
        {
            var assembly = view.GetType().Assembly;
            using var stream = assembly.GetManifestResourceStream($"CartographersMapGenerator.Resources.Images.{fileSource.File}");
            if (stream != null)
            {
                return SKBitmap.Decode(stream);
            }
        }
        // 可扩展支持UriImageSource等其他类型
        return null;
    }

    protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        base.OnPaintSurface(e);
        var canvas = e.Surface.Canvas;
        canvas.Clear();

        if (_bitmap == null) return;

        int width = e.Info.Width;
        int height = e.Info.Height;

        // 计算平铺行列数
        int rows = (int)Math.Ceiling((double)height / _bitmap.Height);
        int cols = (int)Math.Ceiling((double)width / _bitmap.Width);

        // 循环绘制平铺图片
        for (int y = 0; y < rows; y++)
        {
            for (int x = 0; x < cols; x++)
            {
                canvas.DrawBitmap(_bitmap, x * _bitmap.Width, y * _bitmap.Height);
            }
        }
    }
}

3. 在XAML中使用自定义View #

修改页面XAML，替换原有Image控件：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CartographersMapGenerator.View.Testing"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:CartographersMapGenerator"
    Title="Testing">
    <Grid>
        <!-- 平铺背景 -->
        <local:TiledBackgroundView ImageSource="dotnet_bot.png" />
        <!-- 上层内容 -->
        <Grid>
            <Label Text="All page content goes here" />
        </Grid>
    </Grid>
</ContentPage>

补充说明 #

• 确保图片资源的生成操作设置为Embedded resource
• 若需实现repeat-x或repeat-y，只需修改绘制循环的逻辑（仅循环x轴或y轴）
• 该方案支持Android、iOS、Windows、MacCatalyst全平台

内容的提问来源于stack exchange，提问作者rCgLT