如何使用自定义渲染器在 Xamarin.Forms、Android、iOs、UWP 上更改滑块的颜色？

Question

我已经成功更改了 Android 上 Slider 的颜色，创建了一个自定义渲染器这里是示例。

[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 (e.NewElement != null)
            {
                string colorSlider = "#008000";
                Control.ProgressDrawable.SetColorFilter(Xamarin.Forms.Color.FromHex(colorSlider).ToAndroid(), PorterDuff.Mode.SrcIn);

            // Set Progress bar Thumb color
            Control.Thumb.SetColorFilter(
                Xamarin.Forms.Color.FromHex(colorSlider).ToAndroid(),
                PorterDuff.Mode.SrcIn);
            }
        }
    }
}

如何在 iOS 和 UWP 中实现这一点？

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

    if (e.NewElement != null)
    {
        string colorSlider = "#008000";
        //What do I put here??
    }
}

Answer 1

iOS 自定义渲染器

根据Apple Docs，UISlider 有三个我们需要更新的属性：

• MaximumTrackTintColor
  • 指定滑块滑块前侧轨道的色调颜色。该值默认为滑块继承的色调颜色。在运行时使用 minimumTrackTintColor 属性访问此值。
• MinimumTrackTintColor
  • 指定滑块滑块尾部的轨道色调颜色。在运行时使用 maximumTrackTintColor 属性访问此值。
• ThumbTintColor
  • 控制滑块拇指的色调颜色。在运行时使用 thumbTintColor 属性访问此值

代码

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

            if (Control != null)
            {
                const string colorSlider = "#008000";

                Control.MaximumTrackTintColor = Color.FromHex(colorSlider).ToUIColor();
                Control.MinimumTrackTintColor = Color.FromHex(colorSlider).ToUIColor();
                Control.ThumbTintColor = Color.FromHex(colorSlider).ToUIColor();
            }
        }
    }
}

Answer 2

UWP 自定义渲染器

在您的 App.xaml 类中，您为滑块创建自己的样式，使用您的滑块样式添加 Application.Resources 标记

<Application
    x:Class="ForteMultiplataform.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ForteMultiplataform.UWP"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="styledSlider" TargetType="Slider">
                <Setter Property="Background" Value="#0C720B"/>
                <Setter Property="BorderBrush" Value="#129E11"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Foreground" Value="#24DB23"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Slider">
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.Resources>
                                    <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                        <Setter Property="BorderThickness" Value="2"/>
                                        <Setter Property="BorderBrush" Value="#0C720B"/>
                                        <Setter Property="Foreground" Value="#129E11"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Thumb">
                                                    <Ellipse StrokeThickness="2" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Foreground}"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="SliderContainer" Background="Transparent" Grid.Row="1">
                                    <Grid x:Name="HorizontalTemplate">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="17"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="17"/>
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Background}" Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
                            Grid.Column="1" DataContext="{TemplateBinding Value}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Height="25" Width="25"/>
                                    </Grid>
                                    <Grid x:Name="VerticalTemplate" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="17"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="17"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="VerticalTrackRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.RowSpan="3" Width="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.Row="2"/>
                                        <Rectangle x:Name="VerticalBorder" Grid.RowSpan="3" Grid.Column="1"  Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}" Width="10" RadiusX="5" RadiusY="5" />
                                        <Thumb x:Name="VerticalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
                            Grid.Column="1" DataContext="{TemplateBinding Value}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Height="15" Width="25"/>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

</Application>

然后在您的自定义渲染器中加载此样式

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

            if (e.NewElement != null)
            {
                Windows.UI.Xaml.Style sliderStyle = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["styledSlider"];
                Control.Style = sliderStyle;
            }
        }
    }
}

Answer 3

轨道颜色也可直接在 Xamarin.Forms 中使用

Slider.MaximumTrackColor = Color.Red
Slider.MinimumTrackColor = Color.Green
Slider.ThumbColor        = Color.Blu

它们将相应地在不同的平台上呈现。

Answer 4

我刚刚意识到，在 Android 上也可以更改 Xamarin.Android 项目的“styles.xml”文件上的属性“colorAccent”：

<item name="colorAccent">#008000</item>

这也会改变其他 GUI 组件的颜色，例如 Switch。