CODEWITHSUNDEEP
visual-studioxamlxamarinxamarin.forms
Code_Student09
Code_Student09

Reputation: 327

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

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"

Upvotes: 0

Views: 652

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

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>

Upvotes: 0

Related Questions