我想知道用 Xamarin Forms 创建与此图像类似的东西的最佳方法：
我从来没有创造过这样的东西。我知道如何使用进度条，但不知道“圆形进度条”
感谢您的帮助和任何提示。
编辑：如果你有一个插件/nuget 来做到这一点，那很酷，但我想知道如何自己做。我从来没有做过这样的事情。
【问题讨论】：
标签： c# xaml controls xamarin.forms
My Trip Countdown 是一个 Xamarin.Forms 示例，用于展示如何使用 Xamarin.Forms 创建美观的 UI。此示例基于 Victoria Sgarro 设计的倒数计时器。
【讨论】：
我知道这是一篇旧帖子，但是像我这样的人在我们搜索循环进度时得到了这个帖子。
Andreas Hennig 做了一个不错的插件，适用于 iOS 和 Android，你可以从 nuget 安装它：Progress Ring Control Plugin
XAML
添加 XAML 命名空间：
xmlns:control="clr-namespace:ProgressRingControl.Forms.Plugin;assembly=ProgressRing.Forms.Plugin"
添加 xaml：
<control:ProgressRing RingThickness="20" Progress="0.5"/>
您可以在以下位置找到它：
【讨论】：
您可以使用自定义渲染器实现此目的。
Xamarin 的 James Montemagno 对创建自定义圆形进度条有很好的指导。
https://devblogs.microsoft.com/xamarin/using-custom-controls-in-xamarin-forms-on-android/
有关 Xamarin.Forms 自定义渲染器的官方文档可在以下位置找到 https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/
【讨论】：
我发现 this post 是迄今为止 Xamarin Forms“圆形进度条”的最佳解决方案。基本上，您使用两个半圆形图像并根据进度旋转它们，我认为这是一个非常有创意和优雅的解决方案。无需自定义渲染器！
【讨论】：
我尝试为 Xamarin Forms 找到一个库，但找不到任何同时支持 Android 和 iOS 的库。此外，从不同类型的进度指标中可供选择的选择并不多。我最终使用支持 Android 和 iOS 的 SkiaSharp 在 Xamarin Forms 中构建了我自己的自定义径向进度指示器小部件。
教程链接：https://medium.com/@kpshinde25/custom-radial-progress-indicator-in-xamarin-forms-c7ed81840c1e
您可以根据您的要求修改代码以具有圆形、多圆形指示器等。
【讨论】：
来自https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress的代码
public class CircularProgress : Grid
{
View progress1;
View progress2;
View background1;
View background2;
public CircularProgress()
{
var baseUrl = "https://github.com/billreiss/xamlnative/raw/master/XamarinForms/CircularProgress/CircularProgress/CircularProgress.Droid/Resources/drawable/";
progress1 = CreateImage($"{baseUrl}progress_done.png");
background1 = CreateImage($"{baseUrl}progress_pending.png");
background2 = CreateImage($"{baseUrl}progress_pending.png");
progress2 = CreateImage($"{baseUrl}progress_done.png");
HandleProgressChanged(1, 0);
}
private View CreateImage(string imageName)
{
var img = new Image();
img.Source = ImageSource.FromUri(new Uri(imageName));
this.Children.Add(img);
return img;
}
public static BindableProperty ProgressProperty =
BindableProperty.Create(nameof(Progress), typeof(double), typeof(CircularProgress), 0d, propertyChanged: ProgressChanged);
private static void ProgressChanged(BindableObject bindable, object oldValue, object newValue)
{
var c = bindable as CircularProgress;
c.HandleProgressChanged(Clamp((double)oldValue, 0, 1), Clamp((double)newValue, 0, 1));
}
static double Clamp(double value, double min, double max)
{
if (value <= max && value >= min) return value;
else if (value > max) return max;
else return min;
}
private void HandleProgressChanged(double oldValue, double p)
{
if (p < .5)
{
if (oldValue >= .5)
{
// this code is CPU intensive so only do it if we go from >=50% to <50%
background1.IsVisible = true;
progress2.IsVisible = false;
background2.Rotation = 180;
progress1.Rotation = 0;
}
double rotation = 360 * p;
background1.Rotation = rotation;
}
else
{
if (oldValue < .5)
{
// this code is CPU intensive so only do it if we go from <50% to >=50%
background1.IsVisible = false;
progress2.IsVisible = true;
progress1.Rotation = 180;
}
double rotation = 360 * p;
background2.Rotation = rotation;
}
}
public double Progress
{
get { return (double)this.GetValue(ProgressProperty); }
set { SetValue(ProgressProperty, value); }
}
}
【讨论】：