如何设置按钮Xamarin的大小

时间:2017-04-11 07:20:25

标签: button xamarin.forms size

enter image description here

左标签代码

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;

。 。

右键代码

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;

我在xamarin.form中创建按钮并设置HeightRequest,WidthRequest。 但按钮大小与设置大小不同。 上图像的两个按钮大小相同。 左边是带backgroundcolor的标签,右边是按钮。 但大小不一样。

我想要制作正确尺寸的按钮。

1 个答案:

答案 0 :(得分:3)

您的网格布局很可能会限制按钮。您可以在下面找到一个工作示例。您需要记住,对字体大小使用硬编码值可能会导致文本无法放在按钮上。我在你的代码中开始使用16,但文本被剪掉了,因为字体对于按钮来说太大了。您可以创建一个简单的计算来获得适当的字体大小。由你决定。

<强> 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;
    }

像素到DP

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

屏幕宽度和高度计算

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

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

最终结果

使用FontSize = 14

Correctly sized button and label

使用FontSize = 16

Font too large for button