How to set height of ProgressBar on Xamarin Forms 3.3? - xamarin

Question

I'm using Xamarin Forms 3.3, I want change height of ProgressBar. I execute it:
How to change height of progress bar in Xamarin Forms?
But I can't change height of ProgressBar. This is my code:
1) Class custom control ProgressBar:
public class ColorProgressBar : ProgressBar
{
public static BindableProperty BarColorProperty = BindableProperty.Create(
nameof(BarColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public static BindableProperty ProgressTintColorProperty = BindableProperty.Create(
nameof(ProgressTintColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public static BindableProperty TrackTintColorProperty = BindableProperty.Create(
nameof(TrackTintColor), typeof(Color), typeof(ColorProgressBar), default(Color));
public Color BarColor
{
get => (Color)GetValue(BarColorProperty);
set => SetValue(BarColorProperty, value);
}
public Color ProgressTintColor
{
get => (Color)GetValue(ProgressTintColorProperty);
set => SetValue(ProgressTintColorProperty, value);
}
public Color TrackTintColor
{
get => (Color)GetValue(TrackTintColorProperty);
set => SetValue(TrackTintColorProperty, value);
}
public float HeightOfProgressBar { get; set; }
}
2) For iOS:
public class ColorProgressBarRenderer : ProgressBarRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
=> iOS.Control.Logger.InvokeAction(() =>
{
base.OnElementChanged(e);
if (e.NewElement == null)
return;
if (Control != null)
{
UpdateBarColor();
}
});
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
=> iOS.Control.Logger.InvokeAction(() =>
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ColorProgressBar.BarColorProperty.PropertyName)
{
UpdateBarColor();
}
});
private void UpdateBarColor() => iOS.Control.Logger.InvokeAction(() =>
{
var element = (ColorProgressBar) Element;
if (element == null)
return;
Control.TintColor = element.BarColor.ToUIColor();
Control.ProgressTintColor = element.ProgressTintColor.ToUIColor();
Control.TrackTintColor = element.TrackTintColor.ToUIColor();
});
public override void LayoutSubviews()
{
base.LayoutSubviews();
var element = (ColorProgressBar)Element;
if (element == null)
return;
var X = 1.0f;
var Y = element.HeightOfProgressBar > 0.0f ? element.HeightOfProgressBar : 1.0f;
var transform = CGAffineTransform.MakeScale(X, Y);
Transform = transform;
}
}
And At View .xaml:
<control:ColorProgressBar Grid.Row="1"
HeightOfProgressBar="8.0"
TrackTintColor="{x:Static color:BasePalette.DarkestColor}"
ProgressTintColor="{x:Static color:NeutralPalette.RedColor}"
Progress="{Binding PercentDataValue}">
</control:ColorProgressBar>
I test on device run iOS 12.0.
Thanks!

Answer 1

You missed a comment on the linked SO thread that said:
To get the iOS renderer to work I needed to change this.Transform = transform; to Control.Transform = transform;
So changing Transform = transform; in the LayoutSubviews method of the ColorProgressBarRenderer to Control.Transform = transform; makes your sample work as expected, i.e the height of the progress bar is changed:
public override void LayoutSubviews()
{
base.LayoutSubviews();
var element = (ColorProgressBar)Element;
if (element == null)
return;
var X = 1.0f;
var Y = element.HeightOfProgressBar > 0.0f ? element.HeightOfProgressBar : 1.0f;
var transform = CGAffineTransform.MakeScale(X, Y);
Control.Transform = transform; // <---- change here
}