How to put Items in a Row in a Grid Element Xamarin Forms

Question

I am using Xamarin Forms in Visual Studio 19, and I'm trying to add a few items to a Grid element and have them placed next to each other in a row. I am putting this inside a ContentPage.Content element.

I've tried using a Stacklayout, setting the Horizontaloptions of the buttons (setting them all to "start" just makes them overlap, setting one to start one to center and one to end would work but I want to put more than 3 buttons on the makeshift Grid Toolbar.). It's telling me I'm getting an error when I try to make some columndefinitions for the grid too, saying that contentpage doest not support direct content.

This is my columndefinitions section

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
        </Grid.ColumnDefinitions>

and I'm setting the columns of my buttons the normal way.

                 <ContentPage.Content>
    <Grid  BackgroundColor="blue"
        HeightRequest="60"
                 VerticalOptions="End" >
        <ImageButton Source="alarm.png"
                HeightRequest="25"
                WidthRequest="25" 
                 HorizontalOptions="StartAndExpand"
                 />
        <ImageButton Source="alarm.png"
                HeightRequest="25"
                WidthRequest="25" 
                 HorizontalOptions="EndAndExpand"
                 />
    </Grid>                 
</ContentPage.Content>

my_current_unwanted_results

Also, How do I remove the grey button background? Edit 02/05/2020

To remove the grey background square, set BackgroundColor="transparent"

So you are looking to add buttons in a row to a column? Just trying to get a better understanding. — MrLu
Yes, I'm looking to add more than 3 buttons to a single row on a Grid element 'toolbar'. Just have them evenly seperated like +++++ — Code_Student09

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-01-19T02:21:56

It seems that you forget to add / on each ColumnDefinition .

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

How to put Items in a Row in a Grid Element Xamarin Forms

1 Answers