WPF4.5入門その36 「Sliderコントロール」

Sliderコントロールは、任意の範囲の数値から１つをユーザーに選択させるコントロールです。デフォルトでは0～10の間の実数を選択する動作をします。以下のようにStackPanel上に置いただけのSliderコントロールの動作を以下に示します。

<StackPanel Margin="5">
    <Slider x:Name="slider" />
    <TextBlock Text="{Binding Value, ElementName=slider}" />
</StackPanel>

起動直後は、以下のように0をさしています。

f:id:okazuki:20140815220207p:plain

スライダーコントロールの余白の線をクリックすると1ずつ値が増えていきます。以下の図は、3回クリックしたときの様子です。値が3になっていることが確認できます。

f:id:okazuki:20140815220236p:plain

つまみを移動することで、範囲内の任意の値を選択することもできます。

f:id:okazuki:20140815220301p:plain

Sliderコントロールの値を取得するにはValueプロパティを使用します。

プロパティ	説明
public double Value { get; set; }	Sliderコントロールの現在の値を取得または設定します。

選択範囲のカスタマイズ

Sliderコントロールは、MinimumプロパティとMaximumプロパティを使って最大値と最小値を変更することが出来ます。

プロパティ	説明
public double Minimum { get; set; }	Sliderコントロールの最小値を取得または設定します。
public double Maximum { get; set; }	Sliderコントロールの最大値を取得または設定します。

以下のようにXAMLでMinimumプロパティ、Maximumプロパティ、Valueプロパティを指定した実行結果を示します。

<StackPanel Margin="5">
    <Slider x:Name="slider" Minimum="-20" Maximum="20" Value="-10" />
    <TextBlock Text="{Binding Value, ElementName=slider}" />
</StackPanel>

f:id:okazuki:20140815220517p:plain

初期状態で-10、最小値が-20、最大値が20になっていることが確認できます。

値の増減幅の設定

Sliderコントロールは、余白をクリックしたときの値の移動量（デフォルトは1）と、矢印キーを押したときの値の移動量(デフォルトは0.1)を設定できます。それぞれ、LargeChangeプロパティと、SmallChangeプロパティで指定します。

プロパティ	説明
public double LargeChange { get; set; }	マウスでつまみの横の余白の線をクリックしたときの値の変化量を取得または設定します。
public double SmallChange { get; set; }	矢印キーを押したときの値の変化量を取得または設定します。

縦方向のスライダーと目盛り

Sliderコントロールは、横方向だけではなく縦方向にしたり、Sliderコントロールに目盛りをつけることが出来ます。

プロパティ	説明
public Orientation Orientation {get; set; }	スライダーが横方向なのか縦方向なのかを取得または設定します。デフォルト値はHorizontal（水平）です。Verticalを設定することで縦方向にできます。
public TickPlacement TickPlacement { get; set; }	Sliderコントロールの目盛りの状態を取得または設定します。 None：目盛りなし。（デフォルト値）。 Both：横方向のときは上下に、縦方向のときは左右に目盛りがつきます。BottomRight：横方向のときは下に、縦方向のときは右に目盛りがつきます。TopLeft：横方向のときは上に、縦方向のときは左に目盛りがつきます。

プロパティ

説明

public Orientation Orientation {get; set; }

スライダーが横方向なのか縦方向なのかを取得または設定します。デフォルト値はHorizontal（水平）です。Verticalを設定することで縦方向にできます。

public TickPlacement TickPlacement { get; set; }

Sliderコントロールの目盛りの状態を取得または設定します。 None：目盛りなし。（デフォルト値）。 Both：横方向のときは上下に、縦方向のときは左右に目盛りがつきます。BottomRight：横方向のときは下に、縦方向のときは右に目盛りがつきます。TopLeft：横方向のときは上に、縦方向のときは左に目盛りがつきます。

縦方向にして、目盛りをつける場合のXAMLを以下に示します。

<StackPanel Margin="5" Orientation="Horizontal">
    <Slider x:Name="slider"
            Minimum="10"
            Maximum="100" 
            SmallChange="1" 
            LargeChange="10" 
            TickPlacement="BottomRight"
            Orientation="Vertical"/>
    <TextBlock Text="{Binding Value, ElementName=slider}" />
</StackPanel>