09.任意の間隔で目盛りを表示する
このTipsはWPFのみとなります。あらかじめご了承ください。
「08.表示する目盛りの間隔を設定する」のTipsではTickFrequencyプロパティを使用して、指定した値で目盛りを等間隔に表示しました。
等間隔ではなく、任意の間隔で目盛りを表示させたい場合はTicksプロパティを使用します。TicksプロパティにはDoubleCollection型の値を設定します。
下記は、目盛りを5,10,25,50,75の位置に表示する例です。
任意の間隔で目盛りを表示する例
XAMLの例
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Minimum=0, Maximum=100,"/>
</StackPanel>
<!-- 目盛りを5,10,25,50,75の位置に表示する -->
<Slider Height="23" Name="Slider1"
TickPlacement="BottomRight"
Minimum="0"
Maximum="100"
Ticks="5,10,25,50,75"/>
</StackPanel>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'スライダーの最小値を0に最大値を100に設定
Slider1.Minimum = 0
Slider1.Maximum = 100
'目盛りを5,10,25,50,75の位置に表示する
Dim tickMarks As New DoubleCollection()
tickMarks.Add(5.0)
tickMarks.Add(10.0)
tickMarks.Add(25.0)
tickMarks.Add(50.0)
tickMarks.Add(75.0)
Slider1.Ticks = tickMarks
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// スライダーの最小値を0に最大値を100に設定
slider1.Minimum = 0;
slider1.Maximum = 100;
// 目盛りを5,10,25,50,75の位置に表示する
DoubleCollection tickMarks = new DoubleCollection();
tickMarks.Add(5.0);
tickMarks.Add(10.0);
tickMarks.Add(25.0);
tickMarks.Add(50.0);
tickMarks.Add(75.0);
slider1.Ticks = tickMarks;
}
ポイント
任意の間隔で目盛りを表示させるにはTicksプロパティを使用する。
10.現在値をツールチップに表示する
このTipsはWPFのみとなります。あらかじめご了承ください。
AutoToolTipPlacementプロパティにTrueを指定すると、SliderコントロールのThumb（つまみ）を動かしている最中に現在値を表示させることができます。
また、AutoToolTipPrecisionプロパティを使用すると、表示する現在値の小数点の桁数を設定できます。
下記は、現在値（小数第1位まで）をツールチップに表示させる例です。
現在値をツールチップに表示する例
XAMLの例
<Grid>
<Slider Name="Slider1" VerticalAlignment="Top"
Minimum="0" Maximum="100"
TickPlacement="BottomRight" TickFrequency="10"
Margin="0,25,0,0"
AutoToolTipPlacement="TopLeft"
AutoToolTipPrecision="1"/>
</Grid>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'スライダーの最小値を0に最大値を100に設定
Slider1.Minimum = 0
Slider1.Maximum = 100
'目盛りの表示設定
Slider1.TickPlacement = Primitives.TickPlacement.BottomRight
Slider1.TickFrequency = 10
'ツールチップ(Sliderの上側に)に現在値が表示されるようにする
Slider1.AutoToolTipPlacement = Primitives.AutoToolTipPlacement.TopLeft
'小数点第1位まで表示
Slider1.AutoToolTipPrecision = 1
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// スライダーの最小値を0に最大値を100に設定
slider1.Minimum = 0;
slider1.Maximum = 100;
// 目盛りの表示設定
slider1.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.BottomRight;
slider1.TickFrequency = 10;
// ツールチップ(Sliderの下側に)に現在値が表示されるようにする
slider1.AutoToolTipPlacement = System.Windows.Controls.Primitives.AutoToolTipPlacement.TopLeft;
// 小数点第1位まで表示
slider1.AutoToolTipPrecision = 1;
}
ポイント
ツールチップを使用して現在値が表示されるようにするにはAutoToolTipPlacementプロパティを使用する。
また、表示する値の小数点以下の桁数を設定するにはAutoToolTIpPrecisionプロパティを使用する。
11.Trackクリック時のThumbの移動方法を設定する
このTipsはWPFのみとなります。あらかじめご了承ください。
通常、TrackをマウスでクリックしたときのThumbの移動量はIntervalプロパティの値で決まります。
IsMoveToPointEnabledプロパティにTrueを設定すると、ThumbをTrackがクリックした位置まで移動させることが可能になります。
下記は、Thumbの移動方法を「通常の移動」と「Trackのクリック位置までの移動」に切り替える例です。
Trackクリック時のThumbの移動方法を設定する例
XAMLの例
<StackPanel>
<Grid Height="32">
<RadioButton Content="通常移動" Height="16"
HorizontalAlignment="Left" Margin="6,6,0,0"
Name="RadioButton1" VerticalAlignment="Top" />
<RadioButton Content="Trackのクリック位置まで移動" Height="16"
Margin="76,6,0,0" Name="RadioButton2"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</Grid>
<Slider Height="23" Name="Slider1" Width="254"
Minimum="0" Maximum="100"
Interval="5"
IsMoveToPointEnabled="False"/>
</StackPanel>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'IsMoveToPointEnabled = False の場合の
'Trackクリック時の移動量を設定
Slider1.Interval = 2
End Sub
' 通常移動
Private Sub RadioButton1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton1.Checked
Slider1.IsMoveToPointEnabled = False
End Sub
' Trackのクリック位置まで移動
Private Sub RadioButton2_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton2.Checked
Slider1.IsMoveToPointEnabled = True
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// IsMoveToPointEnabled = False の場合の
// Trackクリック時の移動量を設定
slider1.Interval = 2;
}
// 通常移動
private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
slider1.IsMoveToPointEnabled = false;
}
// Trackのクリック位置まで移動
private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
slider1.IsMoveToPointEnabled = true;
}
ポイント
Trackクリック時のThumbの移動方法を設定するにはIsMoveToPointEnabledプロパティを使用する。
