[UWPアプリ][Slider] 基本使用方法とコントロール間バインディング

今回はUWPアプリにおけるSliderの基本使用方法と、コントロール間でのバインディングに付いて見ていきます。

Sliderコントロールの概要

Sliderコントロールは文字通りスライドをさせて、値の取得/設定することができるコントロールです。

Sliderの既定の外観は以下の通りです。

Sliderコントロールの外観


最小値/最大値の取得と設定

Sliderの一番左が最小で、一番右が最大を表しています。

最小値はMinimumプロパティで、最大値はMaximumプロパティで設定をします。

Minimumプロパティの既定値は0、Maxmumプロパティの既定値は100となっており、何も指定しなければ、0~100までの間で値を変化させることが可能です。

以下は最小値を-200、最大値を200に設定する例です。

<Slider x:Name="slider" HorizontalAlignment="Left"
        VerticalAlignment="Top" Width="100" 
        Minimum="-200" Maximum="200"/>

続いて値を取得する方法を見てみましょう。

以下は最小値の値と、最大値の値を取得して、変数min(double型)とmax(double型)に代入する例です。

var min = slider.Minimum;   // 最小値の取得
var max = slider.Maximum;   // 最大値の取得

現在値の取得と設定

Sliderのツマミの位置を取得/設定するには Valueプロパティ(double型)を使用します。

以下は現在値を 100に設定する例です。

<Slider x:Name="slider" HorizontalAlignment="Left"
        VerticalAlignment="Top" Width="100"
        Minimum="-200" Maximum="200"
        Value="100"/>

現在値を100に設定する例

続いて現在値を取得する方法を見てみましょう。

以下は、現在値を取得して変数currentValに代入する例です。

var currentVal = slider.Value;  //現在値の取得

他コントロールへのバインディング

バインディングを使用して、Sliderの値を他のコントロールに表示する方法を見てみましょう。

ここでは、Sliderの現在値(Valueプロパティ)をTextBlockコントロールへバインドする方法を確認します。

画面にSliderとTextBlockを配置したら、XAMLを以下のように編集します。

<Slider x:Name="slider" HorizontalAlignment="Left" 
        VerticalAlignment="Top" Width="100"
        Minimum="-200" Maximum="200"
        Value="100"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left"
           Text="{Binding Value, ElementName=slider}"/>

実際にバインディングの設定を行っているのは、上記のTextBlockのTextプロパティの

Text={Binding Value, Element=slider}

の部分です。

「Binding Value」はSliderのValueプロパティをバインディングするということを表し、その後ろの「EelmentName=slider」がバインディングするコントロールがsliderであることを表しています。

実行すると以下のようにツマミの位置の値が表示されます。また、ツマミを動かすとそれに合わせて数字が変化します。

バインディングの実行例

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です