I’m trying to recreate the Height Scroll from Figure1. The issue I’m encountering is that I can’t get the pointer to stay exactly in the middle of the screen. I’m using Scrollview’s padding and scrolled to try to recreate the height scroll with my current progress shown in Figure2. Any Recommendations or improvements would be very much appreciated.

Figure1 – Example of Expected outcome
Figure2 – Current progress of Expected outcome

//Mainpage.xaml
 <Grid>
     <!-- Height guage -->
     <ScrollView Orientation="Horizontal" Padding="175,0,175,0" Margin="0,0,0,0" x:Name="heghtscroll" Scrolled="heghtscroll_Scrolled">
         <gauge:SfLinearGauge x:Name="height" Orientation="Horizontal" BackgroundColor="Transparent"
              Margin="0,10,0,0" HeightRequest="200" WidthRequest="1000" HorizontalOptions="Center"
              Minimum="100" Maximum="200" Interval="5" IsInversed="false" TickPosition="Outside"  
              MinorTicksPerInterval="4" ShowLabels="True" LabelPosition="Outside" LabelFormat="###">
             <gauge:SfLinearGauge.MarkerPointers>
                 <gauge:LinearContentPointer Value="{Binding PointerValue}" x:Name="interactivePointer" Position="Outside" 
                             IsInteractive="False" StepFrequency="1" 
                             AnimationEasing="{x:Static Easing.BounceOut}" 
                             ValueChanged="LinearShapePointer_ValueChanged_1">
                     <gauge:LinearContentPointer.Content>
                         <Grid Padding="20">
                             <Image Source="line.png" HeightRequest="80" Margin="0,0,0,-20" WidthRequest="80" IsAnimationPlaying="True"/>
                             <Label x:Name="gaugelbl"  Margin="5,-25,0,0" Padding="0"  HorizontalOptions="Center" FontFamily="HankenGroteskBold" 
                    TextColor="Black" FontAttributes="Bold" FontSize="20"/>
                         </Grid>
                     </gauge:LinearContentPointer.Content>
                 </gauge:LinearContentPointer>
             </gauge:SfLinearGauge.MarkerPointers>
             <gauge:SfLinearGauge.LineStyle>
                 <gauge:LinearLineStyle Fill="LightGray" CornerRadius="2" Thickness="1"/>
             </gauge:SfLinearGauge.LineStyle>
             <gauge:SfLinearGauge.MajorTickStyle>
                 <gauge:LinearTickStyle Length="50" Stroke="LightGray" StrokeThickness="2"/>
             </gauge:SfLinearGauge.MajorTickStyle>
             <gauge:SfLinearGauge.MinorTickStyle>
                 <gauge:LinearTickStyle Length="25" Stroke="LightGray" StrokeThickness="1"/>
             </gauge:SfLinearGauge.MinorTickStyle>
         </gauge:SfLinearGauge>
     </ScrollView>
 </Grid>

//Mainpage.xaml.cs
 private void heghtscroll_Scrolled(object sender, ScrolledEventArgs e)
 {
     double scrollX = e.ScrollX;
     double scrollableWidth = ((ScrollView)sender).ContentSize.Width - ((ScrollView)sender).Width;
     double minValue = height.Minimum;
     double maxValue = height.Maximum;

     double valueRange = maxValue - minValue;
     double relativeScrollX = scrollX / scrollableWidth;

     double newValue = minValue + (relativeScrollX * valueRange);

     // Update the pointer value
     
     if (Math.Round(newValue)>= 100 && Math.Round(newValue) <= 200)
     {
         viewModel.PointerValue = Math.Round(newValue);
         gaugelbl.Text = Math.Round(newValue) + "cm";
     }
     
 }

//Heightgauge.cs 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace HeightApp 
{
   public class Heightgauge : INotifyPropertyChanged
   {
    private double pointerValue = 150;

    public double PointerValue
    {
        get => pointerValue;
        set
        {
            if (pointerValue != value)
            {
                pointerValue = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
  }
}

I tried to recreate it using Syncfusion Maui’s SfLinearGauge, any improvements or recommendations for a fix. Thanks in advance.