Button should fill the whole cell

Hi,

I'm having some trouble with my buttons. I simply can't make them fill the entire cell. I suspect it has some Margin and/or Padding set somewhere, but I tried to make all of them 0 still nothing. I even set them like -200 but they had still some space between them. I tried different ideas found on forums like setting HorizontalAlignment="Stretch" but I got that no property HorizontalAlingment exists in type Button. My basic idea is to practice a little bit and rebuild Androids calculator with Xamarin. In that app the buttons have 0 maring and padding and are nicely filling out the whole cell and the whole screen.

So here is my code. Its quite long but most of it is just the same code with different name and text.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
             mc:Ignorable="d"
             x:Class="Calculator.Views.BasicCalculatorPage"
             Title="Basic calculator">
    <ContentPage.Content>
        <Grid 
            Margin="0,30,0,0"
            Padding="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <controls:ExtendedLabel Grid.Row="0"
                       Margin="0,0,30,0"
                       HorizontalOptions="End"
                       Text="012345667"
                       FontSize="40"/>
            <controls:ExtendedLabel
                    Grid.Row="1"
                    Margin="0,0,30,0"
                    FontSize="20"
                    Text="012345667"
                    HorizontalOptions="End"/>
            <Grid
                    Grid.Row="2"
                    Margin="0"
                    Padding="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.2*"/>
                    <RowDefinition Height="0.2*"/>
                    <RowDefinition Height="0.2*"/>
                    <RowDefinition Height="0.2*"/>
                    <RowDefinition Height="0.2*"/>
                </Grid.RowDefinitions>
                <Grid
                    Grid.Row="0"
                    Margin="0"
                    Padding="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <controls:ExtendedButton
                            Grid.Column="0"
                            Padding="0"
                            Margin="0"
                            x:Name="btnClear"                        
                            Text="C"                           
                            FontSize="32"                               
                            TextColor="CadetBlue"/>
                    <controls:ExtendedButton
                            Grid.Column="1"                            
                            Padding="0"
                            Margin="0"
                            x:Name="btnDiv"
                            Text="/"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                    <controls:ExtendedButton
                            Grid.Column="2"                                                        
                            Padding="0"
                            Margin="0"
                            x:Name="btnMultiple"
                            Text="X"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                    <controls:ExtendedButton
                            Grid.Column="3"
                            Padding="0"
                            Margin="0"
                            x:Name="btnBackspace"
                            Text="&lt;-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                </Grid>
                <Grid
                        Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <controls:ExtendedButton
                            Grid.Column="0"
                            Padding="0"
                            Margin="0"
                            x:Name="btn7"                            
                            Text="7"
                            FontSize="32"                            
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="1"
                            Padding="0"
                            Margin="0"
                            x:Name="btn8"
                            Text="8"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="2"
                            Padding="0"
                            Margin="0"
                            x:Name="btn9"
                            Text="9"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="3"
                            Padding="0"
                            Margin="0"
                            x:Name="btnMinus"
                            Text="-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                </Grid>
                <Grid
                        Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <controls:ExtendedButton
                            Grid.Column="0"
                            Padding="0"
                            Margin="0"
                            x:Name="btn4"                            
                            Text="4"
                            FontSize="32"                            
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="1"
                            Padding="0"
                            Margin="0"
                            x:Name="btn5"
                            Text="5"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="2"
                            Padding="0"
                            Margin="0"
                            x:Name="btn6"
                            Text="6"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="3"
                            Padding="0"
                            Margin="0"
                            x:Name="btnAdd"
                            Text="+"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                </Grid>
                <Grid
                        Grid.Row="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <controls:ExtendedButton
                            Grid.Column="0"
                            Padding="0"
                            Margin="0"
                            x:Name="btn1"                            
                            Text="1"
                            FontSize="32"                            
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="1"
                            Padding="0"
                            Margin="0"
                            x:Name="btn2"
                            Text="2"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="2"
                            Padding="0"
                            Margin="0"
                            x:Name="btn3"
                            Text="3"
                            FontSize="32"
                            TextColor="Black"/>
                </Grid>
                <Grid
                        Grid.Row="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <controls:ExtendedButton
                            Grid.Column="0"
                            Padding="0"
                            Margin="0"
                            x:Name="btnPercent"                            
                            Text="%"
                            FontSize="32"                            
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="1"
                            Padding="0"
                            Margin="0"
                            x:Name="btn0"
                            Text="0"
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="2"
                            Padding="0"
                            Margin="0"
                            x:Name="btnDot"
                            Text="."
                            FontSize="32"
                            TextColor="Black"/>
                    <controls:ExtendedButton
                            Grid.Column="3"
                            Padding="0"
                            Margin="0"
                            x:Name="btnEqu"
                            Text="="
                            FontSize="32"
                            TextColor="White"
                            BackgroundColor="CadetBlue"/>
                </Grid>
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Thank you for your help! :smile:

Best Answer

  • LandLuLandLu Xamurai
    Accepted Answer

    There are two points causing this issue.
    1. We need to explicitly remove the spacing between rows and columns in Grid
    2. Button in Forms has a default border when rendering on Android so we need to remove it to disable the gap
    Use RowSpacing and ColumnSpacing to remove the space for one and use BorderWidth="0" or BorderColor="Transparent" to disable the border effect.
    Here is the whole code:

    <Grid 
            Margin="0,30,0,0"
            Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <controls:ExtendedLabel Grid.Row="0"
                        Margin="0,0,30,0"
                        HorizontalOptions="End"
                        Text="012345667"
                        FontSize="40"/>
        <controls:ExtendedLabel
                    Grid.Row="1"
                    Margin="0,0,30,0"
                    FontSize="20"
                    Text="012345667"
                    HorizontalOptions="End"/>
        <Grid
            Grid.Row="2"
            Margin="0"
            Padding="0"
            RowSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid
                    Grid.Row="0"
                    Margin="0"
                    Padding="0"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btnClear"                        
                            Text="C"                           
                            FontSize="32"                               
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"     
                            x:Name="btnDiv"
                            Text="/"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"     
                            x:Name="btnMultiple"
                            Text="X"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnBackspace"
                            Text="&lt;-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="1"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="0"
                            x:Name="btn7"                            
                            Text="7"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="1"
                            x:Name="btn8"
                            Text="8"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="2"
                            x:Name="btn9"
                            Text="9"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="3"
                            x:Name="btnMinus"
                            Text="-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="2"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btn4"                            
                            Text="4"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"
                            x:Name="btn5"
                            Text="5"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"
                            x:Name="btn6"
                            Text="6"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnAdd"
                            Text="+"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="3"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="0"
                            x:Name="btn1"                            
                            Text="1"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="1"
                            x:Name="btn2"
                            Text="2"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="2"
                            x:Name="btn3"
                            Text="3"
                            FontSize="32"
                            TextColor="Black"/>
            </Grid>
            <Grid
                Grid.Row="4"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btnPercent"                            
                            Text="%"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"
                            x:Name="btn0"
                            Text="0"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"
                            x:Name="btnDot"
                            Text="."
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnEqu"
                            Text="="
                            FontSize="32"
                            TextColor="White"
                            BackgroundColor="CadetBlue"/>
            </Grid>
        </Grid>
    </Grid>
    

    I helped you modify the code and if you want to use same width or height cells we could set each definitions to * without the multiplier. And here is the effect:

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    There are two points causing this issue.
    1. We need to explicitly remove the spacing between rows and columns in Grid
    2. Button in Forms has a default border when rendering on Android so we need to remove it to disable the gap
    Use RowSpacing and ColumnSpacing to remove the space for one and use BorderWidth="0" or BorderColor="Transparent" to disable the border effect.
    Here is the whole code:

    <Grid 
            Margin="0,30,0,0"
            Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <controls:ExtendedLabel Grid.Row="0"
                        Margin="0,0,30,0"
                        HorizontalOptions="End"
                        Text="012345667"
                        FontSize="40"/>
        <controls:ExtendedLabel
                    Grid.Row="1"
                    Margin="0,0,30,0"
                    FontSize="20"
                    Text="012345667"
                    HorizontalOptions="End"/>
        <Grid
            Grid.Row="2"
            Margin="0"
            Padding="0"
            RowSpacing="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid
                    Grid.Row="0"
                    Margin="0"
                    Padding="0"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btnClear"                        
                            Text="C"                           
                            FontSize="32"                               
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"     
                            x:Name="btnDiv"
                            Text="/"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"     
                            x:Name="btnMultiple"
                            Text="X"
                            FontSize="32"
                            TextColor="CadetBlue"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnBackspace"
                            Text="&lt;-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="1"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="0"
                            x:Name="btn7"                            
                            Text="7"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="1"
                            x:Name="btn8"
                            Text="8"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="2"
                            x:Name="btn9"
                            Text="9"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="3"
                            x:Name="btnMinus"
                            Text="-"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="2"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btn4"                            
                            Text="4"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"
                            x:Name="btn5"
                            Text="5"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"
                            x:Name="btn6"
                            Text="6"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnAdd"
                            Text="+"
                            FontSize="32"
                            TextColor="CadetBlue"/>
            </Grid>
            <Grid
                Grid.Row="3"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="0"
                            x:Name="btn1"                            
                            Text="1"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="1"
                            x:Name="btn2"
                            Text="2"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderColor="Transparent"
                            Grid.Column="2"
                            x:Name="btn3"
                            Text="3"
                            FontSize="32"
                            TextColor="Black"/>
            </Grid>
            <Grid
                Grid.Row="4"
                ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="0"
                            x:Name="btnPercent"                            
                            Text="%"
                            FontSize="32"                            
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="1"
                            x:Name="btn0"
                            Text="0"
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="2"
                            x:Name="btnDot"
                            Text="."
                            FontSize="32"
                            TextColor="Black"/>
                <controls:ExtendedButton
                    BorderWidth="0"
                            Grid.Column="3"
                            x:Name="btnEqu"
                            Text="="
                            FontSize="32"
                            TextColor="White"
                            BackgroundColor="CadetBlue"/>
            </Grid>
        </Grid>
    </Grid>
    

    I helped you modify the code and if you want to use same width or height cells we could set each definitions to * without the multiplier. And here is the effect:

Sign In or Register to comment.