Silverlight／WPFで使える逆引きTips集
――スライダー機能

（8） Sliderコントロール

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プロパティを使用する。