web-dev-qa-db-fra.com

Xamarin Forms: Comment puis-je ajouter du rembourrage à un bouton?

J'ai le XAML Xamarin.Forms.Button suivant

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

J'ai essayé d'y ajouter un remplissage via la propriété Padding mais cela n'a pas fonctionné. Après avoir consulté les forums et les docs, je me suis rendu compte qu’il n’y avait pas de propriété de remplissage dans la documentation de Xamarin.Forms.Button (lien vers les docs) , Existe-t-il un autre type de solution miracle permettant d’ajouter simplement un peu plus de rembourrage à un bouton? Un exemple de code serait grandement apprécié. 

xamlxamarinmonoxamarin.iosxamarin.forms
19
sgarcia.dev

Mettre à jour:

Le rembourrage a été ajouté au contrôle Bouton XF dans Xamarin.Forms v3.2 +

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

Vieux:

La meilleure façon de le faire serait d’augmenter la taille du bouton.

Puis alignez le texte comme bon vous semble. Malheureusement, il s’agit du mieux que vous puissiez faire. Cela fonctionne bien si votre centre de texte est aligné. Pas tellement si sa gauche ou droite alignés.

10
Adam Pedley

usage:

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

avantages:

  • pas d'effets secondaires méchants
  • pas de problème avec les alignements
  • pas de laideur
  • incrémentation sans profondeur de vue

ios:

[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();
            }
        }
    }
}

pcl:

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
}

Solution utilisant des effets au lieu de rendus, pour permettre une utilisation facile de plusieurs contrôles:

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

vous pouvez envelopper votre bouton dans un StackLayout et ajouter un rembourrage au StackLayout 

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

Dans iOS, vous pouvez utiliser un moteur de rendu personnalisé simple pour ajouter un peu de bourrage au bouton:

[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

Le plus simple que vous puissiez faire est

 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>

[Un tel mal de tête avec les formes de xamarin: '

1
Itzdsp

Cela ne fonctionne pas pour moi sous Android . En regardant la fonction SetPadding, je constate que le contrôle a une hauteur minimale de 132 et une largeur minimale de 242 .

 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