How to set size of button Xamarin

Question

left label code

xaml

<Label x:Name="presentBtn" Text="선물함" FontSize="16" HorizontalOptions="Start"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="0" BackgroundColor="#A8D2F1">

c#

presentBtn.HeightRequest = 45.0 * (double)App.ScreenWidth / 720.0;
presentBtn.WidthRequest = 150.0* (double)App.ScreenWidth / 720.0;

. . .

right button code

xaml

<Button x:Name="ticketBtn" Text="티켓충전" HorizontalOptions="End"  FontSize="16" Clicked="changeTicketCharge" Grid.Column="1" VerticalOptions="CenterAndExpand" BorderRadius="0"/>

c#

ticketBtn.HeightRequest = 45* (double)App.ScreenWidth / 720.0;
ticketBtn.WidthRequest = 150* (double)App.ScreenWidth / 720.0;

I make button in xamarin.form and set HeightRequest, WidthRequest. but button size is not same to setting size. upper image's two button is same size. left is label with backgroundcolor, right is button. but not same size.

I want make button correctly size.

Answer 1

Your grid layout is most likely constricting the button. You can find a working example below. You need to keep in mind that using a hard coded value for font size might cause the text not to fit on the button. I started with 16 as you have in your code, but the text was being clipped out because the font was too large for the button. You can create a simple calculation to get the appropriate font size as well. It's up to you.

MainActivity.cs

 protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;
        base.OnCreate(bundle);

        SetScreenWidthAndHeight();
        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }

App.xaml.cs

  public static int DisplayWidth { get; set; }
  public static int DisplayHeight { get; set; }

MyPage.cs

 private Button _testBtn;
    private Label _testLbl;
    public HomePage()
    {
        var height = 45 * App.DisplayHeight / 720;
        var width =  150 * App.DisplayWidth / 720;

        _testLbl = new Label { FontSize = 16, Text = "testing", HeightRequest = height, WidthRequest = width };
        _testBtn = new Button { FontSize = 16, Text = "testing", HeightRequest = height, WidthRequest = width};
        var a = new Grid
        {
            ColumnDefinitions = { new ColumnDefinition { Width = GridLength.Auto } },
            RowDefinitions = { new RowDefinition { Height = GridLength.Auto } }
        };
        a.Children.Add(_testBtn, 0, 0);
        a.Children.Add(_testLbl, 0, 1);
        _mainContent = new StackLayout { Children = { a } };

        Content = _mainContent;
    }

Pixels to DP

private int ConvertPixelsToDp(float pixelValue)
    {
        var dp = (int)((pixelValue) / Resources.DisplayMetrics.Density);
        return dp;
    }

Screen width and height calculation

private void SetScreenWidthAndHeight()
    {
        var metrics = Resources.DisplayMetrics;

        App.DisplayWidth = ConvertPixelsToDp(metrics.WidthPixels);
        App.DisplayHeight = ConvertPixelsToDp(metrics.HeightPixels);
    }

End Result

With FontSize=14

With FontSize=16