Xamarin.forms Slider ThumImage hides on Maximum value

Question

I am using slider control and setting triangle as thumb image. On extreme left or minimum value, image shows correctly. But on dragging it to maximum values it hides out on maximum value. <Slider.ThumbImageSource> <OnPlatform x:TypeArguments="FileImageSource"> <On Platform="UWP" Value="Assets/Images/Triangle.png"/> </OnPlatform> </Slider.ThumbImageSource>

Answer 1

When you use this slider control with Thumb Image in Xamarin.uwp, there is no horizontal limitation. However, the original thumb works well.

You could create a custom control to use the original Thumb style to cover the Thumb Image style.

Change:

<Thumb x:Name="HorizontalThumb"
              Background="{ThemeResource SystemControlForegroundAccentBrush}"
              Style="{StaticResource SliderThumbStyle}"
              DataContext="{TemplateBinding Value}"
              Height="24"
              Width="8"
              Grid.Row="0"
              Grid.RowSpan="3"
              Grid.Column="1"
              AutomationProperties.AccessibilityView="Raw" />
                            <Thumb x:Name="HorizontalImageThumb"
                                    Visibility="Collapsed"
                                    Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                    Style="{StaticResource SliderThumbImageStyle}"
                                    DataContext="{TemplateBinding Value}"
                                    Tag="{Binding ThumbImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                                    Height="24"
                                    Width="24"
                                    Grid.Row="0"
                                    Grid.RowSpan="3"
                                    Grid.Column="1"
                                    AutomationProperties.AccessibilityView="Raw" />

To:

   <Thumb
                                x:Name="HorizontalThumb"
                                Grid.Row="0"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="24"
                                Height="24"
                                AutomationProperties.AccessibilityView="Raw"
                                Style="{StaticResource SliderThumbImageStyle}"
                                Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                DataContext="{TemplateBinding Value}"
                                Tag="{Binding ThumbImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                                />

And comment to the method which used to Swap Thumbs.

protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        Thumb = GetTemplateChild("HorizontalThumb") as Thumb;
        ImageThumb = GetTemplateChild("HorizontalImageThumb") as Thumb;

        //SwapThumbs(this);

        OnReady();
    }

And add the code below to use this property to change the default for the style that the control uses.

public MySlider()
    {
        this.DefaultStyleKey = typeof(MySlider);
    }

Then comment the code in MainPage.cs of Xamarin.uwp.

LoadApplication(new App43.App());

At last, you could use this control in Xamarin.uwp MainPage.xaml.

<local:MySlider ThumbImageSource="Assets/pig.jpg"/>

Result:

I have upload my sample on GitHub, you could download App43 folder for reference. https://github.com/WendyZang/Test.git