6.4-表单类控件难点：RadioButton、ProgressBar

最新推荐文章于 2025-05-17 20:55:39 发布

lmc19841126

最新推荐文章于 2025-05-17 20:55:39 发布

阅读量207

点赞数

分类专栏： Maui教程文章标签： ui 前端 c#

原文链接：https://www.cnblogs.com/functionMC/p/17009980.html

版权

Maui教程专栏收录该内容

33 篇文章

订阅专栏

6.4-表单类控件难点：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;
    }
}