目盛りを表示する

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

Slider コントロールは、TickPlacement プロパティを使用して目盛りを表示することができます。

TickPlacement の”Tick” は目盛りを意味します。

TickPlacement プロパティには TickPlacement 列挙体の値を指定します。

TickPlacement 列挙体 メンバ名説明 Both Sliderを横方向に配置した場合は上と下、縦方向に配置した場合は左と右に配置します BottomRIght Sliderを横方向に配置した場合は下、縦方向に配置した場合は右に配置します None 目盛りを表示しません TopLeft Sliderを横方向に配置した場合は上、縦方向に配置した場合は左に配置します

下記は、チェックを付けたラジオボタンに合わせて目盛りを表示する例です。

XAMLの例

<StackPanel>
    <StackPanel Height="32" Orientation="Horizontal">
        <TextBlock Height="23" Name="TextBlock1" Text="スライダー" 
                               VerticalAlignment="Center" Width="74" FontWeight="Bold" />
        <RadioButton Content="横" Height="16" HorizontalAlignment="Left" 
                     Name="rdoSliderHorizontal" VerticalAlignment="Top" Margin="0,4,0,0" 
                     GroupName="Orientation" />
        <RadioButton Content="縦" Height="16" HorizontalAlignment="Left" 
                     Name="rdoSliderVertical" VerticalAlignment="Top" Margin="4,4,0,0" 
                     GroupName="Orientation" />
        <TextBlock Height="23" Name="TextBlock2" Text="目盛り" VerticalAlignment="Center" Width="49"  
                   Margin="12,0,0,0" FontWeight="Bold" />
        <RadioButton Content="下" Height="16" HorizontalAlignment="Left" Name="rdoTickType1" 
                     VerticalAlignment="Top" Margin="0,4,0,0" GroupName="Tick" />
        <RadioButton Content="上" Height="16" HorizontalAlignment="Left" Name="rdoTickType2" 
                     VerticalAlignment="Top" Margin="4,4,0,0" GroupName="Tick" />
        <RadioButton Content="両サイド" Height="16" HorizontalAlignment="Left" Name="rdoTickBoth" 
                     VerticalAlignment="Top" Margin="4,4,0,0" GroupName="Tick" />
        <RadioButton Content="なし" Height="16" HorizontalAlignment="Left" Name="rdoTickNone" 
                     VerticalAlignment="Top" Margin="4,4,0,0" GroupName="Tick" />
    </StackPanel>
    <!-- 目盛りを表示する -->
    <Slider Height="220" Name="Slider1" Orientation="Horizontal" Width="220" 
            TickPlacement="BottomRight"/>
</StackPanel>

VBの例

''' スライダーを横方向にする
Private Sub rdoSliderHorizontal_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoSliderHorizontal.Checked
    'スライダーを横方向にする
    Slider1.Orientation = Orientation.Horizontal

    'ラジオボタンの表示を変更する
    rdoTickType1.Content = "下"
    rdoTickType2.Content = "上"
End Sub

''' スライダーの向きを縦方向にする
Private Sub rdoSliderVertical_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoSliderVertical.Checked
    'スライダーを縦方向にする
    Slider1.Orientation = Orientation.Vertical

    'ラジオボタンの表示を変更する
    rdoTickType1.Content = "右"
    rdoTickType2.Content = "左"
End Sub

''' 目盛りを「下」または「右」に表示する
Private Sub rdoTickType1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoTickType1.Checked        
        Slider1.TickPlacement = Primitives.TickPlacement.BottomRight        
End Sub

''' 目盛りを「上」または「左」に表示する
Private Sub rdoTickType2_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoTickType2.Checked
    Slider1.TickPlacement = Primitives.TickPlacement.TopLeft
End Sub

''' 目盛りを両脇に表示する
Private Sub rdoTickBoth_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoTickBoth.Checked
    Slider1.TickPlacement = Primitives.TickPlacement.Both
End Sub

''' 目盛りを非表示にする
Private Sub rdoTickNone_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles rdoTickNone.Checked
    Slider1.TickPlacement = Primitives.TickPlacement.None
End Sub

C#の例

// スライダーを横方向にする
private void rdoSliderHorizontal_Checked(object sender, RoutedEventArgs e)
{
    // スライダーを横方向にする
    slider1.Orientation = Orientation.Horizontal;

    // ラジオボタンの表示を変更する
    rdoTickType1.Content = "下";
    rdoTickType2.Content = "上";
}

// スライダーの向きを縦方向にする
private void rdoSliderVertical_Checked(object sender, RoutedEventArgs e)
{
    // スライダーを縦方向にする
    slider1.Orientation = Orientation.Vertical;

    // ラジオボタンの表示を変更する
    rdoTickType1.Content = "右";
    rdoTickType2.Content = "左";
}

// 目盛りを「下」または「右」に表示する
private void rdoTickType1_Checked(object sender, RoutedEventArgs e)
{
    slider1.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.BottomRight;
}

// 目盛りを「上」または「左」に表示する
private void rdoTickType2_Checked(object sender, RoutedEventArgs e)
{
    slider1.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.TopLeft;            
}

// 目盛りを両脇に表示する
private void rdoTickBoth_Checked(object sender, RoutedEventArgs e)
{
    slider1.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.Both;
}

// 目盛りを非表示にする
private void rdoTickNone_Checked(object sender, RoutedEventArgs e)
{
    slider1.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.None;
}