Xamarin表示图像大小不匹配

Question

我正在使用Xamarin Forms实现一个跨平台的应用程序,我正在努力解决一个奇怪的错误:我正在尝试创建一个带有文本的按钮.要实现它,我正在使用AbsoluteLayout.

我为iOS项目添加了一个图像,用于每种iOS分辨率类型(.png,@ 2x.png,@ 3x.png).标准<Image />标签一切正常.但是,当以绝对布局包装图像时 - 图像会失去其分辨率比例并导致边框.

上面的代码:

    <AbsoluteLayout BackgroundColor="Blue">
        <Image Source="home/donation-button.png"
            AbsoluteLayout.LayoutFlags="All" 
                x:Name="Button"
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
            />
        <Label Text="Hello, World!"
                TextColor="White"
                FontAttributes="Bold"
                FontSize="16"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0, 1, 1, 0.5" />
    </AbsoluteLayout> 

产生以下内容:

在iPhone 6 +/6s +/7 +上(模拟器是iPhone 7 Plus): 这是预期的行为.

在iPhone 6/6s/7上(模拟器是iPhone 7): 请注意图像上的小蓝色边框,它被设置为背景 AbsoluteLayout

在5SE/5s及以下: 注意大蓝色边框.

为了调试这个,我把相同的图像放两次 - 首先在AbsoluteLayout中,然后作为StackLayout中的标准项.绝对布局中的图像具有比例错误,而没有它的图像则没有.

我有点迷失在这里.有什么方法可以破解我们的方式吗？我试图创造.自定义渲染器手动分配图像大小,但似乎UIImage提供了Xamarin使用的不同大小单位,并且它无法解决Android上的问题.

任何建议将非常感谢!

编辑(3/5/2017):只是为了让您更新 - 似乎这是Xamarin Forms中的一般错误.我发布的解决方案是一种解决方法,我一遍又一遍地坚持这个问题.

例如,我尝试创建此GUI:

我已经创建了以下代码:

<StackLayout Orientation="Horizontal" 
            VerticalOptions="End"
            HorizontalOptions="FillAndExpand"
            BackgroundColor="#dd2c00">
            <Label Text="100"
                FontSize="46"
                Margin="10"
                FontFamily="OpenSans-Bold" 
                TextColor="#ffffff"
                VerticalOptions="FillAndExpand"
                VerticalTextAlignment="Center"
                HorizontalTextAlignment="Center" />
            <Label TextColor="#ffffff"
                FontSize="Medium"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                VerticalTextAlignment="Center">
                <Label.FormattedText>
                    <FormattedString>
                        <Span FontFamily="OpenSans-Regular" Text="{markup:Localize CandlesMap.FacebookFriendsCandles1}" />
                        <Span FontFamily="OpenSans-Light" Text="{markup:Localize CandlesMap.FacebookFriendsCandles2}" />
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Image Source="{markup:ResolvePath map.show_friends_candle_button}" />
        </StackLayout>

一切都很好,直到我添加图像,这导致以下输出:

如果有人想出如何破解它,我真的很感激他或她是否可以在这里发布解决方案!只要我得到它,这是iOS UIImage渲染器的问题- 在计算图像布局时UIImage本机端点不可用(因此图像宽度和高度为-1),因此XF不知道如何渲染图像正常.

Answer 1

感谢您提供的建议答案。不幸的是，使用任何建议的答案都无法解决此问题。我放弃了使用AbsoluteLayout. 事实上，在过去的一周里，我也遇到了许多有关 iOS 中图像的RelativeLayout问题StackLayout。我已将它们报告给 Xamarin。

同时，我将在这里发布我的解决方法，虽然可能更漂亮，但效果很好。

using System;
using Xamarin.Forms;
namespace App.Views.Home
{
    public class DonationButton : RelativeLayout
    {
        #region Properties

        /// <summary>
        /// Gets or sets the button text.
        /// </summary>
        /// <value>The text.</value>
        public string Text
        {
            get { return this._textLabel.Text; }
            set { this._textLabel.Text = value; }
        }

        public event EventHandler Clicked;

        #endregion

        #region iVars

        private Image _backgroundImage;
        private Label _textLabel;

        #endregion

        public DonationButton()
        {
            //--------------------------------------------
            //  Setup the background image
            //--------------------------------------------
            this._backgroundImage = new Image()
            {
                Source = ImageSource.FromFile("home__donation_button.png")
            };

            this.Children.Add(this._backgroundImage, (Constraint)null, (Constraint)null, (Constraint)null, (Constraint)null);

            //--------------------------------------------
            //  Add the label
            //--------------------------------------------

            /* See: http://stackoverflow.com/a/40942692/1497516 */
            Func<RelativeLayout, double> getLabelWidth
                = (p) => this._textLabel.Measure(p.Width, p.Height).Request.Width;
            Func<RelativeLayout, double> getLabelHeight
                = (p) => this._textLabel.Measure(p.Width, p.Height).Request.Height;

            this._textLabel = new Label()
            {
                TextColor = Color.White,
                FontAttributes = FontAttributes.Bold,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
            };

            this.Children.Add(this._textLabel,
                              Constraint.RelativeToParent((parent) => parent.Width - (getLabelWidth(parent) + 10)),
                              Constraint.RelativeToView(this._backgroundImage, (parent, view) => (view.Height - getLabelHeight(parent)) / 2)
                              );

            //--------------------------------------------
            //  Allow clicks
            //--------------------------------------------
            this.GestureRecognizers.Add(new TapGestureRecognizer
            {
                Command = new Command(sender =>
                {
                    if (this.Clicked != null)
                    {
                        this.Clicked(this, EventArgs.Empty);
                    }
                }),
                NumberOfTapsRequired = 1
            });
        }
    }
}