如何在Xamarin Forms中更改进度条的高度?

时间:2016-04-16 05:45:13

标签: xamarin xamarin.forms

如何在代码中更改Xamarin表单ProgressBar的高度?我使用的是Xamarin Forms V2.1。

.HeightRequest.MinimumHeightRequest似乎无效。默认进度条太薄,甚至可能都没有被注意到。

.BackgroundColor似乎也无效。

我在这里缺少什么?

6 个答案:

答案 0 :(得分:9)

您需要自定义渲染器:

首先为自定义进度条创建一个类:

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;
    }
}

[编辑:根据评论修正以上代码]

对于Android:

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

    }
}

我希望这可以帮到你!

答案 1 :(得分:1)

@BillF基本上是正确的

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

this.Control.Transform = transform; 

而不是

this.Transform = transform;

答案 2 :(得分:1)

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

答案 3 :(得分:0)

我也面临同样的需求,在最新版本的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"/>

答案 4 :(得分:0)

对我来说,最简单的解决方案是使用Xamarin.Forms.Visual.Material 然后,在XAML的进度栏中,将HeightRequest属性设置为所需属性,并将Visual属性用作Material。

答案 5 :(得分:0)

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

例如: 这段代码

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

产生这个 enter image description here

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