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