在WPF中为滑块控件添加第二个拇指

Question

我正在尝试制作一个范围控件，它基本上是一个带有额外滑块的滑动控件。我找到了一个已经构建好的控件代码，链接在这里：http://www.codeplex.com/AvalonControlsLib。

但是，我无论如何都无法在每个滑块上方显示一个工具提示（显示当前值），而且当滑块被移动时，它会消失。有人知道这个特定控件的情况，或者如何向滑块控件添加第二个滑块并以同样的方式使用它吗？我在几个论坛上找到了这个基本问题，但除了指向上面的链接之外，没有得到任何答案。当然，人们总是提到这很容易，但没有展示或解释如何去做。谢谢。

- Beaker

Answer 1

我假设您正在尝试使用此处的Avalon Controls：Avalon Controls 我在控件模板中为滑块添加了一个工具提示，并将其命名为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>

我将它们添加为RangeSlider控件的模板部分

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

在OnApplyTemplate方法中，我进行了以下操作。

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

在InitializeVisualElements方法中，我添加了以下内容。

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

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

现在是有趣的部分，基本上你想在移动缩略图时显示这个工具提示。对于左侧的工具提示，当左侧拇指或中心拇指移动时，希望它显示出来。我创建了一个名为ShowLeftTooltip的方法，并从LeftThumbDragDelta和CenterThumbDragDelta中分别调用它。

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;
}

我并非自己想出了移动工具提示的小窍门，而是从其他帖子中得到的。

我将把实现正确工具提示的任务留给读者自行完成。

您可以为工具提示设置样式，以实现灵活的显示。不要忘记为工具提示提供数据上下文，以免它为空白。

- lifeofmle

Answer 2

您可以将 ToolTip 的 IsOpen 属性绑定到 Thumb 的 IsDragging 属性上。

- Thomas Levesque

---

如果那不起作用，也许您可以覆盖“Thumb”模板，将其中包含一个“Popup”，并将其“IsOpen”绑定到“Thumb”的“IsDragging”。 - Ray Burns