Xamarin表单：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;

        }
    }
}

我用这个渲染器来增加Progressbar的高度。首先我尝试了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;

    }