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?
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!
<ProgressBar BackgroundColor="White" ProgressColor="#BCC7EF" Progress="0.7"> <ProgressBar.ScaleY> <OnPlatform x:TypeArguments="x:Double" iOS="2" Android="1" /> </ProgressBar.ScaleY>
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"/>
Note that you may need to adjust your margins accordingly.
@BillF is correct basically
In the iOS renderer code try using
this.Control.Transform = transform;
instead of
this.Transform = transform;
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"/>
对我来说,最简单的解决方案是使用Xamarin.Forms.Visual.Material然后在你的 XAML 中,在进度条中将HeightRequest
属性设置为你想要的,并使用Visual
属性作为 Material。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.