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

简介:

Switch和CheckBox

应用程序通常需要来自用户的布尔输入,这需要某种方式让用户将程序选项切换为开或关,是或否,真或假,或者您想要考虑它。 在Xamarin.Forms中,这是一个名为Switch的视图。
切换基础知识
Switch只定义了一个属性,名为bool类型的IsToggled,它会触发Toggled事件以指示此属性的更改。 在代码中,您可能倾向于为Switch指定一个开关名称,但这是一个C#关键字,因此您需要选择其他内容。 但是,在XAML中,您可以将x:Name属性设置为切换,并且XAML解析器将巧妙地创建名为@switch的字段,这是C#允许您使用C#关键字定义变量名称的方式。
SwitchDemo程序创建两个带有两个识别标签的Switch元素:“Italic”和“Boldface”。 每个Switch都有自己的事件处理程序,它格式化StackLayout底部的较大Label:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SwitchDemo.SwitchDemoPage">
    <StackLayout Padding="10, 0">
        <StackLayout HorizontalOptions="Center"
                     VerticalOptions="CenterAndExpand">
            <StackLayout Orientation="Horizontal"
                         HorizontalOptions="End">
                <Label Text="Italic: "
                       VerticalOptions="Center" />
                <Switch Toggled="OnItalicSwitchToggled"
                        VerticalOptions="Center" />
            </StackLayout>
 
            <StackLayout Orientation="Horizontal"
                         HorizontalOptions="End">
                <Label Text="Boldface: "
                       VerticalOptions="Center" />
                <Switch Toggled="OnBoldSwitchToggled"
                        VerticalOptions="Center" /> 
            </StackLayout>
        </StackLayout>
        <Label x:Name="label"
               Text=
"Just a little passage of some sample text that can be formatted
in italic or boldface by toggling the two Switch elements."
               FontSize="Large"
               HorizontalTextAlignment="Center"
               VerticalOptions="CenterAndExpand" />
 
    </StackLayout>
</ContentPage>

Toggled事件处理程序有第二个参数ToggledEventArgs,它具有类型为bool的Value属性,指示IsToggled属性的新状态。 SwitchDemo中的事件处理程序使用此值来设置或清除long Label的FontAttributes属性中的特定FontAttributes标志:

public partial class SwitchDemoPage : ContentPage
{
    public SwitchDemoPage()
    {
        InitializeComponent();
    }
    void OnItalicSwitchToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Italic;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Italic;
        }
    }
    void OnBoldSwitchToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Bold;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Bold;
        }
    }
}

Switch在三个平台上有不同的外观:
2018_09_11_114041
请注意,程序将两个Switch视图对齐,这使其外观更具吸引力,但这也意味着文本标签必然会有些错位。 要完成此格式化,XAML文件会将Label和Switch元素对中的每一个放在水平StackLayout中。每个水平StackLayout的HorizontalOptions设置为End,它对齐右边的每个StackLayout,父StackLayout将屏幕上的标签和开关集合中心设置为HorizontalOptions设置为Center。 在水平StackLayout中,两个视图的VerticalOptions属性都设置为Center。 如果Switch高于Label,则Label相对于Switch垂直居中。 但是如果Label比Switch高,Switch也相对于Label垂直居中。

目录
相关文章
|
JavaScript Android开发 Windows
|
JavaScript Android开发 iOS开发
|
JavaScript Android开发 索引
|
JavaScript Android开发
|
JavaScript Android开发 iOS开发