So zeigen Sie die aktuelle Position eines Schiebereglers immer über dem Daumen an

Question

So zeigen Sie einen Schieberegler mit einem Tooltip/Label unter dem Daumen, der den Wert (Zeitspanne) immer anzeigt, während er sich mit/ohne Ziehen des Benutzers bewegt.

Ich versuchte AutoToolTipPlacement = "Bottom" AutoToolTipPrecision = "3" auf meinem Schieber. Aber Tooltip wird nur dann angezeigt, wenn ich die Daumen ziehen. Ich möchte, dass gezeigt, auch wenn ich player slider mit einem Button-Steuerelement aufrufen. (Wie Video-Player)

Der Punkt ist, um die Größe meiner Benutzersteuerung zu reduzieren und zusätzliche Etiketten für Timer oder Position zu vermeiden.

Wenn ich in die falsche Richtung bin, schlagen Sie mir bitte bessere Ideen vor. Vielen Dank!

Answer 1

Sie können neu Stil der Thumb diesen Effekt zu zeigen. Unten ist eine Probe, die eine kreisförmige Thumb mit der .Value Eigenschaft der Eltern Slider innerhalb des Kreises zeigt.

<Style TargetType="{x:Type Thumb}"> 
    <Setter Property="Focusable" Value="false"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="Height" Value="20"/> 
    <Setter Property="Width" Value="20"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Thumb}"> 
       <Canvas SnapsToDevicePixels="true"> 
        <Grid Height="20" Width="20"> 
         <Ellipse x:Name="Background" 
          Fill="#FFA3A3A3" 
          Height="20" Width="20" 
          Stroke="#FFDADADA"/> 
         <TextBlock HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Foreground="Black" 
          FontSize="9" 
          Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/> 
        </Grid> 
       </Canvas> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter Property="Fill" TargetName="Background" 
          Value="#FFDADADA"/> 
        </Trigger> 
        <Trigger Property="IsDragging" Value="true"> 
         <Setter Property="Fill" TargetName="Background" 
          Value="#FFF2F2F2"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Fill" TargetName="Background" 
          Value="#FFF2F2F2"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Ich habe eine IValueConverter um sicherzustellen, dass der der angezeigte Wert ist immer eine ganze Zahl, da die normale .Value Eigenschaft ist eine Dezimalzahl verwendet. Sie möchten Ihren eigenen Konverter verwenden, um die Informationen richtig zu formatieren, die Sie anzeigen möchten.

können Sie den Text machen oder Nummern erscheinen, wo immer Sie wollen die Thumb wieder Styling.

EDIT:

Wenn Sie den Text über oder unter dem tatsächlichen Daumen zeigen wollen, ist es eine ziemlich kleine Änderung im Styling:

    <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="20"/> 
          <RowDefinition Height="20"/> 
         </Grid.RowDefinitions> 
         <Ellipse x:Name="Background" 
          Fill="#FFA3A3A3" 
          Height="20" Width="20" 
          Stroke="#FFDADADA"/> 
         <TextBlock Grid.Row="1" HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Foreground="White" 
          FontSize="9" 
          Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/> 
        </Grid>