如何创建一个从左到右慢慢填充 5、10 或 ?? 的条形区域秒？

Question

我有一个带有计时器的应用程序，它可以计时 1 到 300 秒之间的任何时间。目前，我将剩余时间显示为每隔一秒倒计时的数字。这是通过绑定标签vm.Timer完成的

        App.Timer1Seconds = 10; // the value is set in code
                                // just using 10 as an example here

        while (App.Timer1Seconds > 0)
        {
            vm.Timer = App.Timer1Seconds.ToString();
            try
            {
                await Task.Delay(1000, App.tokenSource1.Token);
            }
            catch (TaskCanceledException)
            {
                App.Timer1Seconds = 0;
            }
            App.Timer1Seconds--;
        }

我想做的是将其替换为 屏幕顶部和网格内的条形区域，使其看起来像这样：

*********************

然后

********************

然后

*******************

然后

******************

随着时间的推移，填充条的百分比从完全填充到无填充，时间过程可能是 300 到 3 秒。有点类似于网络浏览器中检索页面时的进度条，但在这种情况下，我知道活动的确切时间。

有人对如何创建它有任何想法吗？请注意，如果它需要自定义渲染器，那么我可以接受该解决方案。

更新：

我已经实施了 Sharada 的解决方案，但我有两个小问题：

这是我的 XAML 代码：

<Grid Grid.Row="3" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Aqua" RowSpacing="0" Padding="0">
   <Grid.RowDefinitions>
      <RowDefinition Height="2" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <local:TimerView Grid.Row="0" Grid.Column="0" StartTimerCommand="{Binding TimerStartCommand}" RemainingTime="{Binding TimeLeft}" HorizontalOptions="FillAndExpand" />
</Grid>

当它运行时，我希望进度条从右到左占据整个屏幕。然而，它似乎只使用了大约 10% 的空间，如下所示：

|******                                                         |
|*****                                                          |
|****                                                           |
|***                                                            |
|**                                                             |
|*                                                              |

您能否建议我如何使动画从屏幕的一侧移动到另一侧，然后像这样缩小尺寸：

|***************************************************************|
|************************************************************** |
|*************************************************************  |

...

|**                                                             |
|*                                                              |
|                                                               |

我注意到后面的代码中没有 timerView 的定义。这是我添加的内容：

var timerView = new TimerView();

让我知道是否可以。

更新 2：

这是页面的完整代码。我仍然对为什么标签没有从页面的一侧填充到另一侧感到困惑：

<?xml version="1.0" encoding="UTF-8"?>
<Frame xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Japanese;assembly=Japanese" x:Class="Japanese.PhrasesFrame" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" Padding="0" HasShadow="false">
    <StackLayout x:Name="phrasesFrameStackLayout" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" IsVisible="false">
        <Grid x:Name="phraseGrid" BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0,0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="8*" />
                <RowDefinition Height="70*" />
                <RowDefinition Height="8*" />
                <RowDefinition Height="4*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" RowSpacing="5" Grid.Column="0" BackgroundColor="#EEEEEE" Padding="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid IsVisible="{Binding InfoGridVisible, Converter={StaticResource InverseBoolConverter} }" VerticalOptions="FillAndExpand">
                </Grid>
                <Grid IsVisible="{Binding InfoGridVisible}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10*" />
                        <ColumnDefinition Width="10*" />
                        <ColumnDefinition Width="60*" />
                        <ColumnDefinition Width="5*" />
                        <ColumnDefinition Width="10*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="50*" />
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
                    <Label Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" x:Name="statLabel" Style="{StaticResource smallLabel}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding StatLabel}" />
                    <Label Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="3" x:Name="cvmLabel" Style="{StaticResource smallLabel}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding CvmLabel}" />
                    <Label Grid.Row="1" Grid.Column="0" x:Name="faveLabel" Style="{StaticResource smallIcon}" FontFamily="FontAwesome" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" />
                    <Label Grid.Row="1" Grid.Column="1" x:Name="hiddenLabel" Style="{StaticResource smallIcon}" FontFamily="FontAwesome" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" />
                    <Label Grid.Row="1" Grid.Column="2" x:Name="wordTypeLabel" Style="{StaticResource smallLeftLabel}" HorizontalTextAlignment="Start" Text="{Binding WordType}" />
                    <Label Grid.Row="1" Grid.Column="3" x:Name="points1" Style="{StaticResource smallLabel}" Text="{Binding Points1}" HorizontalTextAlignment="Start" />
                    <Label Grid.Row="1" Grid.Column="4" x:Name="points2" Style="{StaticResource smallLabel}" Text="{Binding Points2}" HorizontalTextAlignment="Start" />
                    <Label Grid.Row="1" Grid.Column="5" x:Name="timer" Style="{StaticResource smallLabel}" Text="{Binding Timer}" HorizontalTextAlignment="Start" />
                </Grid>
            </Grid>
            <Grid Grid.Row="1" Grid.Column="0" Padding="10,0,10,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#EEEEEE">
                <Frame CornerRadius="10" HasShadow="false">
                    <Grid>
                        <Grid IsVisible="{Binding WordGridVisible}" Padding="10" BackgroundColor="White">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding WordGridClickedCommand}" />
                            </Grid.GestureRecognizers>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="45*" />
                                <RowDefinition Height="55*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                <Label x:Name="textLabel" Style="{StaticResource bigLabel}" XAlign="Center" VerticalOptions="Center" LineBreakMode="WordWrap" Text="{Binding TextLabel}" />
                            </Grid>
                            <Grid Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,0,10,0" IsVisible="{Binding DetailGridVisible}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Label x:Name="detail1" Grid.Row="0" Style="{StaticResource bigLabel}" Text="{Binding Detail1}" />
                                <Label x:Name="detail2" Grid.Row="1" Style="{StaticResource bigLabel}" Text="{Binding Detail2}" />
                                <Label x:Name="detail3" Grid.Row="2" Style="{StaticResource bigLabel}" Text="{Binding Detail3}" />
                            </Grid>
                        </Grid>
                        <Grid IsVisible="{Binding EmptyGridVisible}" Padding="10" BackgroundColor="White">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50*" />
                                <RowDefinition Height="50*" />
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0">
                                <Label FontSize="15" XAlign="Start" TextColor="Gray" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Text="{Binding EmptyLabel1}" />
                            </Grid>
                            <Grid Grid.Row="1">
                                <Label FontSize="15" XAlign="Start" TextColor="Gray" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Text="{Binding EmptyLabel2}" />
                            </Grid>
                        </Grid>
                    </Grid>
                </Frame>
            </Grid>
            <Grid Grid.Row="2" x:Name="buttonGrid" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#EEEEEE">
                <Grid IsVisible="{Binding EmptyFooterGridVisible }" Padding="10, 0" VerticalOptions="FillAndExpand" BackgroundColor="#EEEEEE">
                </Grid>
                <Grid IsVisible="{Binding ButtonGridVisible}" Padding="0" BackgroundColor="#EEEEEE" VerticalOptions="FillAndExpand">
                    <Grid IsVisible="{Binding CustomPointsSwitch}" VerticalOptions="FillAndExpand" Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" x:Name="aButton" Style="{StaticResource pointButton}" Text="Don't Know" BackgroundColor="#ff3b30" BorderColor="#ff3b30" TextColor="White" Command="{Binding AButtonClickedCommand}" />
                        <Button Grid.Column="1" x:Name="bButton" Style="{StaticResource pointButton}" Text="Very Hard" BackgroundColor="#FF9500" BorderColor="#FF9500" TextColor="White" Command="{Binding BButtonClickedCommand}" />
                        <Button Grid.Column="2" x:Name="cButton" Style="{StaticResource pointButton}" Text="Hard" BackgroundColor="#FFCC00" BorderColor="#FFCC00" TextColor="White" Command="{Binding CButtonClickedCommand}" />
                        <Button Grid.Column="3" x:Name="dButton" Style="{StaticResource pointButton}" Text="Easy" BackgroundColor="#4cd964" BorderColor="#4cd964" TextColor="White" Command="{Binding DButtonClickedCommand}" />
                    </Grid>
                    <Grid IsVisible="{Binding CustomPointsSwitch, Converter={StaticResource InverseBoolConverter} }" VerticalOptions="FillAndExpand" Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" VerticalOptions="FillAndExpand" Style="{StaticResource pointButton}" Text="Don't Know" BackgroundColor="#ff3b30" BorderColor="#ff3b30" TextColor="White" Command="{Binding NButtonClickedCommand}" />
                        <Button Grid.Column="1" VerticalOptions="FillAndExpand" Style="{StaticResource pointButton}" Text="Easy" BackgroundColor="#4cd964" BorderColor="#4cd964" TextColor="White" Command="{Binding YButtonClickedCommand}" />
                    </Grid>
                </Grid>
                <Grid IsVisible="{Binding ResetGridVisible}" Padding="10">
                    <Button Text="Reset All Points to Zero" TextColor="White" BackgroundColor="#4cd964" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Command="{Binding ResetButtonClickedCommand}" />
                </Grid>
            </Grid>
            <!--            <Grid x:Name="tapGrid" Grid.Row="3" Grid.Column="0" Padding="5,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
                <Label x:Name="tapScreenLabel" Style="{StaticResource smallLabel}" />
            </Grid>-->
            <Grid Grid.Row="3" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Aqua" RowSpacing="0" Padding="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="5" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <local:TimerView Grid.Row="0" Grid.Column="0" StartTimerCommand="{Binding TimerStartCommand}" RemainingTime="{Binding TimeLeft}" HorizontalOptions="FillAndExpand" />
            </Grid>
        </Grid>
    </StackLayout>
</Frame>

Answer 1

正如@hvaughan3 建议的那样，可以使用ProgressBar 控件。

但如果需要创建具有自定义外观和自定义动画的控件，那么您可以创建自己的自定义进度条。

第一步是处理Width 动画的create a custom animation。

public static class ViewExtensions
{
    public static Task<bool> WidthTo(this VisualElement self, double toWidth, uint length = 250, Easing easing = null)
    {
        easing = easing ?? Easing.Linear;
        var taskCompletionSource = new TaskCompletionSource<bool>();

        var animation = new Animation(
            callback: d => AbsoluteLayout.SetLayoutBounds(self, new Rectangle(0, 0, d, self.Height)),
            start: self.Width,
            end: toWidth,
            easing: easing);

        var offset = 1000;
        animation.Commit(self, "WidthTo", 
                         rate: Convert.ToUInt32(offset), 
                         length: length,
                         finished: (v, c) => taskCompletionSource.SetResult(c)
                        );

        return taskCompletionSource.Task;
    }
}

下一步是创建一个扩展 AbsoluteLayout 并具有以下子控件的自定义控件：

1. 进度条视图：以条形表示剩余时间进度

2. 轨迹栏视图：代表全长

3. 计时器标签视图：将剩余时间表示为文本标签

自定义控件可以使用DeviceTimer 来保持标签更新，同时使用上面的动画（如我们定义的那样）将进度条动画化。

最后一步是创建一个将触发计时器的命令。我们使用命令属性，使其对 MVVM 友好（即也可以通过视图模型触发）。

public class TimerView : AbsoluteLayout
{
    public TimerView()
    {
        //Load view when size has been allocated
        SizeChanged += (sender, e) =>
        {
            if (Width == 0 || Height == 0)
                return;

            if (TrackBar == null || ProgressBar == null)
                return;


            Children.Clear();

            //ensure track-bar gets full width and height as parent
            SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);
            SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));
            Children.Add(TrackBar);

            //ensure progress-bar gets full height, but width can be changed
            SetLayoutFlags(ProgressBar, AbsoluteLayoutFlags.None);
            SetLayoutBounds(ProgressBar, new Rectangle(0, 0, Width, Height));
            Children.Add(ProgressBar);

            //if timer-label available, ensure it gets full width and height
            if (TimerLabel != null)
            {
                SetLayoutFlags(TimerLabel, AbsoluteLayoutFlags.SizeProportional);
                SetLayoutBounds(TimerLabel, new Rectangle(0, 0, 1, 1));
                Children.Add(TimerLabel);

                TimerLabel.SetBinding(BindingContextProperty, new Binding(nameof(RemainingTime), source: this));
            }

            if (AutoStart != default(TimeSpan))
            {
                RemainingTime = AutoStart;
                StartTimerCommand.Execute(RemainingTime);
            }    
        };

        StartTimerCommand = new Command(async (timer) =>
        {
            if (!IsEnabled)
                return;

            //reset progress-bar width
            SetLayoutBounds(ProgressBar, new Rectangle(0, 0, Width, Height));
            if (timer != null && timer is TimeSpan)
                RemainingTime = (TimeSpan)timer;

            IsEnabled = false;

            //Start timer for label update
            var ctrlTobeUpdated = this;
            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
            {
                var oneSecond = TimeSpan.FromSeconds(1);

                ctrlTobeUpdated.RemainingTime -= oneSecond;
                if (ctrlTobeUpdated.RemainingTime < oneSecond)
                {
                    ctrlTobeUpdated = null;
                    return false;
                }
                else
                    return true;
            });

            //Start animation
            await ProgressBar.WidthTo(0, Convert.ToUInt32(RemainingTime.TotalMilliseconds));
            IsEnabled = true;
        });

    }

    public static readonly BindableProperty TrackBarProperty =
        BindableProperty.Create(
            "TrackBar", typeof(View), typeof(TimerView),
            defaultValue: null);

    public View TrackBar
    {
        get { return (View)GetValue(TrackBarProperty); }
        set { SetValue(TrackBarProperty, value); }
    }

    public static readonly BindableProperty ProgressBarProperty =
        BindableProperty.Create(
            "ProgressBar", typeof(View), typeof(TimerView),
            defaultValue: null);

    public View ProgressBar
    {
        get { return (View)GetValue(ProgressBarProperty); }
        set { SetValue(ProgressBarProperty, value); }
    }

    public static readonly BindableProperty TimerLabelProperty =
        BindableProperty.Create(
            "TimerLabel", typeof(Label), typeof(TimerView),
            defaultValue: default(Label));

    public Label TimerLabel
    {
        get { return (Label)GetValue(TimerLabelProperty); }
        set { SetValue(TimerLabelProperty, value); }
    }

    public static readonly BindableProperty StartTimerCommandProperty =
        BindableProperty.Create(
            "StartTimerCommand", typeof(ICommand), typeof(TimerView),
            defaultBindingMode: BindingMode.OneWayToSource,
            defaultValue: default(ICommand));

    public ICommand StartTimerCommand
    {
        get { return (ICommand)GetValue(StartTimerCommandProperty); }
        set { SetValue(StartTimerCommandProperty, value); }
    }

    public static readonly BindableProperty RemainingTimeProperty =
        BindableProperty.Create(
            "RemainingTime", typeof(TimeSpan), typeof(TimerView),
            defaultBindingMode: BindingMode.OneWayToSource,
            defaultValue: default(TimeSpan));

    public TimeSpan RemainingTime
    {
        get { return (TimeSpan)GetValue(RemainingTimeProperty); }
        set { SetValue(RemainingTimeProperty, value); }
    }

    public static readonly BindableProperty AutoStartProperty =
        BindableProperty.Create(
            "AutoStart", typeof(TimeSpan), typeof(TimerView),
            defaultValue: default(TimeSpan));

    public TimeSpan AutoStart
    {
        get { return (TimeSpan)GetValue(AutoStartProperty); }
        set { SetValue(AutoStartProperty, value); }
    }
}

示例用法 1

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="5" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <local:TimerView Grid.Column="0" Grid.Row="0" x:Name="timerView">
        <local:TimerView.ProgressBar>
            <BoxView BackgroundColor="Maroon" />
        </local:TimerView.ProgressBar>
        <local:TimerView.TrackBar>
            <BoxView BackgroundColor="Gray" />
        </local:TimerView.TrackBar>
    </local:TimerView>

    <Label Grid.Row="1" Text="{Binding Path=RemainingTime, StringFormat='{0:%s} seconds left', Source={x:Reference timerView}}" HorizontalOptions="Center" /> 
    <Button VerticalOptions="Start" Grid.Row="2" Text="Start Timer" x:Name="startBtn" Clicked="Handle_Clicked" />

</Grid>

代码隐藏

void Handle_Clicked(object sender, System.EventArgs e)
{
    timerView.StartTimerCommand.Execute(TimeSpan.FromSeconds(10));
}

示例用法 2 - 自定义外观

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="5" />
        <RowDefinition Height="25" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
     <local:TimerView Grid.Row="1" x:Name="timerView">
        <local:TimerView.ProgressBar>
            <Frame HasShadow="false" Padding="0" Margin="0" BackgroundColor="Aqua" />
        </local:TimerView.ProgressBar>
        <local:TimerView.TrackBar>
            <Frame HasShadow="true" Padding="0" Margin="0" />
        </local:TimerView.TrackBar>
        <local:TimerView.TimerLabel>
            <Label Text="{Binding Path=., StringFormat='{0:%m}:{0:%s}'}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" /> 
        </local:TimerView.TimerLabel>
    </local:TimerView>

    <Button VerticalOptions="Start" Grid.Row="2" Text="Start Timer" x:Name="startBtn" Clicked="Handle_Clicked" />
</Grid>

编辑 - 1

示例用法 3 - 查看模型

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="5" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <local:TimerView Grid.Row="0" StartTimerCommand="{Binding TimerStartCommand}" RemainingTime="{Binding TimeLeft}">
        <local:TimerView.ProgressBar>
            <BoxView BackgroundColor="Maroon" />
        </local:TimerView.ProgressBar>
        <local:TimerView.TrackBar>
            <BoxView BackgroundColor="Gray" />
        </local:TimerView.TrackBar>
    </local:TimerView>
    <Label Grid.Row="1" Text="{Binding Path=TimeLeft, StringFormat='{0:%s}'}" HorizontalOptions="Center" /> 
    <Button VerticalOptions="Start" Grid.Row="2" Text="Start Timer" Command="{Binding ButtonClickCommand}" />

</Grid>

查看模型

public class ProgressVM : BaseViewModel
{
    public Command TimerStartCommand { get; set; }
    public Command ButtonClickCommand => new Command(() => TimerStartCommand?.Execute(TimeSpan.FromSeconds(20)));

    private TimeSpan _timeLeft;
    public TimeSpan TimeLeft
    {
        get { return _timeLeft; }
        set
        {
            _timeLeft = value;
            OnPropertyChanged();
        }
    }
}

编辑 - 2：根据问题更新

如果你需要一个在瞬间从左到右然后又回到左的动画；这也可以通过控制中的小更新来实现。

然后，您需要更新SizeChanged 处理程序和StartTimer 处理程序，如下所示：

public class TimerView : AbsoluteLayout
{
    public TimerView()
    {
        SizeChanged += (sender, e) =>
        {
            if (Width == 0 || Height == 0)
                return;

            if (TrackBar == null || ProgressBar == null)
                return;


            Children.Clear();

            SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);
            SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));
            Children.Add(TrackBar);

            SetLayoutFlags(ProgressBar, AbsoluteLayoutFlags.None);
            SetLayoutBounds(ProgressBar, new Rectangle(0, 0, 0, Height));
            Children.Add(ProgressBar);

            if(TimerLabel != null)
            {
                SetLayoutFlags(TimerLabel, AbsoluteLayoutFlags.SizeProportional);
                SetLayoutBounds(TimerLabel, new Rectangle(0, 0, 1, 1));
                Children.Add(TimerLabel);

                TimerLabel.SetBinding(BindingContextProperty, new Binding(nameof(RemainingTime), source: this));
            }
        };

        StartTimerCommand = new Command(async (timer) =>
        {
            if (!IsEnabled)
                return;

            if (timer != null && timer is TimeSpan)
                RemainingTime = (TimeSpan)timer;

            IsEnabled = false;

            var ctrlTobeUpdated = this;
            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
            {
                var oneSecond = TimeSpan.FromSeconds(1);

                ctrlTobeUpdated.RemainingTime -= oneSecond;
                if (ctrlTobeUpdated.RemainingTime < oneSecond)
                {
                    ctrlTobeUpdated = null;
                    return false;
                }
                else
                    return true;
            });

            await ProgressBar.WidthTo(Width, Convert.ToUInt32(150));
            await ProgressBar.WidthTo(0, Convert.ToUInt32(RemainingTime.TotalMilliseconds - 150));
            IsEnabled = true;
        });

    }

编辑 - 3：删除了 ProgressBar 和 TimerBar 的可绑定属性定义中默认值的代码/支持。

EDIT - 4：添加对加载时自动启动计时器的支持。

示例用法 4：自动启动计时器

XAML

<local:TimerView AutoStart="0:0:20"> <!-- timespan for 20 seconds or VM based AutoStart="{Binding SetTime}" -->
    <local:TimerView.ProgressBar>
        <BoxView BackgroundColor="Maroon" />
    </local:TimerView.ProgressBar>
    <local:TimerView.TrackBar>
        <BoxView BackgroundColor="Gray" />
    </local:TimerView.TrackBar>
</local:TimerView>

EDIT - 5：添加对计时器暂停和停止命令的支持。还更新了计时器视图，使其在设备方向更改方面更具弹性。

• 源代码：TimerView.cs
• 源代码：TimerView.Properties.cs

Answer 2

正如 cmets 中已经提到的，Xamarin.Forms.ProgressBar 在这种情况下会很好地工作。

为了帮助创建此功能，使用了以下类。类似于您对标签所做的操作。

public class CountDownTimer {
    TimeSpan delay = TimeSpan.FromSeconds(1);

    public Task Wait(int seconds, IProgress<CountdownReport> progress = null) {
        return Wait(seconds, CancellationToken.None, progress);
    }

    public async Task Wait(int seconds, CancellationToken cancellationToken = default (CancellationToken), IProgress<CountdownReport> progress = null) {
        var total = TimeSpan.FromSeconds(seconds);
        var current = total.TotalSeconds;
        while (current > 0) {
            reportProgress(progress, total, current);
            try {
                //simulate wait
                await Task.Delay(delay, cancellationToken);
            } catch (TaskCanceledException e) {
                current = 0;
            }
            current--;
        }
        if (current > -1) {
            reportProgress(progress, total, current);
        }
    }

    private void reportProgress(IProgress<CountdownReport> progress, TimeSpan total, double current) {
        if (progress != null) {
            var percentageRemaining = (int)((current / total.TotalSeconds) * 100);
            var progressPercentage = 100 - percentageRemaining;
            var timeRemaining = TimeSpan.FromSeconds(current);
            var report = new CountdownReport {
                InitialTime = total,
                RemainingTime = timeRemaining,
                ProgressPercentage = progressPercentage,
                RemainingPercentage = percentageRemaining
            };
            //report progress
            progress.Report(report);
        }
    }
}

public class CountdownReport {
    public TimeSpan InitialTime { get; set; }
    public int ProgressPercentage { get; set; }        
    public int RemainingPercentage { get; set; }
    public TimeSpan RemainingTime { get; set; }        
}

假设您有一个名为 progressBar 的 ProgressBar 视图

public async void btnStartTimer_Click(object sender, EventArgs args) {
    var time = App.Timer1Seconds; //Just using as an example;    
    var timer = new CountDownTimer();
    var progress = new CountDownPercentage(e => {        
        var remainingTime = e.RemainingTime;
        App.Timer1Seconds = remainingTime.TotalSeconds;
        var progressPercentage = e.ProgressPercentage;
        progressBar.Progress = progressPercentage / 100;
    });
    // start countdown and wait
    await timer.Wait(time, App.tokenSource1.Token, progress);

    //...do anything else needed after the countdown completes.
}

CountDownPercentage 被定义为

public class CountDownPercentage : IProgress<CountdownReport> {
    private Action<CountdownReport> handler;
    public CountDownPercentage(Action<CountdownReport> handler) {
        this.handler = handler;
    }
    public void Report(CountdownReport value) {
        if (handler != null) {
            handler(value);
        }
    }
}

虽然上面的示例在按钮单击中启动倒计时，但可以对适合您的场景的任何其他事件或命令执行相同的操作。上述策略仍有修改空间。这是一个很好的基础。

Example .Net fiddle of the code above