Xamarin.forms: [Enhancement] ProgressBar: Height

[PureWeen]

Rationale

Currently there is no way to increase the height of the progress bar without using a custom effect/renderer

Implementation

For backwards compatibility add a property to the ProgressBar to enable height scaling

public enum ProgressBarLayoutOption
{
Default // how it currently works
FitToConstraints
}

public ProgressBarLayoutOption LayoutOption //BP

iOS

A number of ways to increase the height are mentioned here
https://stackoverflow.com/questions/3437564/how-to-increase-height-of-uiprogressview

Most seem partial to

CGAffineTransform transform = CGAffineTransformMakeScale(1.0f, 3.0f);  
progressView.transform = transform;

Android

<style name="CustomProgressBarHorizontal" parent="android:Widget.ProgressBar.Horizontal">
      <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
      <item name="android:minHeight">10dip</item>
      <item name="android:maxHeight">20dip</item>
</style>

UWP

https://github.com/bartlannoeye-com/2016-10-ProgressBarTemplateSettings

Expected Result

Android

If ProgressBarLayoutOption is set to FitToConstraints then the progressbar should size itself vertically like any other control would with the same settings

iOS

See Android

UWP

See Android

Implications for CSS

progressbar {height:100; }

Backward Compatibility

Third party renderers may need to be updated to ensure that this functionality is supported through the new official mechanism. Further we will need to be careful to code the changes to the renderers in a careful manner to ensure that if someone is already using an effect support this feature that the effect is as best as possible not broken by our changes. The current default height used should be maintained. The height of the progressbar should only change when this behavior is triggered

Difficulty : Medium

[edsnider]

Why would we not use the Height property for this instead of ScaleY?

[StephaneDelcroix]

@PureWeen afterthought: reusing ScaleY would mess up with the measurements (controls are measured pre-transforms)

[PureWeen]

@edsnider
Yea the original request this was based on mentioned using ScaleY which I just kind of ran with (I should have researched it a bit better). I'm thinking the original idea for ScaleY came about because when googling around a lot of the top answers for increasing the height are to apply Scale transforms but I do feel like if we use ScaleY we'll be answering the "Why does progressbar use scaleY?" question for years. I modified the spec to work off of height.

[edsnider]

@PureWeen awesome- yea, I think the Height property is more intuitive for declaration even if it ends up being used to set a ScaleY property in the renderer.

[edsnider]

Is anyone working on this one yet? If not I can take it. I have done this in custom renderers for iOS and Android so have a good starting point.

[PureWeen]

No. @StephaneDelcroix just removed himself and it'd be awesome to get this one completed!! Especially now that we can add some colors to the progress bar it'd be great to make it bigger.

[edsnider]

Ok great!

[edsnider]

When changing the ProgressBar's height on iOS - either by CGAffineTransform.MakeScale or by resetting Layer.Frame the edges around the corners are blurred.

Best way I have been able to fix this is by using TrackImage and ProgressImage to set colors instead of TrackTintColor and ProgressTintColor.

TrackImage and ProgressImage can be set by creating a UIImage with the specified color on the fly.

Any thoughts?

[PureWeen]

Do you by chance have a fork you're working against or other that I can pull down, see the effect, and play around with a bit?

[edsnider]

@PureWeen yes, I'll get it pushed up so you can take a look.

[PureWeen]

@edsnider are you still working on this? Did you get any code pushed by chance that I can look at?

[edsnider]

@pureween yes - sorry the delay. Will get back on it :-)

[samhouts]

@edsnider Any progress? Thanks!

[samhouts]

@edsnider Monthly ping! How is it going? Thanks!

[sethom]

I can't wait until this feature is in! Any updates?

[toomasz]

Any updates? Looking forward to use it, thanks!

[alexmartinezm]

Any progress here?

[PureWeen]

This is probably going to be closed once we push the material visual changes. The material ios ProgressBar supports height out of the box so that can just be used.

[davidortinau]

Material for Visual is in 3.6.0 and you can set height on ProgressBar there. Closing this issue in favor of that solution. Will entertain objections.

[vgdh]

good future!