change Text/DataFormat of Slider's ThumbTooltip

Question

I have a slider with maximum value of video's time in seconds (1 minute = 60 seconds, so if the video is 60 seconds length, the maximum value of the slider will be 60).

When I drag the Thumb, there's ThumbTooltip that shows the current value I am hovering.
I want to change that text so instead of displaying int, it will display time 1 will be 00:01 and so on...

I tried to play with the style of the Slider with no luck.

Will appreciate your help.

Answer 1

Slider has ThumbToolTipValueConverter property. You need to create class which implements IValueConverter interface. In that the Convert method will help you to convert the default slider value to your customized value. See the below code.

XAML

<Page.Resources>
    <local:SliderValueConverter x:Key="SliderValueConverter"/>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Slider Maximum="60" Value="40" Height="100" Width="300" ThumbToolTipValueConverter="{StaticResource SliderValueConverter}" />
</Grid>

SliderValueConverter.cs

public class SliderValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var seconds = System.Convert.ToInt32(value);
        return string.Format("{0:00}:{1:00}", (seconds / 60) % 60, seconds % 60);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}