如何在.NET MAUI中自定义音量滑块厚度并添加文本？

1. 调厚滑块 #

默认Slider没有直接设置轨道厚度的属性，你可以通过自定义Handler修改不同平台的轨道高度：

Android 平台 #

在Platforms/Android/Handlers/CustomSliderHandler.cs中：

using Android.Widget;
using Microsoft.Maui.Handlers;

namespace YourAppName.Platforms.Android.Handlers;

public class CustomSliderHandler : SliderHandler
{
    protected override void ConnectHandler(SeekBar platformView)
    {
        base.ConnectHandler(platformView);
        // 设置轨道厚度（单位：像素）
        platformView.ProgressDrawable.SetBounds(0, 0, platformView.Width, 20);
    }
}

iOS 平台 #

在Platforms/iOS/Handlers/CustomSliderHandler.cs中：

using UIKit;
using Microsoft.Maui.Handlers;

namespace YourAppName.Platforms.iOS.Handlers;

public class CustomSliderHandler : SliderHandler
{
    protected override void ConnectHandler(UISlider platformView)
    {
        base.ConnectHandler(platformView);
        // 设置轨道厚度（单位：点）
        platformView.TrackHeight = 20;
    }
}

然后在MauiProgram.cs中注册Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<Slider, Platforms.Android.Handlers.CustomSliderHandler>();
#elif IOS
    handlers.AddHandler<Slider, Platforms.iOS.Handlers.CustomSliderHandler>();
#endif
});

2. 滑块上方添加文本 #

用VerticalStackLayout将文本标签与滑块组合，绑定滑块值到标签显示内容即可：

<VerticalStackLayout Spacing="4">
    <Label Text="{Binding Source={x:Reference VolumeSlider}, Path=Value, StringFormat='音量: {0:F0}'}"
           HorizontalOptions="Center"/>
    <Slider x:Name="VolumeSlider"
            Minimum="0"
            Maximum="100"
            Value="50"/>
</VerticalStackLayout>

如果需要文本跟随滑块位置，可改用AbsoluteLayout让标签悬浮在滑块对应位置，通过绑定值计算坐标。

3. 隐藏Thumb后进度条无法拉满的问题 #

隐藏Thumb后进度条到不了末端，是因为平台默认给Slider轨道加了内边距，需在自定义Handler中移除：

Android 平台 #

在之前的CustomSliderHandler的ConnectHandler里添加：

// 移除轨道内边距
platformView.SetPadding(0, 0, 0, 0);

iOS 平台 #

在CustomSliderHandler的ConnectHandler里添加：

// 设置轨道内边距为0
platformView.TrackInsets = UIEdgeInsets.Zero;
// 隐藏Thumb（用空图片替代直接设null）
platformView.SetThumbImage(UIImage.FromFile(""), UIControlState.Normal);

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