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)

目次

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の移動方法を設定する例
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プロパティを使用する。


  • 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