Question

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

在其中我使用了progresbar控件并且为了增加其高度，我制作了自定义渲染器。

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

    }

Xamarin表单：IOS中的进度条高度问题

2 个答案: