第十五章:交互式界面(二)

滑块和步进

Slider和Stepper都允许用户从范围中选择数值。 它们具有几乎相同的编程接口,但包含非常不同的视觉和交互范例。
滑块基础知识
(Xamarin.Forms Slider不支持垂直方向。)用户在三个平台上选择滑块上的值略有不同:在iOS设备上,用户沿水平条拖动一个圆形的“拇指”。 Android和Windows 10移动滑块视图也有拇指,但它们对于触摸目标而言太小,用户只需点击水平条,或将手指拖动到特定位置即可。
Slider定义了double类型的三个公共属性,名为Minimum,Maximum和Value。每当Value属性更改时,Slider将触发一个指示新值的ValueChanged事件。
显示滑块时,您需要在左侧和右侧稍微填充一点,以防止滑块延伸到屏幕边缘。 SliderDemo程序中的XAML文件将Padding应用于StackLayout,它是Slider和Label的父级,用于显示Slider的当前值:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemo.SliderDemoPage">
 
    <StackLayout Padding="10, 0">
        <Slider VerticalOptions="CenterAndExpand"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="label"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

程序启动时,Label不显示任何内容,Slider拇指位于最左侧:
2018_09_05_113928
不要将Slider上的HorizontalOptions设置为Start,Center或End,也不要将WidthRequest设置为显式值,否则Slider将折叠成非常小或甚至不可用的宽度。
Slider通过触发ValueChanged事件来通知Value属性的更改代码。 如果以编程方式或通过用户操作更改Value,则会触发该事件。 这是带有事件处理程序的SliderDemo代码隐藏文件:

public partial class SliderDemoPage : ContentPage
{
    public SliderDemoPage()
    {
        InitializeComponent();
    }
    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        label.Text = String.Format("Slider = {0}", args.NewValue);
    }
}

像往常一样,事件处理程序的第一个参数是触发事件的对象,在本例中是Slider,第二个参数提供有关此事件的更多信息。 ValueChanged的处理程序的类型为EventHandler ,这意味着处理程序的第二个参数是ValueChangedEventArgs对象。 ValueChangedEventArgs定义了两个名为OldValue和NewValue的double类型的属性。 这个特殊的处理程序只是在一个字符串中使用NewValue,它设置为Label的Text属性:
2018_09_05_114141
一些实验表明,Slider的默认最小和最大设置为0和1.在编写本章时,Windows平台上的Slider默认增量为0.1。 对于“最小”和“最大”的其他设置,滑块限制为10个增量或步长为1,以较小者为准。 (更灵活的Slider将在第27章“自定义渲染器”中介绍。)
如果您对iOS屏幕上显示的过多小数点不满意,可以使用String.Format中的格式规范减少小数位数:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    label.Text = String.Format("Slider = {0:F2}", args.NewValue);
}

这不是编写ValueChanged处理程序的唯一方法。 另一种实现涉及将第一个参数转换为Slider对象,然后直接访问Value属性:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    Slider slider = (Slider)sender;
    label.Text = String.Format("Slider = {0}", slider.Value);
}

如果您在多个Slider视图之间共享事件处理程序,则使用sender参数是一种很好的方法。 在调用ValueChanged事件处理程序时,Value属性已具有其新值。
您可以将Slider的Minimum和Maximum属性设置为任何负值或正值,并指定Maximum始终大于Minimum。 例如,试试这个:

<Slider ValueChanged="OnSliderValueChanged"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

现在Slider值的范围是0到100。

猜你喜欢

转载自yq.aliyun.com/articles/635238