Несоответствие размера изображения Xamarin

Ответ 1

Спасибо за предложенные ответы. К сожалению, эта проблема не была решена с использованием любого предлагаемого ответа. Я отказался от использования AbsoluteLayout. Фактически, на прошлой неделе я столкнулся со многими проблемами относительно изображений в iOS на RelativeLayout и StackLayout. Я сообщил им о Ксамарине.

Между тем, я опубликую здесь свое обходное решение, которое, хотя может быть красивее, отлично работает.

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(sender, EventArgs.Empty);
                    }
                }),
                NumberOfTapsRequired = 1
            });
        }
    }
}

Ответ 2

Вы можете установить свойство Aspect тега изображения в AspectFill, которое позволяет вашему изображению соответствовать его контейнеру, не теряя его разрешения.

<AbsoluteLayout BackgroundColor="Blue">
        <Image Source="home/donation-button.png"
            Aspect="AspectFill"
            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>

`

Ответ 3

Граница и изменение размера - от AbsoluteLayout, а не от изображения. Посмотрите, может ли ширина макета динамически расширяться как 100% из родительского контейнера, и если она разрешает такие параметры, как no-border.

Ответ 4

Просто добавьте

Aspect:AspectFill

или

Fill

в зависимости от ваших потребностей!!!

Ответ 5

попробуйте использовать Горизонтальный StackLayout как следующий:

<StackLayout BackgroundColor="Blue" Orientation="Horizontal">
        <Image Source="home/donation-button.png"               
            x:Name="Button"
            />
        <Label Text="Hello, World!"
            TextColor="White"
            FontAttributes="Bold"
            FontSize="16"
           />
    </StackLayout >