今回はUWPアプリにおける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"/>
続いて現在値を取得する方法を見てみましょう。
以下は、現在値を取得して変数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であることを表しています。
実行すると以下のようにツマミの位置の値が表示されます。また、ツマミを動かすとそれに合わせて数字が変化します。
コメント