CodeZine(コードジン)

特集ページ一覧

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

(8) Sliderコントロール

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/02/11 14:00

ダウンロード Slider_WPF_VB.zip (2.0 MB)
ダウンロード Slider_WPF_CS.zip (1.9 MB)
ダウンロード Slider_Silverlight_VB.zip (5.8 MB)
ダウンロード Slider_Silverlight_CS.zip (5.7 MB)

目次

07.目盛りを表示する

 この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;
}
ポイント

 目盛りを表示するにはTickPlacementプロパティを使用する。

08.表示する目盛りの間隔を設定する

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

 表示するメモリの間隔を設定するにはTickFrequencyプロパティを使用します。

 下記は、目盛りの間隔を10に設定する例です。

表示する目盛りの間隔を設定する例
表示する目盛りの間隔を設定する例
XAMLの例
<StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Minimum=0, Maximum=100, 目盛りの間隔=10"/>
    </StackPanel>
    <Slider Height="23" Name="Slider1" 
            TickPlacement="BottomRight"
            Minimum="0"
            Maximum="100"
            TickFrequency="10"/>
</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

    '目盛り間隔を10にする
    Slider1.TickFrequency = 10
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // スライダーの最小値を0に最大値を100に設定
    slider1.Minimum = 0;
    slider1.Maximum = 100;

    // 目盛り間隔を10にする
    slider1.TickFrequency = 10;
}
ポイント

 表示する目盛りの間隔を設定するにはTickFrequencyプロパティを設定する。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight/WPFで使える逆引きTips集

もっと読む

著者プロフィール

  • HIRO(ヒロ)

    HIRO's.NETのHIROです。 とある半導体工場のSEです。 VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。 最近はBlog でPowerShellについて書いています。 2008/07/07にPowerShell from Japan!!という...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5