使用 Xamarin Forms 在 UWP 中自定义进度条颜色

Posted 2023-03-25

【中文标题】使用 Xamarin Forms 在 UWP 中自定义进度条颜色

【英文标题】：Customizing the progress bar color in UWP using Xamarin Forms

【发布时间】：2017-11-23 00:17:33

【问题描述】：

我进行了进度条自定义（自定义渲染器）以更改 ios 和 Droid 中的进度条颜色，如下所示

PCL 中的自定义进度条类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App2

   public class ColorProgressBar : ProgressBar
    
        public static BindableProperty BarColorProperty
            = BindableProperty.Create<ColorProgressBar, Color>(p => 
                     p.BarColor, default(Color));

        public Color BarColor
           
             get  return (Color)GetValue(BarColorProperty); 
             set  SetValue(BarColorProperty, value); 
           
     
  

iOS 自定义渲染器：

using App2;
using App2.iOS;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using Xamarin.Forms;

//using MonoTouch.Foundation;
//using MonoTouch.UIKit;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ColorProgressBar), 
typeof(ColorProgressBarRenderer))]

namespace App2.iOS

  public class ColorProgressBarRenderer : ProgressBarRenderer
    
      public ColorProgressBarRenderer()
       

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

         if (e.NewElement == null)
             return;

         if (Control != null)
         
            UpdateBarColor();
         
       

       protected override void OnElementPropertyChanged(object sender, 
       PropertyChangedEventArgs e)
        
          base.OnElementPropertyChanged(sender, e);

          if (e.PropertyName == 
              ColorProgressBar.BarColorProperty.PropertyName)
           
             UpdateBarColor();
           
         
        private void UpdateBarColor()
         
            var element = Element as ColorProgressBar;
            Control.TintColor = element.BarColor.ToUIColor();
         
      
  

android 自定义渲染器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.Renderscripts;
using static Java.Util.ResourceBundle;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;
using System.ComponentModel;
using Xamarin.Forms;
using App2;
using App2.Droid;

[assembly: ExportRenderer(typeof(ColorProgressBar), 
                        typeof(ColorProgressBarRenderer))]
namespace App2.Droid

    public class ColorProgressBarRenderer : ProgressBarRenderer
    
        public ColorProgressBarRenderer()
         

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

                  if (e.NewElement == null)
                      return;

                  if (Control != null)
                   
                      UpdateBarColor();
                   
               

       protected override void OnElementPropertyChanged(object sender, 
       PropertyChangedEventArgs e)
              
                 base.OnElementPropertyChanged(sender, e);

                 if (e.PropertyName == 
                      ColorProgressBar.BarColorProperty.PropertyName)
                    
                      UpdateBarColor();
                    
              

       private void UpdateBarColor()
              
                var element = Element as ColorProgressBar;
                // http://***.com/a/29199280
               Control.IndeterminateDrawable.SetColorFilter( 
               element.BarColor.ToAndroid(), PorterDuff.Mode.SrcIn);
               Control.ProgressDrawable.SetColorFilter( 
               element.BarColor.ToAndroid(), PorterDuff.Mode.SrcIn);
              
     

我这样设置自定义进度条的颜色：

var progressBar = new ColorProgressBar();
progressBar.BarColor = Color.Red; 

我不明白如何为 UWP 创建一个自定义渲染器类来更改进度条的颜色。有人可以帮我理解如何做这门课吗？

【参考方案1】：

您将要更新本机 Windows.UI.Xaml.Controls.ProgressBar 控件的 Foreground 属性以更改颜色。

它应该看起来像这样：

private void UpdateBarColor()

    var element = Element as ColorProgressBar;
    Control.Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(
        GetWindowsColor(element.BarColor));


Windows.UI.Color GetWindowsColor(Color color)

    return Windows.UI.Color.FromArgb((byte)(255 * color.A), (byte)(255 * color.R), (byte)(255 * color.G), (byte)(255 * color.B));

这将获取您的BarColor，使用它来制作正确颜色的SolidColorBrush，然后将其分配给您的原生ProgressBar 控件。

【讨论】：

适用于windows phone 非常感谢(^_^)

@paula 没问题！如果它回答了您的问题，请务必将此解决方案标记为答案。