WPF 슬라이더의 값으로 스냅하는 방법 일부의 눈금 표시 방법

Question

최소값 = 0이고 최대 값 = 50 인 WPF 슬라이더가 있습니다. 간격을 5로하여 눈금을 표시하고 싶습니다. 슬라이더를 1 간격으로 스냅합니다. 이것이 가능합니까?

Answer 1

속성 Interval은이 동작에 영향을주지 않습니다.

사용이 :

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

Answer 2

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

비활성화 IsSnapToTickEnabled="False"와 진드기에 스냅 및 SmallChange="1"을 설정합니다.

SmallChange는 엄지를 끌거나 화살표 키를 누를 때 증가량을 결정합니다. 사용자가 슬라이더를 클릭 할 때 증가량을 제어 할 수도 있습니다 (엄지 손가락이 아님). 엄지 손가락을 점프하려면 LargeChange="10"을 사용하여 10 단위 이동하십시오. 슬라이더를 사용자가 클릭 한 곳으로 이동하려면 IsMoveToPointEnabled="True"을 사용하십시오. 참고로 IsMoveToPointEnabled는 엄지 손가락을 가장 가까운 SmallChange 증분에 배치합니다.

Answer 3

일반 WPF Slider은 눈금을 모두 표시하거나 전혀 표시하지 않을 수 있습니다.
이 제한 사항을 해결하려면 직접 Slider을 만들거나 트릭을 사용할 수 있습니다. Slider의 TickBar을 사용하지 않도록 설정하고 나만의 것을 그립니다.

<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 정확히 Thumb의 폭과 동일한 최 외측 틱 좌우로 조합 된 공간이다. 대개 11 ​​픽셀입니다. 특이한 주제를 사용하거나 다른 방식으로 혼란에 빠지면 새로운 TickBar에서도 조정해야합니다.

이 솔루션에는 단점이 있습니다. Slider은 눈금이 없다고 생각하기 때문에 Thumb은 뾰족하지 않습니다. 당신의 Window의 생성자

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

그리고 다음을 (InitializeComponent() 후) : 당신이 Thumb이 뾰족한 싶은 경우에, 당신은 그에게 TickBar를 제공함으로써 Slider을 속여 다음 나중에 축소해야

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

Answer 4

Ticks 속성을 설정하고 IsSnapToTickEnabled를 false로 설정하고 슬라이더 값의 바인딩을 반올림하여 원하는 틱만 표시하여 동일한 문제를 해결했습니다. 예제에서는 슬라이더를 0에서 100 %로 표시하고 틱을 5 % 씩 표시하고 스냅 단계를 1 %로 표시하려고합니다.

XAML :

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

보기 모델 :

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

myProperty는 0 내지 1의 값을 가지므로 두 자리로 반올림하여 정확히 1 % 단계 준다! 눈금을 5 % 단위로 설정하면 뷰 모델의 생성자에서 수행됩니다.

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