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

Sliderとは？
準備
SlidePageの作成
実行

Sliderとは？

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

準備

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

using System.Collections.Generic;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XSample.Objects;

namespace XSample.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ControlsPage : ContentPage
    {
        public ControlsPage()
        {
            InitializeComponent();

            var items = new List<MenuDto>();
            items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png"));
            items.Add(new MenuDto("SliderPage", "Sliderの使い方", "mail.png"));
            MyListView.ItemsSource = items;
        }

        private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var item = e.Item as MenuDto;
            if (item.Title == "SwitchPage")
            {
                Navigation.PushAsync(new SwitchPage());
            }
            else if (item.Title == "SliderPage")
            {
                Navigation.PushAsync(new SliderPage());
            }
        }
    }
}

using System.Collections.Generic;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

using XSample.Objects;

namespace XSample.Pages

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class ControlsPage : ContentPage

{

public ControlsPage()

{

InitializeComponent();

var items = new List<MenuDto>();

items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png"));

items.Add(new MenuDto("SliderPage", "Sliderの使い方", "mail.png"));

MyListView.ItemsSource = items;

}

private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e)

{

var item = e.Item as MenuDto;

if (item.Title == "SwitchPage")

{

Navigation.PushAsync(new SwitchPage());

}

else if (item.Title == "SliderPage")

{

Navigation.PushAsync(new SliderPage());

}

SlidePageの作成

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XSample.Pages.SliderPage"
             Padding="40"
             BackgroundColor="LightGray">
    <ContentPage.Content>
        <StackLayout>

<!--最小値を先に１０とかにするとクラッシュする
Maxが１なので。その場合は先にMaxを設定してからMinを設定すること-->
            <Slider Maximum="255"
                    Minimum="10"
                    Value="100"
                    x:Name="MySlider"/>
            <Label Text="{Binding 
                Source={x:Reference MySlider},
                Path=Value,
                StringFormat='{0:N1}'}"/>
<!--0なら右詰め，マイナスなら左詰め
N0しょうすうなし　N1小数1位>
            
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="XSample.Pages.SliderPage"

Padding="40"

BackgroundColor="LightGray">

<ContentPage.Content>

<!--最小値を先に１０とかにするとクラッシュする

Maxが１なので。その場合は先にMaxを設定してからMinを設定すること-->

<Slider Maximum="255"

Minimum="10"

Value="100"

x:Name="MySlider"/>

<Label Text="{Binding

Source={x:Reference MySlider},

Path=Value,

StringFormat='{0:N1}'}"/>

<!--0なら右詰め，マイナスなら左詰め

N0しょうすうなし　N1小数1位>

</StackLayout>

</ContentPage.Content>

</ContentPage>

SliderにはMaximumとMinimumとValueを設定します。設定しなかったらMaximumは１で，MinimumとValueは0になっています。あと，Maximumが１の状態のまま， Minimumに１よい大きい値を入れるとエラーになります。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桁で表示されます。

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

C#を正しい3層構造で造れてますか？

非売品コースを受け取る

無料動画コース「C#のアーキテクチャー」（80分）をプレゼントしています