使用progressBar xamarin表单显示计时器 [英] display a timer using progressBar xamarin forms

问题描述

如何添加漂亮的计时器
xaml:

how to add a nice timer
xaml :

 <ProgressBar x:Name="progressBar" Grid.Row="2" Grid.ColumnSpan="5"
                    IsVisible="true"
                    Progress="0.0"
                    WidthRequest="300"
                    HeightRequest="20"
                    VerticalOptions="Center"
                    HorizontalOptions="Center">
                </ProgressBar>

隐藏代码:

progressBar.Progress = 0;
await progressBar.ProgressTo(1.0, 90000, Easing.Linear);

推荐答案

您可以使用计时器来递增ProgressBar:

You can use a timer to increment the ProgressBar:

var updateRate = 1000 / 30f; // 30Hz
double step = updateRate / (2 * 30 * 1000f);
Device.StartTimer(TimeSpan.FromMilliseconds(updateRate), () =>
{
    if (progressBar.Progress < 100)
    {
        Device.BeginInvokeOnMainThread(() => progressBar.Progress += step );
        return true;
    }
    return false;
});

然后，您可以使用IValueConverter将进度转换为分钟:秒样式格式:

Then you can use an IValueConverter to convert the progress to a minute:second style format:

public class CountDownConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double time = 0;
        double.TryParse(parameter.ToString(), out var totalTime);
        double.TryParse(value.ToString(), out var progress);
        time = progress <= double.Epsilon ? totalTime : (totalTime - (totalTime * progress));
        var timeSpan = TimeSpan.FromMilliseconds(time);
        return $"{timeSpan.Minutes:00;00}:{timeSpan.Seconds:00;00}";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

与XAML一起使用:

<Label
    BindingContext="{x:Reference progressBar}"
    Text = "{Binding Progress, StringFormat='{0:P0}'}"
    HorizontalOptions ="Center"
    FontSize="20"
    FontFamily = "Helvetica Neue"
    TextColor ="Red" />
<ProgressBar x:Name="progressBar"
    IsVisible="true"
    Progress="0.0"
    WidthRequest="300"
    HorizontalOptions="Center">
</ProgressBar>
<Label Text="{Binding Source={x:Reference progressBar},
                      Path=Progress,
                      Converter={StaticResource countDownTime},
                      ConverterParameter=120000}}"
    HorizontalOptions ="Center"
    FontSize="20"
    FontFamily = "Helvetica Neue"
    TextColor = "Red" />

输出:

更新:

您必须定义ResourceDictionary来创建和命名CountDownConverter类的实例，以便可以在XAML中引用它:

You have to define a ResourceDictionary to have an instance of the CountDownConverter class created and named so you can reference it in XAML:

<ContentPage.Resources>
    <ResourceDictionary>
        <tools:CountDownConverter x:Key="countDownTime"/>
    </ResourceDictionary>
</ContentPage.Resources>

tools:名称空间引用是基于包含CountDownConverter的C#名称空间和程序集.我在单独的库中有一堆这些IValueConverter类，因此我的xmlns:tools看起来像:

And the tools: namespace reference is based upon the C# namespace and assembly that contains the CountDownConverter. I have a bunch of these IValueConverter classes in a separate library and thus my xmlns:tools looks like:

xmlns:tools="clr-namespace:Converters;assembly=Converters"

re:资源字典

这篇关于使用progressBar xamarin表单显示计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！