it-swarm.com.ru

Xamarin Forms: Как я могу добавить отступ для кнопки?

У меня есть следующий XAML Xamarin.Forms.Button

<Button Text="Cancel" BackgroundColor="#3079a8" TextColor="White" />

Я пытался добавить к нему отступ через свойство Padding, но это не сработало. Проверив форумы и документы, я понял, что в документации по Xamarin.Forms.Button (ссылка на документы) Нет какого-либо свойства заполнения, есть ли какой-то другой способ быстрого исправления, чтобы добавить только немного больше отступов к кнопке? Пример кода будет принята с благодарностью. 

19
sgarcia.dev

Обновление:

Добавлен отступ в элемент управления XF Button в Xamarin.Forms v3.2 +

<Button Padding="10,20,10,20" />

Старый:

Лучший способ сделать это - увеличить размер кнопки.

Затем выровняйте текст так, как считаете нужным. К сожалению, это лучшее, что вы можете сделать. Это хорошо работает, если вы выровняли текстовый центр. Не так много, если выровнены влево или вправо.

10
Adam Pedley

использование:

<controls:EnhancedButton Padding="1,2,3,4"/>

преимущества:

  • никаких неприятных побочных эффектов
  • нет проблем с выравниванием
  • нет безобразия
  • нет увеличения глубины обзора

иОС:

[Assembly: ExportRenderer(typeof(EnhancedButton), typeof(EnhancedButtonRenderer))]
namespace YOURNAMESPACE.iOS
{
    public class EnhancedButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            UpdatePadding();
        }

        private void UpdatePadding()
        {
            var element = this.Element as EnhancedButton;
            if (element != null)
            {
                this.Control.ContentEdgeInsets = new UIEdgeInsets(

                    (int)element.Padding.Top,
                    (int)element.Padding.Left,
                    (int)element.Padding.Bottom,
                    (int)element.Padding.Right
                );
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(EnhancedButton.Padding))
            {
                UpdatePadding();
            }
        }
    }
}

Android:

[Assembly: ExportRenderer(typeof(EnhancedButton), typeof(EnhancedButtonRenderer))]
namespace YOURNAMESPACE.Droid
{
    public class EnhancedButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            UpdatePadding();
        }

        private void UpdatePadding()
        {
            var element = this.Element as EnhancedButton;
            if (element != null)
            {
                this.Control.SetPadding(
                    (int)element.Padding.Left,
                    (int)element.Padding.Top,
                    (int)element.Padding.Right, 
                    (int)element.Padding.Bottom
                );
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(EnhancedButton.Padding))
            {
                UpdatePadding();
            }
        }
    }
}

пКЛ:

public class EnhancedButton : Button
{
    #region Padding    

    public static BindableProperty PaddingProperty = BindableProperty.Create(nameof(Padding), typeof(Thickness), typeof(EnhancedButton), default(Thickness), defaultBindingMode:BindingMode.OneWay);

    public Thickness Padding
    {
        get { return (Thickness) GetValue(PaddingProperty); }
        set { SetValue(PaddingProperty, value); }
    }

    #endregion Padding
}

Решение с использованием эффектов вместо средств визуализации, позволяющее легко использовать более одного элемента управления:

XAML:

<Label Text="Welcome to Xamarin.Forms!" BackgroundColor="Red">
    <Label.Effects>
        <xamTest:PaddingEffect Padding="20,40,20,40"></xamTest:PaddingEffect>
    </Label.Effects>
</Label>

PCL:

[Assembly: ResolutionGroupName("ComponentName")]
namespace XamTest
{
    public class PaddingEffect : RoutingEffect
    {
        /// <inheritdoc />
        protected PaddingEffect(string effectId) : base($"ComponentName.{nameof(PaddingEffect)}")
        {
        }

        public Thickness Padding { get; set; }
    }
}

Android:

[Assembly: ResolutionGroupName("ComponentName")]
[Assembly: ExportEffect(typeof(XamTest.Droid.PaddingEffect), "PaddingEffect")]
namespace XamTest.Droid
{
    public class PaddingEffect : PlatformEffect
    {
        /// <inheritdoc />
        protected override void OnAttached()
        {
            if (this.Control != null)
            {
                var firstMatch = this.Element.Effects.FirstOrDefault(d => d is XamTest.PaddingEffect);
                if (firstMatch is XamTest.PaddingEffect effect)
                {
                    this.Control.SetPadding((int)effect.Padding.Left, (int)effect.Padding.Top, (int)effect.Padding.Right, (int)effect.Padding.Bottom);
                }
            }
        }

        /// <inheritdoc />
        protected override void OnDetached()
        {
        }
    }
}
43
Dbl

вы можете обернуть свою кнопку в StackLayout и добавить заполнение к StackLayout

 <StackLayout Padding="10,10,10,10">
     <Button Text="Cancel" BackgroundColor="#3079a8" TextColor="White" />
  </StackLayout>
5
IdoT

В iOS вы можете использовать простой пользовательский рендер, чтобы добавить немного отступа к кнопке:

[Assembly: ExportRenderer(typeof(Button), typeof(iOSButtonRenderer))]
namespace My.App.iOS.Renderers.Button
{
    /// <summary>
    /// A custom renderer that adds a bit of padding to either side of a button
    /// </summary>
    public class iOSButtonRenderer : ButtonRenderer
    {
        public iOSButtonRenderer() { }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            Control.ContentEdgeInsets = new UIEdgeInsets(Control.ContentEdgeInsets.Top, Control.ContentEdgeInsets.Left + 10, Control.ContentEdgeInsets.Bottom, Control.ContentEdgeInsets.Right + 10);
        }
    }
}
2
Martin Rhodes

Самое простое, что вы можете сделать, это

 enter image description here

<StackLayout  Margin="0,20,0,0" Orientation="Horizontal" Spacing="20"> 
        <Switch VerticalOptions="CenterAndExpand"  ></Switch>
        <Label VerticalOptions="CenterAndExpand" TextColor="White">Remember Me</Label>
        <StackLayout  HorizontalOptions="FillAndExpand"><Button VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Text="Sign In" TextColor="White" BackgroundColor="#5cb85c"  ></Button>
        </StackLayout>
</StackLayout>

[такая большая головная боль при работе с формами ксамарина: '(]

1
Itzdsp

Это не работает для меня в Android . Глядя на функцию SetPadding, я вижу, что элемент управления имеет минимальную высоту 132 и минимальную ширину 242 .... Я изменил функцию SetPadding в:

 private void SetPadding()
    {
        var element = Element as ExtendedButton;
        if (element != null)
        {
            Control.SetMinHeight(-1);
            Control.SetMinimumHeight(-1);
            Control.SetMinWidth(-1);
            Control.SetMinimumWidth(-1);
            Control.SetPadding(
                (int)element.Padding.Left,
                (int)element.Padding.Top - 6,
                (int)element.Padding.Right,
                (int)element.Padding.Bottom - 6);
        }
    }
0
Luca Pinasco