CODEWITHSUNDEEP
xamarinxamarin.forms
BillF
BillF

Reputation: 1126

How to change height of progress bar in Xamarin Forms?

How do I change the height of a Xamarin Forms ProgressBar in code? Am using Xamarin Forms V2.1.

.HeightRequest and .MinimumHeightRequest seem to have no effect. The default progress bar is so thin that it might not even be noticed.

.BackgroundColor does not seem to work either.

What am I missing here?

Upvotes: 8

Views: 10782

Answers (6)

Bedir
Bedir

Reputation: 586

To make the progress bar thicker, you just have to change the ScaleY property of the ProgressBar.

For example: This code

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

Produces this enter image description here

Note that you may need to adjust your margins accordingly.

Upvotes: 12

Bao Bao
Bao Bao

Reputation: 145

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

Upvotes: 4

Felipe Alves
Felipe Alves

Reputation: 1

For me, the most simple solution is to use Xamarin.Forms.Visual.Material Then in your XAML, in progress bar set HeightRequest property to what you want and use Visual property as Material.

Upvotes: 0

A. Lion
A. Lion

Reputation: 680

I faced the same need and on the latest version of Visual Studio, 16.5.2 I figured out that to get a bigger horizontal bar you just need to set ScaleY within the progressbar declaration inside the xml. To avoid glitches on Android and be sure that the progress bar is not overwhelming other elements I added a margin as you can see from the declaration here below.

        <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"/>

Upvotes: 1

KaeM
KaeM

Reputation: 335

You need custom renderers for this:

First create a class for your custom progress bar:

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

And then also add a new file for your custom progress bar renderer:

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

[EDIT: fixed code above as per comment]

For 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

    }
}

I hope this helps you!

Upvotes: 11

NoumanUllah SiddiquI
NoumanUllah SiddiquI

Reputation: 21

@BillF is correct basically

In the iOS renderer code try using

this.Control.Transform = transform;

instead of

this.Transform = transform;

Upvotes: 2

Related Questions