Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#24 Sliderの使い方を解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

Sliderとは?

Sliderとは,音量を調整するつまみのようなコントロールで,整数値や小数値の設定をするコントロールです。

準備

今回はSlidePageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,SlidePageという新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにSlidePageの実装をして問題ありません。

SlidePageの作成

Pagesフォルダーに新規追加でSlidePageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルを削除して,次のように記述します。

SliderにはMaximumとMinimumとValueを設定します。設定しなかったらMaximumは1で,MinimumとValueは0になっています。あと,Maximumが1の状態のまま, Minimumに1よい大きい値を入れるとエラーになります。SliderにMySliderという名前を付けているのは,SliderのValueをLabelのTextにデータバインドしたいからです。

Sliderが書けたらLabelを書きましょう。LabelのTextにはSliderのValueをデータバインディングしています。これでSliderの値が変更されるとLabelに値が表示されるようになります。データバインドの書き方は,以前SwitchBindablePageで解説したやり方と同じです。Sourceに{x:Reference MySlider},PathにValueを設定しましょう。今回はStringFormatを追加しています。これがないと小数点以下の桁数が何桁で表示されるかが定まりません。小数点以下桁数を1桁にしたい場合は'{0:N1}’,0桁にしたい場合は'{0:N0}’と記述しましょう。最初の0は右詰を表しています。-1にすると左詰めで表示されます。

このまま実行するとSliderとLabelの周りに余白がなく,窮屈なイメージになるので,ページ全体の余白をとります。最初の方に記述しているPadding=”40″がページの余白になります。あとSliderを見えやすくするためにページ全体の背景色を薄いブルーにしています。それがBackgroundColor=”LightGray”の部分です。

実行

ここまで書けたら実行してみましょう。

スライダーの初期値が指定したValueの値で起動し,最小値と最大値が機能しているのがわかると思います。小数点以下桁数も1桁で表示されます。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。