能否在Xamarin中实现持续运行的自定义进度条效果？

自定义循环进度条控件 #

通过自定义ContentView封装轨道和可循环移动的进度块，实现持续运行的效果：

XAML 代码 #

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.LoopProgressBar">
    <RelativeLayout x:Name="TrackContainer" 
                    BackgroundColor="#E5E5E5" 
                    CornerRadius="4">
        <BoxView x:Name="ProgressBlock" 
                 WidthRequest="100" 
                 BackgroundColor="#42A5F5" 
                 CornerRadius="4" />
    </RelativeLayout>
</ContentView>

后台逻辑代码 #

添加动画循环逻辑，支持自定义进度块宽度，适配控件尺寸变化：

using Xamarin.Forms;

namespace YourNamespace
{
    public partial class LoopProgressBar : ContentView
    {
        // 可绑定属性：进度块宽度
        public static readonly BindableProperty BlockWidthProperty =
            BindableProperty.Create(nameof(BlockWidth), typeof(double), typeof(LoopProgressBar), 100.0);

        public double BlockWidth
        {
            get => (double)GetValue(BlockWidthProperty);
            set => SetValue(BlockWidthProperty, value);
        }

        private bool _isAnimating = true;

        public LoopProgressBar()
        {
            InitializeComponent();
            ProgressBlock.WidthRequest = BlockWidth;
            StartLoop();
        }

        private async void StartLoop()
        {
            while (_isAnimating)
            {
                // 从左移动到轨道右边界
                await ProgressBlock.TranslateTo(TrackContainer.Width - BlockWidth, 0, 1600, Easing.Linear);
                // 瞬间重置到左边界，准备下一轮循环
                ProgressBlock.TranslationX = 0;
                // 可选：添加短暂停顿，调整循环节奏
                await Task.Delay(150);
            }
        }

        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            // 控件尺寸变化时更新进度块宽度
            if (width > 0)
            {
                ProgressBlock.WidthRequest = BlockWidth;
            }
        }

        // 提供停止动画的方法，避免页面销毁后内存泄漏
        public void StopAnimation()
        {
            _isAnimating = false;
        }
    }
}

页面使用示例 #

在任意页面中直接引用自定义控件，可通过属性调整样式：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <local:LoopProgressBar HeightRequest="8" 
                               BlockWidth="120" 
                               Margin="0,15,0,15" />
    </StackLayout>
</ContentPage>

优化扩展方向 #

• 新增可绑定属性：控制动画速度、轨道颜色、进度块颜色，提升控件灵活性
• 修改动画逻辑实现无缝循环：让进度块移出右边界后，从左边界外重新滑入，避免瞬间跳转的生硬感
• 在页面OnDisappearing方法中调用StopAnimation，防止内存泄漏

内容的提问来源于stack exchange，提问作者하하파파