locked
Removing the popup from a slider

    Question

  • Hi, when dragging the thumb in a Metro slider, a popup appears right above the thumb showing the current value of the slider.  Is there a way to remove this popup or to customize the value displayed inside of it?

                       - Ken


    - Ken

    • Moved by Rob Caplan [MSFT]Microsoft employee, Owner Friday, September 21, 2012 5:49 PM Xaml coding question, not a design question. Coinflip on the language since it wasn't specified (From:UI Design for Windows Store apps)
    Friday, September 21, 2012 11:00 AM

Answers

  • Here is an example demonstrating all 3 possibilities:

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <StackPanel>
                <Slider Maximum="100" Minimum="10" IsThumbToolTipEnabled="True" />
                <Slider Maximum="100" Minimum="10" IsThumbToolTipEnabled="False"/>
                <local:MySlider Maximum="100" Minimum="10" IsThumbToolTipEnabled="True"/>
            </StackPanel>
        </Grid>
    </Page>
    

    -

    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    
    namespace App2
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
        }
    }
    

    -

    using System;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Data;
    
    namespace App2
    {
        public class MySlider : Slider
        {
            public MySlider()
            {
                this.ThumbToolTipValueConverter = new ThumbToolTipValueConverter();
            }
        }
        public class ThumbToolTipValueConverter : IValueConverter
        {
            /// <summary>
            /// 
            /// </summary>
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                if (value == null)
                    return 0.00;
                // ...
                double val = (double)value;
                return String.Format("My corrected value is:{0}", val + 10000.00);
            }
            /// <summary>
            /// 
            /// </summary>
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                throw new Exception();
            }
        }
    }

    • Marked as answer by Jesse Jiang Thursday, September 27, 2012 2:54 AM
    Friday, September 21, 2012 5:09 PM