Xamarin.Forms Grid Layout

Question

I'm sort of a beginner in Xamarin.Forms App. And I'm struggling with GridLayout. And this what I want to fix:

How to write this in grid layout and where am I going wrong? I have been working for an entire day, trying out new combinations of code. But nothing seems to help. Here is my code:

grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });


grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

grid.Children.Add(itemName, 1, 0);
grid.Children.Add(delete, 2, 2);


Grid.SetRowSpan(itemName, 3);
Grid.SetColumnSpan(delete, 3);

Answer 1

My understanding tells me you trying to add a number of items with a delete button next to each of them that are aligned at the right side every time so how I would design it is something like:

XAML

  <Grid>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0" />
    <Image Grid.Column="1" />
  </Grid>

And then use a ListView or CollectionView to form multiple list items!

Goodluck feel free to get back if you have queries

Answer 2

All you need is only one row definition and 2 column definitions. I recommend to use either ListView or CollectionView if you want to display a list of same objects.

If in case, if your list is small and would like to make it light weight, I recommend you to use Bindable Layout. Refer my blog here for more details.

You can also use StackLayout and set its Orientation property to Horizontal for achieving the same result.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Text="YourText" LineBreakMode="WordWrap" />
    <Image Grid.Column="1" />
  </Grid>

Below is the code behind code.

var itemName = new Label() { Text="YourText", LineBreakMode = LineBreakMode.WordWrap };
var delete = new Image() { Source="YourImageSource" };

grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });

grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

grid.Children.Add(itemName, 0, 0);
grid.Children.Add(delete, 1, 0);

Note: You can use the LineBreakMode property of the Label to enable multiple line text. Refer here for more details.

Answer 3

Grid is good setting setting layout of fixed number of Row or Columns. If you are looking for Layouts growing with number of Items use StackLayout ListView or CollectionView for your UI requirement.

Use Xaml instead of cs for layouting, it saves a lot of time and is a lot easier to read.