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

Ala*_*an2 6 xamarin xamarin.forms

我有一个带有计时器的应用程序,可以在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--;
        }
Run Code Online (Sandbox Code Playgroud)

我想要做的是用屏幕顶部和网格内的条形区域替换它,使它看起来像这样:

*********************
Run Code Online (Sandbox Code Playgroud)

然后

********************
Run Code Online (Sandbox Code Playgroud)

然后

*******************
Run Code Online (Sandbox Code Playgroud)

然后

******************
Run Code Online (Sandbox Code Playgroud)

随着时间的推移,条带的百分比从完全填充到没有任何东西以线性方式填充,可以是300到3秒.在检索页面时,有点类似于Web浏览器中的进度条,但在这种情况下,我知道活动的确切时间.

有没有人对如何创建它有任何想法?请注意,如果它需要自定义渲染器,那么我可以使用该解决方案.

更新:

我已经实施了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>
Run Code Online (Sandbox Code Playgroud)

当它运行时,我希望进度条从右到左占据整个屏幕.但是它似乎只使用了大约10%的空间,如下所示:

|******                                                         |
|*****                                                          |
|****                                                           |
|***                                                            |
|**                                                             |
|*                                                              |
Run Code Online (Sandbox Code Playgroud)

你能否建议我如何能够让动画从屏幕的一侧移动到另一侧,然后像这样缩小尺寸:

|***************************************************************|
|************************************************************** |
|*************************************************************  |
Run Code Online (Sandbox Code Playgroud)

...

|**                                                             |
|*                                                              |
|                                                               |
Run Code Online (Sandbox Code Playgroud)

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

var timerView = new TimerView();
Run Code Online (Sandbox Code Playgroud)

如果可以,请告诉我.

更新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>
Run Code Online (Sandbox Code Playgroud)

Sha*_*raj 10

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

但是,如果需要创建具有自定义外观和自定义动画的控件,则可以创建自己的自定义进度条.

第一步是创建一个处理Width动画的自定义动画.

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

下一步是创建一个扩展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); }
    }
}
Run Code Online (Sandbox Code Playgroud)

样品用法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>
Run Code Online (Sandbox Code Playgroud)

代码隐藏

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

在此输入图像描述

样本用法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>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

编辑 - 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>
Run Code Online (Sandbox Code Playgroud)

查看模型

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();
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

编辑 - 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;
        });

    }
Run Code Online (Sandbox Code Playgroud)

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

编辑 - 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>
Run Code Online (Sandbox Code Playgroud)

编辑 - 5:添加对计时器的暂停和停止命令的支持.此外,更新的计时器视图在设备方向更改方面更具弹性.