第十五章：交互式界面（五）

步进器的区别
Stepper视图与Slider的编程接口几乎相同：它具有double类型的Minimum，Maximum和Value属性，并触发ValueChanged事件处理程序。
但是，Stepper的Maximum属性的默认值为100，Stepper还会添加一个Increment属性，其默认值为1. Stepper视觉效果仅由两个带有减号和加号的按钮组成。这两个按钮的按下会根据Increment属性在Minimum到Maximum之间逐步更改值。
虽然Stepper的Value和其他属性是double类型，但Stepper通常用于选择整数值。您可能不希望（（最大 - 最小）÷增量）的值高达100，如默认值所示。如果您在其中一个按钮上按住手指，则会在iOS上触发打字重复，但在Android或Windows 10 Mobile上则不会。不管你的程序为用户提供了另一种更改Stepper值的方法（可能是文本Entry视图），你不想强迫用户按100次按钮从最小值到最大值。
StepperDemo程序将Stepper的Maximum属性设置为10，并使用Step？per作为基本设计辅助来确定Button边框的最佳边框宽度。 StackLayout顶部的Button仅用于显示目的，并具有BackgroundColor和BorderColor的必要属性设置，以启用Android和Windows 10 Mobile上的边框显示。
Stepper是以下StackLayout中的最后一个子节点。 Button和Stepper之间是一对Label元素，用于显示当前的Stepper值：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StepperDemo.StepperDemoPage">
    <StackLayout>
        <Button x:Name="button"
                Text=" Sample Button "
                FontSize="Large"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand">
            <Button.BackgroundColor>
                <OnPlatform x:TypeArguments="Color"
                            Android="#404040" />
                </Button.BackgroundColor>
            <Button.BorderColor>
                <OnPlatform x:TypeArguments="Color"
                            Android="#C0C0C0"
                            WinPhone="Black" />
            </Button.BorderColor>
        </Button>
        <StackLayout VerticalOptions="CenterAndExpand">
 
            <StackLayout Orientation="Horizontal"
                         HorizontalOptions="Center">
                <StackLayout.Resources>
                    <ResourceDictionary>
                        <Style TargetType="Label">
                            <Setter Property="FontSize" Value="Medium" />
                        </Style>
                    </ResourceDictionary>
                </StackLayout.Resources>
 
                <Label Text="Button Border Width =" />
                <Label x:Name="label" />
            </StackLayout>
            <Stepper x:Name="stepper"
                     Maximum="10"
                     ValueChanged="OnStepperValueChanged"
                     HorizontalOptions="Center" />
        </StackLayout>
    </StackLayout>
</ContentPage>

显示Stepper值的Label从代码隐藏文件的构造函数初始化。 随着Stepper的Value属性的每次更改，事件处理程序显示新值并设置Button边框宽度：

public partial class StepperDemoPage : ContentPage
{
    public StepperDemoPage()
    {
        InitializeComponent();
        // Initialize display.
        OnStepperValueChanged(stepper, null);
    }
    void OnStepperValueChanged(object sender, ValueChangedEventArgs args)
    {
        Stepper stepper = (Stepper)sender;
        button.BorderWidth = stepper.Value;
        label.Text = stepper.Value.ToString("F0");
    }
}