# Xamarin Forms 進度條控件 本文翻譯：http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 里面都是胡說的，如果看不懂可以聯系郵箱 源代碼：https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress 最近作者需要做一個簡單的圓形的等待控件在一個Xamarin Forms應用，效果可以看  <!--more--> <div id="toc"></div> 看起來很容易做，不知道怎么微軟就沒有弄個這么好看，微軟沒有，我們來直接做，看起來這個很簡單 原來的進度條是一個線，沒有UWP那個ring，我要做一個，可以使用本地控制、自定義渲染器渲染、使用組件里面弄很多我之前做的、到Nuget找，這些都覺得不是我要的。 看到他們沒有，我就很高興，我可以做一個很厲害的，自然這里我是原文的那個，寫了Xaml的大神 我首先拿出一個本子，我應該弄矢量圖形，在Xamarin原生還沒有，我會為每個平臺定制渲染，所以他不支持我不能使用，我想到使用圖片，矢量圖片，既然想要圖片我如何讓很多圖片看起來是一個  我想到簡單使用兩圖，實際對稱兩圖是表示4圖，不停覆蓋的兩個圖片表示進度，兩個圖片顏色不同   圖片可以在：https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress/CircularProgress/CircularProgress.Droid/Resources/drawable 兩個保存格式Png圖片，一個圖表示0-50%，我們叫第一圖“completed”，第二“pending”，顏色深的是第一，進度我們需要一個completed，兩個pending，我們先放completed，然后在它上面放pending，在pending對面放pending，第一個圖在代碼叫“progress1”，第二“background1”，第二個覆蓋第一個，第三個pending旋轉180，總的一個藍色圓，這是0%  25%：我們旋轉pending第二個，可以讓看到下面的圖，這個我們覆蓋原來的pending因為顏色一樣，所以我們就可以看到25%  50%：我們需要改變，兩個completed，一個pending，pending覆蓋completed，但是只是覆蓋一個，他們的層次： - completed - pending - completed 可以讓pending覆蓋右邊的completed，超過50%讓pending右旋 如果覺得上面說的還是不知道，可以看代碼 ```csharp using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace CircularProgress { public class CircularProgressControl : Grid { View progress1; View progress2; View background1; View background2; public CircularProgressControl() { progress1 = CreateImage("progress_done"); background1 = CreateImage("progress_pending"); background2 = CreateImage("progress_pending"); progress2 = CreateImage("progress_done"); HandleProgressChanged(1, 0); } private View CreateImage(string v1) { var img = new Image(); img.Source = ImageSource.FromFile(v1 + ".png"); this.Children.Add(img); return img; } public static BindableProperty ProgressProperty = BindableProperty.Create("Progress", typeof(double), typeof(CircularProgressControl), 0d, propertyChanged: ProgressChanged); private static void ProgressChanged(BindableObject bindable, object oldValue, object newValue) { var c = bindable as CircularProgressControl; 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); } } } } ``` 我們需要把圖片放在不同平臺的文件夾，ios放在Resources文件夾，Android放在 AndroidResource 我們把控件放MainPage.xaml ```xml <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CircularProgress.MainPage" xmlns:local="clr-namespace:CircularProgress" BackgroundColor="White"> <Grid> <local:CircularProgressControl x:Name="progressControl" Progress="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="60" HeightRequest="60"/> </Grid> </ContentPage> ``` 我們讓time進度加0.1每0.02s ```csharp namespace CircularProgress { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); Xamarin.Forms.Device.StartTimer(TimeSpan.FromSeconds(.02), OnTimer); } private bool OnTimer() { var progress = (progressControl.Progress + .1) ; if (progress > 1) progress = 0; progressControl.Progress = progress; return true; } } } ``` 不使用自定義渲染，可以在各個平臺沒有使用厲害的技術覆蓋兩個圖做出從0-100%，可以使用不同角度表示0.001 本文：http://blog.csdn.net/lindexi_gd