.NET MAUI中如何为Image控件添加Chrome、Cold等滤镜效果？

核心实现思路 #

.NET MAUI没有内置预设的风格化滤镜，需通过自定义Handler（替代旧版CustomRenderer）对接各平台原生图像API实现。以下是针对Android、iOS/macOS的可行方案，解决你之前用PlatformBehavior未成功的问题。

1. 共享层定义滤镜参数 #

先在共享项目中定义滤镜类型枚举和附加属性，用于在XAML或代码中绑定滤镜设置：

using Microsoft.Maui.Controls;

namespace MauiImageFilters;

public enum ImageFilterType
{
    None,
    Chrome,
    Warm,
    Cold
}

public static class ImageFilterProperties
{
    public static readonly BindableProperty FilterTypeProperty =
        BindableProperty.CreateAttached(
            "FilterType",
            typeof(ImageFilterType),
            typeof(ImageFilterProperties),
            ImageFilterType.None,
            propertyChanged: OnFilterTypeChanged);

    public static ImageFilterType GetFilterType(BindableObject view)
    {
        return (ImageFilterType)view.GetValue(FilterTypeProperty);
    }

    public static void SetFilterType(BindableObject view, ImageFilterType value)
    {
        view.SetValue(FilterTypeProperty, value);
    }

    private static void OnFilterTypeChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is Image image)
        {
            image.Handler?.UpdateValue(nameof(IImage.Source));
        }
    }
}

2. Android平台实现 #

在Android项目中，通过ColorMatrixColorFilter实现滤镜效果，自定义ImageHandler：

using Android.Graphics;
using Microsoft.Maui.Platform;

namespace MauiImageFilters.Platforms.Android;

public class FilteredImageHandler : ImageHandler
{
    protected override void ConnectHandler(ImageView platformView)
    {
        base.ConnectHandler(platformView);
        UpdateFilter();
    }

    protected override void SetValue(string propertyName)
    {
        base.SetValue(propertyName);
        if (propertyName == nameof(IImage.Source) || propertyName == ImageFilterProperties.FilterTypeProperty.PropertyName)
        {
            UpdateFilter();
        }
    }

    private void UpdateFilter()
    {
        if (VirtualView is not Image image || PlatformView is not ImageView imageView)
            return;

        var filterType = ImageFilterProperties.GetFilterType(image);
        ColorMatrix colorMatrix = new();

        switch (filterType)
        {
            case ImageFilterType.Chrome:
                // 增强饱和度与对比度模拟Chrome滤镜
                colorMatrix.SetSaturation(1.5f);
                colorMatrix.SetContrast(1.2f);
                break;
            case ImageFilterType.Warm:
                // 暖色调：提升红/黄通道，降低蓝通道
                float[] warmMatrix = {
                    1.2f, 0, 0, 0, 0,
                    0, 1.1f, 0, 0, 0,
                    0, 0, 0.9f, 0, 0,
                    0, 0, 0, 1, 0
                };
                colorMatrix.Set(warmMatrix);
                break;
            case ImageFilterType.Cold:
                // 冷色调：提升蓝通道，降低红/黄通道
                float[] coldMatrix = {
                    0.9f, 0, 0, 0, 0,
                    0, 0.95f, 0, 0, 0,
                    0, 0, 1.2f, 0, 0,
                    0, 0, 0, 1, 0
                };
                colorMatrix.Set(coldMatrix);
                break;
            default:
                colorMatrix.SetSaturation(1);
                break;
        }

        imageView.SetColorFilter(new ColorMatrixColorFilter(colorMatrix));
    }
}

在Android项目的MauiProgram.cs中注册Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler(typeof(Image), typeof(FilteredImageHandler));
#endif
});

3. iOS/macOS平台实现 #

在iOS/macOS项目中，利用CoreImage的CIFilter实现滤镜：

using CoreImage;
using CoreGraphics;
using Microsoft.Maui.Platform;
using UIKit;

namespace MauiImageFilters.Platforms.iOS;

public class FilteredImageHandler : ImageHandler
{
    protected override void ConnectHandler(UIImageView platformView)
    {
        base.ConnectHandler(platformView);
        UpdateFilter();
    }

    protected override void SetValue(string propertyName)
    {
        base.SetValue(propertyName);
        if (propertyName == nameof(IImage.Source) || propertyName == ImageFilterProperties.FilterTypeProperty.PropertyName)
        {
            UpdateFilter();
        }
    }

    private void UpdateFilter()
    {
        if (VirtualView is not Image image || PlatformView is not UIImageView imageView || imageView.Image == null)
            return;

        var filterType = ImageFilterProperties.GetFilterType(image);
        CIImage ciImage = CIImage.FromImage(imageView.Image);
        CIFilter? filter = null;

        switch (filterType)
        {
            case ImageFilterType.Chrome:
                // 系统预设Chrome滤镜
                filter = CIFilter.FromName("CIPhotoEffectChrome");
                break;
            case ImageFilterType.Warm:
                // 调整白点实现暖色调
                filter = CIFilter.FromName("CIWhitePointAdjust");
                filter.SetValue(CIColor.FromCGColor(UIColor.FromRGB(255, 200, 150).CGColor), "inputColor");
                break;
            case ImageFilterType.Cold:
                // 调整白点实现冷色调
                filter = CIFilter.FromName("CIWhitePointAdjust");
                filter.SetValue(CIColor.FromCGColor(UIColor.FromRGB(150, 200, 255).CGColor), "inputColor");
                break;
        }

        if (filter != null)
        {
            filter.SetValue(ciImage, kCIInputImageKey);
            CIContext context = CIContext.Create();
            CGImage cgImage = context.CreateCGImage(filter.OutputImage!, filter.OutputImage!.Extent);
            imageView.Image = UIImage.FromImage(cgImage);
        }
        else
        {
            imageView.Image = UIImage.FromImage(ciImage);
        }
    }
}

在iOS/macOS项目的MauiProgram.cs中注册Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS || MACCATALYST
    handlers.AddHandler(typeof(Image), typeof(FilteredImageHandler));
#endif
});

4. 实际使用示例 #

在XAML中直接为Image控件附加滤镜属性：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiImageFilters"
             x:Class="MauiImageFilters.MainPage">

    <StackLayout Padding="20" Spacing="10">
        <Image Source="test.jpg" 
               local:ImageFilterProperties.FilterType="Chrome"
               HeightRequest="300" />

        <Image Source="test.jpg" 
               local:ImageFilterProperties.FilterType="Warm"
               HeightRequest="300" />

        <Image Source="test.jpg" 
               local:ImageFilterProperties.FilterType="Cold"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>

问题排查提示 #

• 之前用PlatformBehavior失败，多是因为Behavior生命周期与原生视图绑定时机不匹配，自定义Handler能更精准控制视图更新逻辑。
• 确保图像资源路径正确（Android放在Resources/drawable，iOS放在Resources/Images）。
• 可根据需求调整ColorMatrix或CIFilter参数，优化滤镜效果。

内容的提问来源于stack exchange，提问作者Karthik Raja AKR