Adding a second thumb to the slider control in WPF

Question

Hello Everyone,

I am trying to make a range control which is basically a slider control with an extra thumb. The only code I found for one already built is here.

http://www.codeplex.com/AvalonControlsLib

For the life of me I cannot get a tooltip to show up above each thumb (with the current value) while it is being moved. It will show a short mouse hover tooltip, but it disappears when the thumb is being moved. Does anyone know anything about this particular control, or how you would add a second thumb to the slider control and use it the same way? I've found this basic question on a few forums with no answer besides pointing to the above link. Of course, people always mention how easy it is without showing or explaining how you would go about it. Thanks in advance.

Bob

Answer 1

It is called a dataTip

mx:HSlider id="VD6C"
minimum="0"
maximum="100"
snapInterval="1"
tickInterval="10"
values="[30,50]"
change="{acceptChangesVD6.label='ReCalculate'}"
dataTipFormatFunction="vSliderPercent" //Set this function to whatever you want
thumbCount="2" toolTip="Current"

I'm trying to find out how to add a tool tip to each Thumb, so the user knows that they are changing when they hover over it. EX: Thum one says "Current Rate" thumb 2 says "estimated rate"

Answer 2

You could bind the IsOpen property of the ToolTip to the IsDragging property of the Thumb

Answer 3

I am assuming you are trying to use the Avalon Controls from here: Avalon Controls

I added a tooltip to the thumbs in the control template and called it PART_LeftToolTip

<ControlTemplate TargetType="{x:Type Controls:RangeSlider}">
    <StackPanel Orientation="Horizontal" Name="PART_RangeSliderContainer">
         <RepeatButton Name="PART_LeftEdge"/>                        
         <Thumb Name="PART_LeftThumb" Cursor="SizeWE">
               <Thumb.ToolTip>
                     <ToolTip Name="PART_LeftToolTip" />        
               </Thumb.ToolTip>
          </Thumb>                                             
          <Thumb Name="PART_MiddleThumb" Cursor="ScrollWE" MinWidth="1"/>
          <Thumb Name="PART_RightThumb" Cursor="SizeWE">
                <Thumb.ToolTip>
                      <ToolTip Name="PART_RightToolTip" />
                </Thumb.ToolTip>
          </Thumb>
          <RepeatButton Name="PART_RightEdge"/>
      </StackPanel>
</ControlTemplate>

I added them as template parts to the RangeSlider control

TemplatePart(Name = "PART_LeftToolTip", Type = typeof(ToolTip)),
TemplatePart(Name = "PART_RightToolTip", Type = typeof(ToolTip))]
public sealed class RangeSlider : Control

In the OnApplyTemplate method I did the following

_leftPreviewToolTip = EnforceInstance<ToolTip>("PART_LeftToolTip");
_rightPreviewToolTip = EnforceInstance<ToolTip>("PART_RightToolTip");

Inside the InitializeVisualElements method I added the following

private void InitializeVisualElementsContainer()
{
   // ** same as before ** //

   _leftPreviewToolTip.PlacementTarget = _leftThumb;
   _rightPreviewToolTip.PlacementTarget = _rightThumb;
}

Now for the fun parts, basically you want to display this tooltip when the thumbs are moved. For the left tooltip, you want it to show when the left thumb is moved or when the center thumb is moved. I created a method called, ShowLeftTooltip and call it from LeftThumbDragDelta and CenterThumbDragDelta respectively.

private void ShowLeftToolTip()
{
    _leftPreviewToolTip.IsOpen = AutoToolTip;
    // This is a little trick to cause the ToolTip to update its position next to the Thumb
    _leftPreviewToolTip.HorizontalOffset = _leftPreviewToolTip.HorizontalOffset == 0.0 ? 0.001 : 0.0;
}

That tip to move the tooltip is not something I thought of, I got it from another post somewhere.

I'll leave it as an exercise to the reader to implement the right tooltip.

You can style the tooltip so this allows a flexible display. Don't forget to give the tooltip something as a data context so that it won't be blank.