How do you allow buttons to maximize the space inside it for text?

CRoscoe

As I currently have it, I wrote a bit of code that allows you to get the font size needed for text (label or button) to fit exactly into the encompassing area.

The problem I'm having though is it seems buttons have a built in padding that I cannot change, and I was wondering if anyone knows of a way to fix it?

Here is a quick screenshot of the tabs of buttons at the top of my app. I copied it and pasted it underneath and eddited the first button just to show how much room is still left over, and how despite all that extra room my button is choosing to wrap instead of just displaying the text in one row.

Any idea how to do this? Buttons don't have a padding/spacing/margin property, and the stack layout that encompasses it has it's spacing set to 0.

CRoscoe

Okay I solved it, it was more of a pain then I had hoped.

Basically, google confirmed that there is no way within Xamarin forms to change the padding of a button.

I ended up subclassing Button to make a new button that has Padding. I made that new buttons code that extends button look like:

public ExtendedButton() {
Padding.Left = 0;
Padding.Right = 0;
Padding.Top = 0;
Padding.Left = 0;
}

private InnerPadding _innerPadding = new InnerPadding();

public InnerPadding Padding { get { return _innerPadding; } }

public class InnerPadding {
 public int Left{ get; set; }
 public int Top{ get; set; }
 public int Right{ get; set; }
 public int Bottom{ get; set; }
}

After that, I made a custom renderer. I have not done the iOS one yet, but the Android one looks like so:

public class ExtendedButtonRenderer : ButtonRenderer
{
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var view = (ExtendedButton)this.Element;
var nativeButton = (global::Android.Widget.Button)this.Control;
nativeButton.SetPadding((int)view.Padding.Left, (int)view.Padding.Top, (int)view.Padding.Right, (int)view.Padding.Bottom);
}
}

CRoscoe

Annnnnnnd I screwed up formatting. That's great haha. Anywho, that's how I solved it for future people.

CRoscoe

Okay I solved it, it was more of a pain then I had hoped.

Basically, google confirmed that there is no way within Xamarin forms to change the padding of a button.

I ended up subclassing Button to make a new button that has Padding. I made that new buttons code that extends button look like:

public ExtendedButton() {
Padding.Left = 0;
Padding.Right = 0;
Padding.Top = 0;
Padding.Left = 0;
}

private InnerPadding _innerPadding = new InnerPadding();

public InnerPadding Padding { get { return _innerPadding; } }

public class InnerPadding {
 public int Left{ get; set; }
 public int Top{ get; set; }
 public int Right{ get; set; }
 public int Bottom{ get; set; }
}

After that, I made a custom renderer. I have not done the iOS one yet, but the Android one looks like so:

public class ExtendedButtonRenderer : ButtonRenderer
{
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var view = (ExtendedButton)this.Element;
var nativeButton = (global::Android.Widget.Button)this.Control;
nativeButton.SetPadding((int)view.Padding.Left, (int)view.Padding.Top, (int)view.Padding.Right, (int)view.Padding.Bottom);
}
}

CRoscoe

Annnnnnnd I screwed up formatting. That's great haha. Anywho, that's how I solved it for future people.

hvaughan

For iOS, you would add the following into the custom renderer:
Control.ContentEdgeInsets = new UIEdgeInsets((int)view.Padding.Left, (int)view.Padding.Top, (int)view.Padding.Right, (int)view.Padding.Bottom);