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

Stepperとは？

ステパーとは，プラスとマイナスのボタンが表示され，数値を保持するコントロールです。値を１ずつ増やしたり，5ずつ増やしたりすることができます。

準備

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

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("StepperPage", "Stepperの使い方", "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 == "StepperPage")
            {
                Navigation.PushAsync(new StepperPage());
            }
        }
    }
}

StepperPageの作成

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

<?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.StepperPage"
Padding="40">
    <ContentPage.Content>
        <StackLayout>
            <Stepper x:Name="MyStepper"
                     Minimum="10"
                     Maximum="100"
                     Value="13"
                     Increment="5"/>
            <Label Text=
                   "{Binding 
                Source={x:Reference MyStepper},
                Path=Value}"
                   FontSize="20"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Stepperの名前を「MyStepper」にしています。MinimumとMaximumで最小値と最大値を指定できます。Valueは最初に設定される値で，プラスやマイナスを押下すると値は変化していきます。いくらずつプラスマイナスするかはIncrementで決定します。今回の例では初期値が１３で５ずつプラスしたり，マイナスしたりする設定になります。

実行

それでは実行してみましょう。初期値が13で，そこからプラス５やマイナス５ずつ値が変化することが確認できると思います。