WPF Hinzufügen einer QuickInfo zur Spur eines Schiebereglers

Question

Ich habe der Spur in der Schiebereglervorlage einen Tooltip hinzugefügt (siehe unten), aber statt an den aktuellen Wert des Schiebereglers zu binden, möchte ich an den Wert binden entsprechend dem "Track-Wert" ist die Maus vorbei. Ähnlich wie der Youtube-Video-Slider. So kann der Benutzer mit der Maus über die Spur fahren und auch den entsprechenden Wert sehen, ohne den Daumen tatsächlich bewegen zu müssen.

<Track Grid.Row="1" Name="PART_Track" ToolTip="{Binding Path=Value}" ToolTipService.Placement="Mouse"> 
</Track> 

Irgendwelche Ideen? Vielen Dank!

Answer 1

Ich könnte mir vorstellen, dass Sie ein neues Steuerelement erstellen müssen, das vom Schieberegler erbt. Sie müßten Mauszeiger/Mauszeiger und Mauszeiger implementieren, den Wert basierend auf Mausversatz berechnen und den Tooltip ändern.

Ich glaube nicht, dass es jede Eigenschaft, die Sie „out of the box“ verwenden können, so dass die Berechnung ziemlich schwierig sein kann, wenn Sie in Reskinning der Margen usw.

Answer 2

Zuerst Schieberegler ändern müssen Faktor müssen

<Slider VerticalAlignment="Center" HorizontalAlignment="Stretch"> 
     <Slider.Template> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
       <Grid> 
        <xamlTest:ReflectablePopup x:Name="InfoPopup" Width="Auto" Height="Auto" PlacementTarget="{Binding ElementName=Thumb}" Placement="Top" StaysOpen="False" IsOpen="False" AllowsTransparency="True"> 
         <Border Padding="2" CornerRadius="3" Background="#555C5C5C"> 
          <Label Content="Your Text"></Label> 
         </Border> 
        </xamlTest:ReflectablePopup> 
        <Track x:Name="PART_Track"> 
         <Track.Thumb> 
          <Thumb x:Name="Thumb" Width="10" Height="20"> 
          </Thumb> 
         </Track.Thumb> 
        </Track> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger SourceName="Thumb" Property="IsDragging" Value="True"> 
         <Setter Value="True" TargetName="InfoPopup" Property="IsOpen" /> 
        </Trigger> 
        <Trigger SourceName="Thumb" Property="IsDragging" Value="False"> 
         <Setter Value="False" TargetName="InfoPopup" Property="IsOpen" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Slider.Template> 
    </Slider> 

Wie Sie sehen, verwende ich ReflectablePopup statt Popup. Weil Popup nach PlacementTarget nicht verschoben werden kann.

Unter dem Code fo ReflectablePopup (C#):

public class ReflectablePopup : Popup 
{ 
    protected override void OnOpened(EventArgs e) 
    { 
     var friend = this.PlacementTarget; 
     friend.QueryCursor += friend_QueryCursor; 

     base.OnOpened(e); 
    } 

    protected override void OnClosed(EventArgs e) 
    { 
     var friend = this.PlacementTarget; 
     friend.QueryCursor -= friend_QueryCursor; 

     base.OnClosed(e); 
    } 

    private void friend_QueryCursor(object sender, System.Windows.Input.QueryCursorEventArgs e) 
    { 
     this.HorizontalOffset += +0.1; 
     this.HorizontalOffset += -0.1; 
    } 
} 

Answer 3

Ich habe einen angeschlossenen Verhalten geschaffen, das die Spur von einem Schieber finden und abonnieren Sie sein Mousemove-Ereignis den Tooltip der Spur auf die entsprechend eingestellt Wert des Ticks ist die Maus vorbei. Ich habe auch eine Präfix Eigenschaft, so können Sie schreiben, was der Wert ist:

internal class ShowTickValueBehavior : Behavior<Slider> 
{ 
    private Track track; 

    public static readonly DependencyProperty PrefixProperty = DependencyProperty.Register(
     "Prefix", 
     typeof(string), 
     typeof(ShowTickValueBehavior), 
     new PropertyMetadata(default(string))); 

    public string Prefix 
    { 
     get 
     { 
      return (string)this.GetValue(PrefixProperty); 
     } 
     set 
     { 
      this.SetValue(PrefixProperty, value); 
     } 
    } 

    protected override void OnAttached() 
    { 
     this.AssociatedObject.Loaded += this.AssociatedObjectOnLoaded; 
     base.OnAttached(); 
    } 

    protected override void OnDetaching() 
    { 
     this.track.MouseMove -= this.TrackOnMouseMove; 
     this.track = null; 
     base.OnDetaching(); 
    } 

    private void AssociatedObjectOnLoaded(object sender, RoutedEventArgs routedEventArgs) 
    { 
     this.AssociatedObject.Loaded -= this.AssociatedObjectOnLoaded; 
     this.track = (Track)this.AssociatedObject.Template.FindName("PART_Track", this.AssociatedObject); 
     this.track.MouseMove += this.TrackOnMouseMove; 
    } 

    private void TrackOnMouseMove(object sender, MouseEventArgs mouseEventArgs) 
    { 
     var position = mouseEventArgs.GetPosition(this.track); 
     var valueFromPoint = this.track.ValueFromPoint(position); 
     var floorOfValueFromPoint = (int)Math.Floor(valueFromPoint); 
     var toolTip = string.Format(CultureInfo.InvariantCulture, "{0}{1}", this.Prefix, floorOfValueFromPoint); 

     ToolTipService.SetToolTip(this.track, toolTip); 
    } 
} 

Nutzungs

<Window x:Class="TestSlider.MainView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-TestSlider" 
    xmlns:system="clr-namespace:System;assembly=mscorlib" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    > 
    <Grid> 
     <Slider Name="Slider1" 
       IsSnapToTickEnabled="True" 
       TickFrequency="1" 
       TickPlacement="BottomRight" 
       IsMoveToPointEnabled="True" 
       Minimum="13" 
       Maximum="25" 
       > 
       <i:Interaction.Behaviors> 
        <local:ShowTickValueBehavior Prefix="Volume: "/> 
       </i:Interaction.Behaviors> 
     </Slider> 
    </Grid> 

Ergebnis: