Stepperとは?
ステパーとは,プラスとマイナスのボタンが表示され,数値を保持するコントロールです。値を1ずつ増やしたり,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で5ずつプラスしたり,マイナスしたりする設定になります。
実行
それでは実行してみましょう。初期値が13で,そこからプラス5やマイナス5ずつ値が変化することが確認できると思います。