如何更改 Xamarin Forms 中进度条的高度？答案

【问题标题】：How to change height of progress bar in Xamarin Forms?如何更改 Xamarin Forms 中进度条的高度？
【发布时间】：2016-04-16 05:45:13
【问题描述】：

如何在代码中更改 Xamarin Forms ProgressBar 的高度？我正在使用 Xamarin Forms V2.1。

.HeightRequest 和 .MinimumHeightRequest 似乎没有效果。默认进度条非常细，甚至可能不会被注意到。

.BackgroundColor 似乎也不起作用。

我在这里缺少什么？

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

为此您需要自定义渲染器：

首先为你的自定义进度条创建一个类：

public class CustomProgressBar :ProgressBar
{
  public CustomProgressBar()
   {
   }
}

然后还为您的自定义进度条渲染器添加一个新文件：

对于 iOS：

public class CustomProgressBarRenderer : ProgressBarRenderer
{
    protected override void OnElementChanged(
     ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
    {
        base.OnElementChanged(e);

        Control.ProgressTintColor = Color.FromRgb(182, 231, 233).ToUIColor();// This changes the color of the progress
    }


    public override void LayoutSubviews()
    {
        base.LayoutSubviews();

        var X = 1.0f;
        var Y = 10.0f; // This changes the height

        CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y);
        Control.Transform = transform;
    }
}

[编辑：根据评论修复上面的代码]

对于安卓：

public class CustomProgressBarRenderer :ProgressBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
    {
        base.OnElementChanged(e);


        Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(Color.FromRgb(182, 231, 233).ToAndroid()); //Change the color
        Control.ScaleY = 10; //Changes the height

    }
}

希望对你有帮助！

【讨论】：

非常感谢@kishang。为了让 iOS 渲染器工作，我需要更改 this.Transform = transform;到 Control.Transform = 变换； -- 还没试过安卓。

【解决方案2】：

 <ProgressBar
  BackgroundColor="White"
  ProgressColor="#BCC7EF"
  Progress="0.7">
    <ProgressBar.ScaleY>
      <OnPlatform
        x:TypeArguments="x:Double"
        iOS="2"
        Android="1" />
      </ProgressBar.ScaleY>

【讨论】：

【解决方案3】：

要使进度条变粗，您只需更改 ProgressBar 的 ScaleY 属性即可。

例如：这段代码

<ProgressBar Progress=".5"/>
<ProgressBar ScaleY="2" Progress=".5"/>
<ProgressBar ScaleY="5" Progress=".5"/>

产生这个

请注意，您可能需要相应地调整页边距。

【讨论】：

【解决方案4】：

@BillF 基本正确

在 iOS 渲染器代码中尝试使用

this.Control.Transform = transform;

而不是

this.Transform = transform;

【讨论】：

【解决方案5】：

我遇到了同样的需求，在最新版本的 Visual Studio 16.5.2 上，我发现要获得更大的水平条，您只需在 xml 中的进度条声明中设置 ScaleY。为了避免在 Android 上出现故障并确保进度条不会压倒其他元素，我添加了一个边距，如下面的声明所示。

        <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar1"
        android:layout_below="@+id/message"
        android:scaleY="8"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"/>

【讨论】：

【解决方案6】：

对我来说，最简单的解决方案是使用Xamarin.Forms.Visual.Material 然后在您的 XAML 中，将HeightRequest 属性设置为您想要的，并将Visual 属性用作材质。

【讨论】：