none
How to align Slider.Value with center of Thumb? RRS feed

  • Question

  • I have a Slider with a Min = 0 and Max = 100.  I modified the style to change the appearance of the Slider and Thumb.  When Slider.Value == 50, the Value is lined up with the Thumb center.  When the Slider.Value == 0, the Value is lined up with the left side of the Thumb, likewise when Slider.Value == 100, the Value is lined up with the right side of the Thumb.

    I'd like the Value and the Thumb center to always be aligned but it seems like it's left of center for Values < 50 and right of center for Values > 50.

    I'm guessing the X offset is ((Value - 50) * (1 / 100)) * Thumb.Width.

    Does anyone know how to override the default Thumb Track position so it's set correctly?

     

    Thanks in advance,

    Josh

    Wednesday, May 4, 2011 10:09 PM

Answers

  • Hi Josh,

    Why do you want the center of Thumb to be placed at the exact precentage value in the Track? This will cause troubles and against common sense. For example, you will only be able to see half of the thumb when Value is 0. And thus, if you drag on the left half of the thume and slide it towards the left end, you will never be able to slide to the minimum value.

    Your "guessing" is correct. Basically, the position of the Thumb/(TrackLength-ThumbLength) is equal to Value/(Maximum - Minimum) in which I think ThumbLength is necessary here. But if you really want to take ThumbLength out of this equation anyway, you can do the following.

    All these are calculated in the Track's Measure/Arrange process. You can create a custom class that derive from Track and override the MeasureOverride and ArrangeOverride methods to change this behavior. Then you need to re-template the Slider and replace its Track with your custom Track.

    If I miss anything, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Josh Suarez Monday, May 9, 2011 5:26 PM
    Friday, May 6, 2011 3:17 AM
    Moderator

All replies

  • Hi Josh,

    Why do you want the center of Thumb to be placed at the exact precentage value in the Track? This will cause troubles and against common sense. For example, you will only be able to see half of the thumb when Value is 0. And thus, if you drag on the left half of the thume and slide it towards the left end, you will never be able to slide to the minimum value.

    Your "guessing" is correct. Basically, the position of the Thumb/(TrackLength-ThumbLength) is equal to Value/(Maximum - Minimum) in which I think ThumbLength is necessary here. But if you really want to take ThumbLength out of this equation anyway, you can do the following.

    All these are calculated in the Track's Measure/Arrange process. You can create a custom class that derive from Track and override the MeasureOverride and ArrangeOverride methods to change this behavior. Then you need to re-template the Slider and replace its Track with your custom Track.

    If I miss anything, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Josh Suarez Monday, May 9, 2011 5:26 PM
    Friday, May 6, 2011 3:17 AM
    Moderator
  • Min,

    I think I have a workaround for the ends.  Thank you.


    Josh


    Monday, May 9, 2011 5:33 PM