在WPF中向滑块控件添加第二个滑块

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

2 个解决方案

#1

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

我假设您正在尝试使用此处的Avalon控件:Avalon Controls

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

我在控件模板中向拇指添加了一个工具提示,并将其命名为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

我将它们作为模板部件添加到RangeSlider控件中

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

在OnApplyTemplate方法中,我执行了以下操作

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

Inside the InitializeVisualElements method I added the following

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

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.

现在,对于有趣的部分,基本上您想要在移动拇指时显示此工具提示。对于左侧工具提示,您希望它在移动左拇指或移动中心拇指时显示。我创建了一个名为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;
}

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.

您可以设置工具提示的样式,以便灵活显示。不要忘记将工具提示作为数据上下文,以便它不会为空。

#2

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

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

#1