MAUI中如何增大Slider高度？多种尝试方案未生效

一、修复Android平台空引用异常并增大Slider高度 #

Android端的空引用是因为在Handler构造函数中添加映射时，PlatformView尚未初始化完成。改用ConnectHandler方法（该方法在平台视图创建后调用）来修改布局参数：

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

namespace YourAppName.Platforms.Android;

public class CustomSliderHandler : SliderHandler
{
    protected override void ConnectHandler(SeekBar platformView)
    {
        base.ConnectHandler(platformView);
        
        // 调整内边距，增大点击区域高度
        platformView.SetPadding(0, 20, 0, 20);
        
        // 设置SeekBar高度
        if (platformView.LayoutParameters != null)
        {
            platformView.LayoutParameters.Height = 100;
        }
        else
        {
            // 若布局参数为空，创建新的参数
            platformView.LayoutParameters = new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MatchParent, 
                100);
        }
        
        platformView.RequestLayout();
    }
}

二、修复iOS平台Slider高度不生效问题 #

iOS的UISlider无法直接通过修改Bounds调整轨道高度，需自定义轨道图片来实现：

using CoreGraphics;
using Microsoft.Maui.Handlers;
using UIKit;

namespace YourAppName.Platforms.iOS;

public class CustomSliderHandler : SliderHandler
{
    protected override void ConnectHandler(UISlider platformView)
    {
        base.ConnectHandler(platformView);
        
        const float trackHeight = 50;
        // 创建未选中轨道（灰色）的图片
        var maxTrackImage = CreateTrackImage(UIColor.Gray, trackHeight);
        // 创建已选中轨道（白色）的图片
        var minTrackImage = CreateTrackImage(UIColor.White, trackHeight);
        
        platformView.SetMaximumTrackImage(maxTrackImage, UIControlState.Normal);
        platformView.SetMinimumTrackImage(minTrackImage, UIControlState.Normal);
        
        // 隐藏滑块（对应XAML中ThumbColor="Transparent"）
        platformView.ThumbImage = new UIImage();
    }

    private UIImage CreateTrackImage(UIColor color, float height)
    {
        UIGraphics.BeginImageContextWithOptions(new CGSize(1, height), false, UIScreen.MainScreen.Scale);
        color.SetFill();
        UIGraphics.RectFill(new CGRect(0, 0, 1, height));
        var image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        
        // 创建可拉伸的图片，确保轨道宽度自适应
        return image.CreateResizableImage(new UIEdgeInsets(0, 0, 0, 0));
    }
}

三、注册自定义Handler #

在MauiProgram.cs中注册各平台的自定义Handler：

using YourAppName.Platforms.Android;
using YourAppName.Platforms.iOS;
using Microsoft.Maui;

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
    {
#if ANDROID
        handlers.AddHandler<CustomSlider, CustomSliderHandler>();
#elif IOS
        handlers.AddHandler<CustomSlider, CustomSliderHandler>();
#endif
    });

// 其他配置代码...

return builder.Build();

四、更新XAML使用CustomSlider #

将原XAML中的Slider替换为自定义的CustomSlider（注意添加命名空间引用）：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppName"
             x:Class="YourAppName.AudioPage">

    <!-- 其他布局代码 -->
    <local:CustomSlider 
        x:Name="audioSlider" 
        Grid.Row="0"
        Minimum="0" 
        VerticalOptions="Center"
        HorizontalOptions="Fill" 
        ThumbColor="Transparent" 
        MaximumTrackColor="Gray" 
        MinimumTrackColor="White" 
        InputTransparent="True"
        Maximum="{Binding Source={x:Reference MymediaElement}, Path=Duration.TotalSeconds}"
        Value="{Binding Source={x:Reference MymediaElement}, Path=Position.TotalSeconds, Mode=OneWay}"> 
        <local:CustomSlider.WidthRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>400</OnIdiom.Phone>
                <OnIdiom.Tablet>980</OnIdiom.Tablet>
                <OnIdiom.Desktop>400</OnIdiom.Desktop>
            </OnIdiom>
        </local:CustomSlider.WidthRequest>
    </local:CustomSlider>
    <!-- 其他布局代码 -->
</ContentPage>

关键说明 #

• Android端：通过ConnectHandler确保在平台视图初始化完成后修改布局参数，避免空引用；调整内边距和布局高度来增大Slider的可交互区域和视觉高度。
• iOS端：通过创建自定义轨道图片的方式，突破系统UISlider的轨道高度限制，同时隐藏滑块以匹配原需求。

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