如何通过自定义渲染器修改Xamarin.Forms中Android/iOS/UWP的Slider颜色？

很棒！你已经成功搞定了Android平台的Slider自定义渲染器，接下来我把iOS和UWP平台的实现方案整理好，再补充完善Android的代码，帮你实现全平台的Slider颜色自定义～

第一步：在共享项目中定义自定义Slider #

首先在Xamarin.Forms共享项目里创建一个继承自Slider的CustomSlider类，我们可以添加自定义绑定属性，方便在XAML中直接设置轨道和滑块颜色：

using Xamarin.Forms;

namespace ForteMultiplataform
{
    public class CustomSlider : Slider
    {
        // 自定义轨道颜色属性
        public static readonly BindableProperty TrackColorProperty = BindableProperty.Create(
            nameof(TrackColor),
            typeof(Color),
            typeof(CustomSlider),
            Color.Default);

        public Color TrackColor
        {
            get => (Color)GetValue(TrackColorProperty);
            set => SetValue(TrackColorProperty, value);
        }

        // 自定义滑块颜色属性
        public static readonly BindableProperty ThumbColorProperty = BindableProperty.Create(
            nameof(ThumbColor),
            typeof(Color),
            typeof(CustomSlider),
            Color.Default);

        public Color ThumbColor
        {
            get => (Color)GetValue(ThumbColorProperty);
            set => SetValue(ThumbColorProperty, value);
        }
    }
}

Android平台（完善你的现有代码） #

你已经有了基础渲染器，这里补充完整实现，包括不同Android版本的兼容（Android 5.0+和旧版本的API差异）：

using Android.Content;
using Android.Graphics;
using Android.Widget;
using ForteMultiplataform;
using ForteMultiplataform.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace ForteMultiplataform.Droid
{
    public class CustomSliderRenderer : SliderRenderer
    {
        public CustomSliderRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null)
                return;

            var customSlider = (CustomSlider)e.NewElement;

            // 设置滑块颜色
            Control.Thumb.SetColorFilter(customSlider.ThumbColor.ToAndroid(), PorterDuff.Mode.SrcIn);

            // 设置轨道颜色：区分已滑动和未滑动部分
            if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop)
            {
                Control.ProgressTintList = ColorStateList.ValueOf(customSlider.TrackColor.ToAndroid());
                Control.ProgressBackgroundTintList = ColorStateList.ValueOf(Color.Gray.ToAndroid()); // 未滑动部分颜色，可自定义
            }
            else
            {
                // 兼容Android 5.0以下版本，需要修改Drawable
                var progressDrawable = Control.ProgressDrawable.Mutate();
                progressDrawable.SetColorFilter(customSlider.TrackColor.ToAndroid(), PorterDuff.Mode.SrcIn);
                Control.ProgressDrawable = progressDrawable;
            }
        }

        // 当自定义属性变化时更新UI
        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CustomSlider.TrackColorProperty.PropertyName ||
                e.PropertyName == CustomSlider.ThumbColorProperty.PropertyName)
            {
                OnElementChanged(new ElementChangedEventArgs<Slider>(Element, Element));
            }
        }
    }
}

iOS平台实现 #

iOS对应的原生控件是UISlider，我们直接设置轨道和滑块的TintColor即可：

using ForteMultiplataform;
using ForteMultiplataform.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace ForteMultiplataform.iOS
{
    public class CustomSliderRenderer : SliderRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null)
                return;

            var customSlider = (CustomSlider)e.NewElement;

            // 已滑动部分轨道颜色
            Control.MinimumTrackTintColor = customSlider.TrackColor.ToUIColor();
            // 未滑动部分轨道颜色
            Control.MaximumTrackTintColor = UIColor.Gray; // 可根据需求自定义
            // 滑块颜色
            Control.ThumbTintColor = customSlider.ThumbColor.ToUIColor();
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CustomSlider.TrackColorProperty.PropertyName ||
                e.PropertyName == CustomSlider.ThumbColorProperty.PropertyName)
            {
                OnElementChanged(new ElementChangedEventArgs<Slider>(Element, Element));
            }
        }
    }
}

UWP平台实现 #

UWP的Slider需要修改Foreground（已滑动轨道）、Background（未滑动轨道），还需要找到Thumb控件来设置滑块颜色：

using ForteMultiplataform;
using ForteMultiplataform.UWP;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace ForteMultiplataform.UWP
{
    public class CustomSliderRenderer : SliderRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null)
                return;

            var customSlider = (CustomSlider)e.NewElement;

            // 已滑动轨道颜色
            Control.Foreground = new SolidColorBrush(customSlider.TrackColor.ToWindowsColor());
            // 未滑动轨道颜色
            Control.Background = new SolidColorBrush(Windows.UI.Colors.Gray); // 可自定义

            // 设置滑块颜色：通过ControlTemplate找到Thumb控件
            var thumb = Control.Template.FindName("HorizontalThumb", Control) as Windows.UI.Xaml.Controls.Primitives.Thumb;
            if (thumb != null)
            {
                thumb.Background = new SolidColorBrush(customSlider.ThumbColor.ToWindowsColor());
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CustomSlider.TrackColorProperty.PropertyName ||
                e.PropertyName == CustomSlider.ThumbColorProperty.PropertyName)
            {
                OnElementChanged(new ElementChangedEventArgs<Slider>(Element, Element));
            }
        }
    }
}

如何使用自定义Slider #

在XAML页面中引用自定义Slider，直接设置我们定义的颜色属性即可：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ForteMultiplataform"
             x:Class="ForteMultiplataform.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center">
        <local:CustomSlider 
            TrackColor="#2196F3" 
            ThumbColor="#FFC107"
            Minimum="0" 
            Maximum="100" 
            Value="50" 
            HeightRequest="40" />
    </StackLayout>
</ContentPage>

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