2009-07-24 41 views
3

スライダのテンプレートのトラックにツールチップを追加しましたが、スライダの現在の値にバインドするのではなく、値にバインドしますマウスが終わった「トラック値」に対応する。 youtubeのビデオスライダーが許すのと同じように。したがって、ユーザーは実際に親指を動かすことなくトラックをマウスオーバーして対応する値を見ることができます。WPFスライダのトラックにツールチップを追加する

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

ありがとう!

+0

あなたはそれを行うために管理しましたか?私もこれを探しています。 – JoanComasFdz

答えて

0

私は新しいコントロールを作成しなければならないと思いますが、スライダーを継承します。 mousein/outとmousemoveを実装し、マウスのオフセットに基づいて値を計算し、ツールチップを変更する必要があります。

あなたはマージンの再スキンに考慮する必要がある場合、私は等の計算はかなりトリッキーなことがありますので、「箱から出して」使用することができます任意のプロパティがないと思う

+0

それ以外のやり方は考えられません。ありがとう – Sharun

0

まず、Sliderコントロール

を変更する必要があります
<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> 

ご覧のとおり、代わりにReflectablePopupを使用しています。ポップアップはPlacementTargetの後に移動できません。

ReflectablePopup FOコード(C#の)下に

:私はスライダーのトラックを検索し、対応するトラックのツールチップを設定するには、そのMouseMoveイベントをサブスクライブします付属の振る舞いを作成している

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

この回答はThumbの上にテキストを置きますが、質問はマウスが上にあるときのティックの値を表示することです。あなたのようなyoutube。 – JoanComasFdz

1

マウスが上がっているティックの値。私はまた、あなたが価値があるものを書くことができるようにprefixプロパティを追加しました:

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

使用

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

結果:

enter image description here

関連する問題