MAUI新生6.5-表单类控件难点:RadioButton、ProgressBar
一、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; }
二、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; } }