如何在Xamarin Forms中实现垂直样式的进度条

Xamarin Forms原生的ProgressBar默认是水平样式，要实现垂直进度条可以通过两种常用方式实现，以下是具体步骤：

方案一：旋转原生ProgressBar快速实现 #

直接利用原生控件的Rotation属性旋转90/270度，配合布局容器调整尺寸即可，适合快速需求：

<!-- 用Grid作为容器，固定宽高适配旋转后的进度条 -->
<Grid WidthRequest="40" HeightRequest="200">
    <ProgressBar Progress="0.6" 
                 Rotation="270"  <!-- 270度实现从上到下填充，90度为从下到上 -->
                 WidthRequest="200"  <!-- 与容器HeightRequest一致 -->
                 HeightRequest="40"   <!-- 与容器WidthRequest一致 -->
                 VerticalOptions="Center"
                 HorizontalOptions="Center"
                 ProgressColor="#2196F3"
                 BackgroundColor="#E0E0E0"/>
</Grid>

注意事项 #

• 旋转后控件的宽高会互换，所以要设置ProgressBar的WidthRequest等于容器的HeightRequest，反之亦然，避免布局错位
• 调整Rotation值控制进度填充方向：270度为从上到下，90度为从下到上

方案二：自定义渲染器实现更灵活的垂直进度条 #

如果需要更复杂的样式（比如渐变、圆角），可以通过自定义渲染器针对Android和iOS分别处理：

1. 共享项目中创建自定义控件 #

using Xamarin.Forms;

namespace YourApp.Controls
{
    public class VerticalProgressBar : ProgressBar
    {
        // 可扩展自定义属性，比如渐变颜色、圆角等
    }
}

2. Android端渲染器 #

using Android.Content;
using YourApp.Controls;
using YourApp.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(VerticalProgressBar), typeof(VerticalProgressBarRenderer))]
namespace YourApp.Droid.Renderers
{
    public class VerticalProgressBarRenderer : ProgressBarRenderer
    {
        public VerticalProgressBarRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 设置进度颜色
                Control.ProgressDrawable.SetColorFilter(
                    ((VerticalProgressBar)Element).ProgressColor.ToAndroid(),
                    Android.Graphics.PorterDuff.Mode.SrcIn);
                // 旋转为垂直方向
                Control.Rotation = 270;
                // 如需原生垂直进度条，可替换控件样式为@android:style/Widget.ProgressBar.Vertical
            }
        }
    }
}

3. iOS端渲染器 #

using CoreGraphics;
using YourApp.Controls;
using YourApp.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(VerticalProgressBar), typeof(VerticalProgressBarRenderer))]
namespace YourApp.iOS.Renderers
{
    public class VerticalProgressBarRenderer : ProgressBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 旋转为垂直方向
                Control.Transform = CGAffineTransform.MakeRotation((nfloat)(-Math.PI / 2));
                // 调整Frame适配布局尺寸
                Control.Frame = new CGRect(Control.Frame.X, Control.Frame.Y, Control.Frame.Height, Control.Frame.Width);
                // 设置进度和轨道颜色
                Control.ProgressTintColor = ((VerticalProgressBar)Element).ProgressColor.ToUIColor();
                Control.TrackTintColor = ((VerticalProgressBar)Element).BackgroundColor.ToUIColor();
            }
        }
    }
}

4. 在XAML中使用自定义控件 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourApp.Controls"
             x:Class="YourApp.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center">
        <controls:VerticalProgressBar Progress="0.7" 
                                      WidthRequest="40" 
                                      HeightRequest="200"
                                      ProgressColor="#4CAF50"
                                      BackgroundColor="#EEEEEE"/>
    </StackLayout>
</ContentPage>

扩展说明 #

自定义渲染器可以进一步扩展，比如添加渐变进度、圆角边框等，只需在对应平台的渲染器中修改原生控件的样式即可。

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