Xamarin Forms：IOS 中的进度条高度问题

Question

我使用 Xamarin Forms PCL 项目创建了一个应用程序，该项目将在 android、ios、windows 10 和 windows 8.1 上运行。

在其中我使用了一个进度条控件，为了增加它的高度，我制作了它的自定义渲染器。

在 PCL-

using Xamarin.Forms;

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

在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;

        }
    }
}

我使用这个渲染器来增加进度条的高度。首先我尝试了this.Control.Transform = transform;，但我没有为我工作，然后我尝试了this.Transform = transform;，然后它为我工作了。

现在我有 5 个进度条一个接一个地垂直堆叠。

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

看起来像这样-

在应用 Transform 属性之前，它看起来很完美，但在应用 transform 属性之后，两个进度条从父容器中消失了。

Answer 1

问题是您正在尝试修改 XAML 布局顶部的视图（进度条）的 Y 位置凭据。

为了解决这个问题，我会改变

 this.Transform = transform;

到

Control.Transform = transform;

所以转换只会影响您正在使用的视图布局。但是，您可能会遇到 Y 凭据更改进度条位置的问题，并且它将脱离父布局。

如果你的进度条会出现在布局的顶部，只需添加一个上边距。

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

Answer 2

给你... 试试这个解决方案：

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;

    }