MAUI新生5.6-Form表单类控件难点

 一、表单类控件目录

• Entry，单行输入框
• Edit，多行输入框
• CheckBox，复选框
• RadioButton，单选框
• Picker，下拉单选框
• Switch，开关
• Slider，滑块
• Stepper，步进器
• DataPicker，日期选择框
• TimePicker，时间选择框
• ActivityIndicator，显示等待
• ProgressBar，进度条
• Button，按钮
• ImageButton，图形按钮

二、使用经验

• 表单类控件的使用都比较简单，没有特别复杂的操作。
• 但是内置的表单控件不够丰富，如下拉多选框、复选框组、联级选择、时间范围、富文本框、评分、树状选择等，目前都缺失，需要补充第三方控件库
• 由于表单类控件主要应用于数据输入，所以实际开发中，都要结合数据绑定和数据验证使用。

三、控件难点

1、RadioButton，单选框分组和选定值

<!--RadioButton的使用案例-->
<ContentPage
    ......
    xmlns:vm="clr-namespace:MauiApp15.ViewModels">
    <!--实例化ViewModel，并设置为BindingContext-->
    <ContentPage.BindingContext>
        <vm:MainPageViewModel/>
    </ContentPage.BindingContext>

    <!--
    ①作为布局组件子元素的RadioButton，会自动隐式分组。也可以显式分组，如下例中用附加属性RadioButtonGroup.GroupName分组
    ②还有一种显示分组方案【<RadioButton Content="Red" GroupName="colors" />】，组内选项相互排斥
    ③当RadioButton的IsChecked属性发生属性变时，触发CheckedChanged事件，同时附加属性RadioButtonGroup.SelectedValue的值更改为选定值
    ④下例中：附加属性RadioButtonGroup.SelectedValue绑定ViewModel的Selection，同时Label也绑定这个值，实现选项改变时，Lable值也改变
    -->
    <StackLayout RadioButtonGroup.GroupName="{Binding GroupName}" RadioButtonGroup.SelectedValue="{Binding Selection}">
        <Label Text="你最喜欢的动物是?" />
        <RadioButton Content="Cat" Value="Cat" />
        <RadioButton Content="Dog" Value="Dog" />
        <RadioButton Content="Elephant" Value="Elephant" />
        <RadioButton Content="Monkey" Value="Monkey" />
        <Label x:Name="animalLabel">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="你已选定:" />
                    <Span Text="{Binding Selection}" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>

</ContentPage>

<!--ViewModel-->
public partial class MainPageViewModel: ObservableObject
{
    [ObservableProperty]
    private string groupName = "animals";

    [ObservableProperty]
    private string selection = string.Empty;
}

2、ProgressBar，结合动画展示进度条

<!--进度条的XAML-->
<ContentPage
    ......>

    <StackLayout>
        <!--Progress属性为进度百分比，double类型，值范围0-1。下例未设置，默认值为0-->
        <ProgressBar x:Name="progressBar" ProgressColor="Orange" />
        <!--点击按钮，执行后台代码，更改Progress的进度百分比-->
        <Button Clicked="Button_Clicked" Text="点击" />
    </StackLayout>
</ContentPage>


<!--通过后台代码修改进度条的进度值-->
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        //将progressBar的进度百分比（Progress），以线性动画的方式，在5000毫秒以内，调整到1.0（100%）
        await progressBar.ProgressTo(1.0, 5000, Easing.Linear);
        //重新将进度百分比设置为0
        progressBar.Progress = 0.0;
    }
}