Cómo ajustar los valores en un control deslizante de WPF, pero solo muestra un tilde para algunos de ellos

Question

Tengo un control deslizante de WPF cuyo valor mínimo = 0 y valor máximo = 50. Quiero mostrar tics en un intervalo de 5, pero haga que el control deslizante se ajuste a un intervalo de 1. ¿Esto es posible?

Answer 1

La propiedad Interval no afecta a este comportamiento.

Utilice esta:

<Slider TickFrequency="5" IsSnapToTickEnabled="True" /> 

Answer 2

<Slider TickPlacement="TopLeft" Minimum="0" Maximum="50" TickFrequency="5" IsSnapToTickEnabled="False" SmallChange="1" /> 

Desactivar el ajuste a las garrapatas con IsSnapToTickEnabled="False" y establecer SmallChange="1".

SmallChange determina el incremento al arrastrar el pulgar o al presionar las teclas de flecha. También puede controlar el incremento cuando el usuario hace clic en el deslizador (no en el pulgar). Para hacer que el pulgar salte, use LargeChange="10" para saltar 10 unidades. Para hacer que el deslizador se mueva hacia donde hizo clic el usuario, use IsMoveToPointEnabled="True". Tenga en cuenta que IsMoveToPointEnabled colocará el pulgar en el incremento de SmallChange más cercano.

Answer 3

El WPF normal Slider solo puede dibujar todas las marcas o ninguna.
Para evitar esta limitación, puede crear su propio Slider o puede usar un truco: Desactive Slider's TickBar y dibuje el suyo.

<StackPanel> 
    <TickBar Maximum="{Binding Path=Maximum, ElementName=MySlider}" 
     Minimum="{Binding Path=Minimum, ElementName=MySlider}" TickFrequency="5" Height="4" 
     Fill="Black" ReservedSpace="11" /> 
    <Slider Name="MySlider" Maximum="50" TickPlacement="None" IsSnapToTickEnabled="True" /> 
</StackPanel> 

ReservedSpace es el espacio combinado a la izquierda y derecha de los exteriores mayoría de las garrapatas, que es exactamente la misma que la anchura de la Thumb 's. Por lo general, es de 11 píxeles. Si usa un tema inusual o lo usa de otra manera, también debe ajustarlo en su nuevo TickBar.

Esta solución tiene una desventaja: el Thumb no será puntiagudo, porque el Slider piensa que no tiene marcas. Si desea que el Thumb a ser puntiagudo, tiene que engañar al Slider dándole un TickBar y luego colapsar más tarde:

<StackPanel> 
    <TickBar Maximum="{Binding Path=Maximum, ElementName=MySlider2}" 
     Minimum="{Binding Path=Minimum, ElementName=MySlider2}" TickFrequency="5" 
     Height="4" Fill="Black" ReservedSpace="11" /> 
    <Slider Name="MySlider2" Maximum="50" TickPlacement="TopLeft" 
     IsSnapToTickEnabled="True"/> 
</StackPanel> 

Y luego en el constructor de sus Window 's (después de InitializeComponent()):

this.Loaded += (sender, e) => 
{ 
    var sliderTickBar = (MySlider2.Template.FindName("TopTick", MySlider2) as 
     System.Windows.Controls.Primitives.TickBar); 
    sliderTickBar.Visibility = Visibility.Collapsed; 
}; 

Answer 4

He resuelto el mismo problema al mostrar solo los tics que quería estableciendo la propiedad Ticks, estableciendo IsSnapToTickEnabled en falso y usando el redondeo en el enlace del valor del control deslizante. En mi ejemplo, quiero mostrar el control deslizante de 0 a 100%, mostrar tics en incrementos de 5% y ajustar el paso al 1%.

El XAML:

<Slider Minimum="0" Maximum="100" 
    TickPlacement="BottomRight" Ticks="{Binding PercentTicks}" 
    TickFrequency="1" SmallChange="1" LargeChange="5" 
    Value="{Binding MyProperty, Converter={StaticResource PercentageConverter}}" /> 

la vista del modelo:

public double MyProperty 
    { 
     get { return myProperty; } 
     set 
     { 
      myProperty = Math.Round(value, 2); 
      OnPropertyChanged(); 
     } 
    } 

myProperty tiene un valor de 0 a 1, por lo que el redondeo a 2 dígitos da exactamente 1% paso! Ajuste de las garrapatas a incrementos del 5% se realiza en el constructor del modelo de vista:

var ticks = new DoubleCollection(); 
for (int i = 0; i <= 100; i+=5) 
{ 
    ticks.Add(i); 
} 
PercentTicks = ticks;