Xamarin Forms: Progressbar Height Issue in IOS

问题

I have created an app using Xamarin Forms PCL project which will run on android, ios, windows 10 and windows 8.1.

In it I have used a progresbar control and for increasing its height I made its custom renderer.

In PCL-

using Xamarin.Forms;

namespace MyProject.ViewModels
{
    public class CustomProgressbar : ProgressBar
    {
    }
}

In IOS-

using CoreGraphics;
using MyProject.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using FISE.ViewModels;

[assembly: ExportRenderer(typeof(CustomProgressbar), typeof(CustomProgressBarRenderer))]
namespace MyProject.iOS
{

    public class CustomProgressBarRenderer : ProgressBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
        {
            base.OnElementChanged(e);
            Control.ProgressTintColor = Color.FromHex(Constant.Primarycolor).ToUIColor();
            Control.TrackTintColor = Color.FromHex(Constant.Secondary1Color).ToUIColor();

        }
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            var X = 1f;
            var Y = 10.0f;
            CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y);
           // this.Control.Transform = transform;
            this.Transform = transform;

            //this.ClipsToBounds = true;
            //this.Layer.MasksToBounds = true;

        }
    }
}

I used this renderer for increasing height of Progressbar. Firstly I tried this.Control.Transform = transform; but I didn't worked for me then I tried this.Transform = transform; then it worked for me.

Now I have 5 progressbars Vertically Stacked one after another.

          <Grid Padding="20,3,0,0" x:Name="RatingCountDisplayGrid" RowSpacing="23" ColumnSpacing="10" Grid.Row="0" Grid.Column="1">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>

              <local1:CustomProgressbar Grid.Row="0" Grid.Column="0" HeightRequest="20" x:Name="fiveStarRating" />
              <Label x:Name="fiveStarRatingCount" Grid.Row="0" Grid.Column="1" FontAttributes="Bold" FontSize="14" Style="{DynamicResource LabelNormal3}"></Label>
              <local1:CustomProgressbar Grid.Row="1" Grid.Column="0" HeightRequest="20" x:Name="fourStarRating"/>
              <Label x:Name="fourStarRatingCount" Grid.Row="1" Grid.Column="1" FontAttributes="Bold" FontSize="14" Style="{DynamicResource LabelNormal3}"></Label>
              <local1:CustomProgressbar Grid.Row="2" Grid.Column="0"  HeightRequest="20" x:Name="threeStarRating"/>
              <Label x:Name="threeStarRatingCount" Grid.Row="2" Grid.Column="1" FontAttributes="Bold" FontSize="14" Style="{DynamicResource LabelNormal3}"></Label>
              <local1:CustomProgressbar Grid.Row="3" Grid.Column="0" HeightRequest="20" x:Name="twoStarRating"/>
              <Label x:Name="twoStarRatingCount" Grid.Row="3" Grid.Column="1" FontAttributes="Bold" FontSize="14" Style="{DynamicResource LabelNormal3}"></Label>
              <local1:CustomProgressbar Grid.Row="4" Grid.Column="0" HeightRequest="20" x:Name="oneStarRating"/>
              <Label x:Name="oneStarRatingCount" Grid.Row="4" Grid.Column="1" FontAttributes="Bold" FontSize="14" Style="{DynamicResource LabelNormal3}"></Label>
            </Grid>

It looks like this-

Before applying Transform property it looked perfect but after applying transform property two progressbars are going out of parent container.

回答1:

The issue is that you are trying to modify Y position credentials of the view(progress bar) on top of the XAML layouts.

To fix it I would change the

 this.Transform = transform;

to

Control.Transform = transform;

So the transform would affect only the view layout you are working with. But then you might have the issue of the Y credentials changing the position of the progress bar and it will go of the parent layout.

and if your progress bar will get on top of the layout just add a top margin.

                     <AbsoluteLayout
                        HorizontalOptions="Fill"
                        VerticalOptions="Fill">

                     <customeProgressBar:CustomProgressBar
                        Margin="0,20,0,0"
                        AbsoluteLayout.LayoutBounds="0,0,0.8,1"
                        AbsoluteLayout.LayoutFlags="All"
                        ProgressColor="Blue"
                        Progress="0.5" />

                        <Button
                        AbsoluteLayout.LayoutBounds="1,0,0.2,1"
                        AbsoluteLayout.LayoutFlags="All"
                            Text="Edit"
                            >
                        </Button>
                    </AbsoluteLayout>

回答2:

Here you go... Try this solution:

protected override void OnElementChanged(
     ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
    {
        base.OnElementChanged(e);

        Control.ProgressTintColor = Color.FromHex("#01BC73").ToUIColor();// Color..FromHex("#254f5e").ToUIColor();
        Control.TrackTintColor = Color.White.ToUIColor();
        //Control.SetProgress(1, true);

        //Control.Hidden = false;
    }

    public override CGSize SizeThatFits(CGSize size)
    {
        //size.Height = 100;
        return base.SizeThatFits(size);
    }

    public override void LayoutSubviews()
    {
        //base.LayoutSubviews();

        //var X = 3.0f;
        //var Y = 20.0f; // This changes the height

        //CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y);
        //Control.Transform = transform;

        //UpdateNativeWidget();
        CGAffineTransform transform = CGAffineTransform.MakeScale(1.27f, 80.0f);
        transform.TransformSize(this.Frame.Size);
        this.Transform = transform;

    }

来源：https://stackoverflow.com/questions/42391200/xamarin-forms-progressbar-height-issue-in-ios