Nuestros últimos artículos

Slider Thumb Tooltip

Seguimos con nuestra serie de artículos para aplicaciones en Windows 8, y esta vez le toca a un pequeño truco para convertir el formato del valor mostrador por el slider en una App para WinRT.

Este pequeño truco se publicó previamente en CodeProject, por lo que si prefieres el formato de ese blog (nosotros también lo preferimos), adelante. En nuestro blog también lo hemos mantenido en inglés, ya que es realmente sencillo de entender.


Slider is an intuitive and interactive UI control to pick as well as to show the values. It’s used mostly to pick numeric values. Slider control has maximum and minimum double data type property which is used to set the maximum and minimum value to pick. It has a value double property which returns what is the current picked value.

Thumb is a small rectangle UI control on slider’s track which is being dragged by user to pick the value.


Slider can also be used to pick date and time. So it’s based on developer how one can leverage numeric values in particular model data type. Slider is not only for picking but also for showing the data for example a seek bar of media player. One can customize the slider control to show it as seek bar of media player. By default, slider control doesn’t show current value. So slider’s thumb tooltip is useful at that time. If user taps and holds, then value is shown in thumb tooltip.

One will think tooltip is visible on mouse hover event, then how tooltip is used for slider in touch device? So on touch device when user presses the thumb, the tooltip shows the current value, when the slider is being dragged, underlying values is being shown in tooltip.


Have you ever thought how you can change the format of slider thumb’s tooltip value? For example, you want to use a slider to pick time from 0 minutes to 15 minutes. So will you code like this:

<Slider Width="500" Maximum="900" Value="120">

Now user wants to pick 9 minutes 22 seconds, so user has to calculate like given below:

9 X 60 = 540
540 + 22 = 562

and then user will drag the slider thumb till the tooltip shows 562 in harder ways.


Have you ever thought of how you can display “9 minutes 22 seconds” instead of boring “562”? Ok, I am here to help you. Slider class offers a property called ThumbToolTipValueConverter, which takes IValueConverter object. In simple words, you can convert the slider value to a particular format using a class which implements IValueConverter interface. So my class will look like given below:

class TooltipValueConverter : IValueConverter
    public object Convert(object value, Type targetType, object parameter,
                          string language)
        var seconds = System.Convert.ToInt32(value);
        return string.Format("{0} {1}", (seconds / 60) % 60 + " minutes",
        seconds % 60 + " seconds");
    public object ConvertBack(object value, Type targetType,
                              object parameter, string language)
        throw new NotImplementedException();

Then you need to add TooltipValueConverter in page’s resource & then add converter object as value of slider’s ThumbToolTipValueConverter property.

    <local:TooltipValueConverter x:Key="TooltipValueConverter"/>

Here local is namespace reference of class TooltipValueConverter declared in page tag.

<Slider Width="500" Maximum="900" Value="120"
ThumbToolTipValueConverter="{StaticResource TooltipValueConverter}"/>

Now it’s damn easy to pick 9 minutes 22 seconds:


efloxSlider Thumb Tooltip

Related Posts