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

（8） Sliderコントロール

12.選択範囲を表示する

　このTipsはWPFのみとなります。あらかじめご了承ください。

　Sliderコントロールでは、ある区間が選択状態にあることを示す印を付けることができます。

　選択範囲を表すことができるようにするには、IsSelectionRangeEnabledプロパティにTrueを設定し、SelectionStartプロパティに選択開始位置を、SelectionEndプロパティに選択終了位置を設定します。

　下記は、Sliderコントロールに選択範囲を表示する例です。テキストボックスに選択開始位置と選択終了位置を入力すると、その区間の選択範囲が表示されます。

選択範囲を表示する例

XAMLの例

<StackPanel>
    <Grid Height="32">
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="6,9,0,0" Name="TextBlock1" 
                   Text="選択開始位置" VerticalAlignment="Top" />
        <TextBox Height="24" HorizontalAlignment="Left" Margin="84,6,0,0" Name="txtSelectionStart" 
                 VerticalAlignment="Top" Width="33" 
                 Text="{Binding ElementName=Slider1, Path=SelectionStart}"/>
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="123,9,0,0" Name="TextBlock2" 
                   Text="選択終了位置" VerticalAlignment="Top" />
        <TextBox Height="24" HorizontalAlignment="Left" Margin="201,6,0,0" Name="txtSelectionEnd" 
                 VerticalAlignment="Top" Width="33" 
                 Text="{Binding ElementName=Slider1, Path=SelectionEnd}"/>
    </Grid>
    <Slider Height="23"  Name="Slider1" Width="254"
            Minimum="0" Maximum="100" 
            IsSelectionRangeEnabled="True"
            SelectionStart="10"
            SelectionEnd="20"/>
</StackPanel>

VBの例

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    '選択範囲を表示する
    Slider1.IsSelectionRangeEnabled = True
    '選択範囲の設定
    Slider1.SelectionStart = 10
    Slider1.SelectionEnd = 20
End Sub

C#の例

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 選択範囲を表示する
    slider1.IsSelectionRangeEnabled = true;
    // 選択範囲の設定
    slider1.SelectionStart = 10;
    slider1.SelectionEnd = 20;
}

ポイント

　Sliderコントロールに選択範囲を表示するには、IsSelectionRangeEnabledプロパティにTrueを設定し、SelectionStartプロパティで選択開始位置、SelectionEndプロパティで選択終了位置を指定する。

13.Thumbを目盛りにスナップする

　このTipsはWPFのみとなります。あらかじめご了承ください。

　Thumbの移動量は通常Intervalプロパティで決定されますが、IsSnapToTickEnabledプロパティにTrueを設定すると最も近い目盛りにスナップさせることができます。

　下記は、IsSnapToTickEnabledプロパティを使用してThumbを目盛りにスナップさせる例です。

Thumbを目盛りにスナップする例

XAMLの例

<StackPanel>
    <Grid Height="32">
        <RadioButton Content="スナップオフ" Height="16" 
                 HorizontalAlignment="Left" Margin="6,6,0,0" 
                 Name="rdoSnapOFF" VerticalAlignment="Top" />
        <RadioButton Content="スナップオン" Height="16" 
                 Margin="100,6,0,0" Name="rdoSnapON" 
                 VerticalAlignment="Top" HorizontalAlignment="Left" />
    </Grid>
    <Slider Height="23" Name="Slider1" Width="254"
            Minimum="0" Maximum="100" 
            TickFrequency="10"
            TickPlacement="BottomRight"
            IsSnapTo

VBの例

' スナップオフ
Private Sub rdoSnapOFF_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoSnapOFF.Checked
    Slider1.IsSnapToTickEnabled = False
End Sub

' スナップオン
Private Sub rdoSnapON_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoSnapON.Checked
    Slider1.IsSnapToTickEnabled = True
End Sub

C#の例

// スナップオフ
private void rdoSnapOFF_Checked(object sender, RoutedEventArgs e)
{
    slider1.IsSnapToTickEnabled = false;
}

// スナップオン
private void rdoSnapON_Checked(object sender, RoutedEventArgs e)
{
    slider1.IsSnapToTickEnabled = true;
}

ポイント

　Thumbを目盛りにスナップさせるにはIsSnapToTickEnabledプロパティにTrueを設定する。

まとめ

　これまでのWindowsアプリケーションとは異なり、WPFのSliderコントロールには様々なプロパティが備わっていることがおわかりいただけだでしょうか？

　今回紹介した以外にも、コントロールテンプレートを改良することで、独自のSliderコントロールにすることも可能ですので、ぜひ挑戦してみてください。

　最後にSliderコントロールのMSDNリンクを下記に記しておきます。

• Sliderクラス（WPF）
• Sliderクラス（Silverlight）