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

简介:

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垂直居中。

目录
相关文章
|
8月前
|
测试技术 UED Python
App自动化测试:高级控件交互技巧
Appium 的 Actions 类支持在移动应用自动化测试中模拟用户手势,如滑动、长按等,增强交互性测试。ActionChains 是 Selenium 的概念,用于网页交互,而 Actions 专注于移动端。在Python中,通过ActionChains和W3C Actions可以定义手势路径,例如在手势解锁场景中,先点击设置,然后定义触点移动路径执行滑动解锁,最后验证解锁后的元素状态。此功能对于确保应用在复杂交互下的稳定性至关重要。
|
3月前
|
SQL 安全 前端开发
设计一个交互式网站
【10月更文挑战第8天】设计一个交互式网站
38 3
|
JavaScript Android开发
|
JavaScript Android开发 Windows
|
JavaScript Android开发 iOS开发
|
JavaScript Android开发 iOS开发

热门文章

最新文章