How do I make buttons the same size for every screen on xamarin forms

Question

Im trying to do a screen with 6 buttons on it,and i need for every screen to be the same size,because right now some smaller or bigger screens the buttons are getting chopped or getting too small.

    <StackLayout>
    <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Vertical"  HorizontalOptions="FillAndExpand">
            <Button Text="Linfócito" Font="{StaticResource Fonte}" ContentLayout="top,0"  FontAttributes="{StaticResource Atributo}" WidthRequest="150" HeightRequest="200" Image="Linfocito.jpg"/>
            <Button Text="Linfocito" Font="{StaticResource Fonte}" WidthRequest="150" ContentLayout="top,0" FontAttributes="{StaticResource Atributo}" HeightRequest="200" Image="Linfocito.jpg"  Clicked="Button_Clicked"/>
            <Button Text="Linfocito22" Font="{StaticResource Fonte}" WidthRequest="150" ContentLayout="top,0" FontAttributes="{StaticResource Atributo}"  HeightRequest="200" Image="" />
        </StackLayout>

im doing in xaml using Xamarin.Forms,thanks in advance

Answer 1

you should be more specific on the desired layout but I presume that you want your buttons always fill the screen horizontally, independently of the screen resolution / size / density...

The problem

In your exemple you are using fixed sizes for your buttons using the 'WidthRequest' & 'HeightRequest' properties:

<Button ... WidthRequest="150" HeightRequest="200"... />

So in this case, it's normal that your buttons are cropped if the resolution is too small, or don't fill the screen if the resolution is high. Your buttons don't follow the screen resolution but the size you give them.

What you should do:

Use relative layouts. That means, instead of setting fixed sizes uses layout controls that automatically respond to 'constraints' instead of sizes.

In your case, I suggest you to use a Grid controls. Here is an example but there are many possible solutions:

<?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="GoodChapp.XForms.Views.MyPage">

    <ContentPage.Content>

    <!-- full screen grid -->
    <Grid>

        <!-- Define the rows containing your page controls -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="200" /> <!-- row that will contains buttons -->
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Row 0: Put whatever you want inside -->
        <!-- Height will stretch to its content -->

        <!-- Row 1: This grid layouts your buttons horizontally -->
        <!-- It will fill horizontally the whole screen -->
        <!-- With 3 columns of the same size -->
        <Grid Grid.Row="1"> 
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- button 1 -->
            <Button Grid.Column="0"
                    Text="Linfócito" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />

            <!-- button 2 -->
            <Button Grid.Column="1"
                    Text="Linfócito2" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />

            <!-- button 3 -->
            <Button Grid.Column="2"
                    Text="Linfócito3" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />
        </Grid>

        <!-- Row 2: The last row will take the  remaining available height -->


    </Grid>
</ContentPage.Content>

Key points are the definition of page's layout and defining correct grid rows heights & column widths...

There is a good presentation of the Grid control here Xamarin Fors Grid Control but I suggest you to read the whole "Layout" paragraph. You will have a clear idea of the different solutions for your problem.

But to summarize, in my applications, and I think it's a good design practice, I try to use the less possible fixed widths and heights.

Tell me if it's clear enough. Else don't forget to validate the answer. Thanks