Xamarin形式：IOS中的进度栏​​高度问题 [英] Xamarin Forms: Progressbar Height Issue in IOS

问题描述

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

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

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

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

在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; 然后对我有用。

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.

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

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>

看起来像这样-

< a href = https://i.stack.imgur.com/DZVT2.png rel = nofollow noreferrer>

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

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

推荐答案

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

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;

到

Control.Transform = transform;

因此，转换只会影响您正在使用的视图布局。但是然后您可能会遇到Y凭据更改进度条的位置的问题，它将移至父级布局。

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>

这篇关于Xamarin形式：IOS中的进度栏​​高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！