如何使用自定义渲染器在Xamarin.Forms、安卓、iOs、UWP上更改滑雪器的颜色？
如何使用自定义渲染器在Xamarin.Forms、安卓、iOs、UWP上更改滑雪器的颜色？
提问于 2018-04-19 15:21:35
我已经成功地改变了Android上Slider的颜色，在这里创建了一个Custom示例。
[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??
}
}回答 4
Stack Overflow用户
回答已采纳
发布于 2018-04-19 18:21:39
iOS自定义渲染器
根据苹果文档，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();
}
}
}
}Stack Overflow用户
发布于 2018-04-20 17:35:11
UWP自定义渲染器
在App.xaml类中，为Slider创建自己的样式，添加一个带有Slider样式的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;
}
}
}
}Stack Overflow用户
发布于 2020-09-28 16:43:48
音轨颜色也可直接在Xamarin.Forms中使用。
Slider.MaximumTrackColor = Color.Red
Slider.MinimumTrackColor = Color.Green
Slider.ThumbColor = Color.Blu它们将相应地在不同的平台上呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49924715
复制相关文章
相似问题
腾讯云开发者
