iOS自定义渲染器

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类中，为Slider创建自己的Style，使用Slider Style添加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

我刚才意识到在Android上也有可能改变自然＆＃34; colorAccent＆＃34;在＆＃34; styles.xml＆＃34;你的Xamarin.Android项目的文件：

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

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

Answer 4

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

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

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

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

4 个答案:

iOS自定义渲染器

代码