CODEWITHSUNDEEP
xamarin.forms
DIVYA RATHOD
DIVYA RATHOD

Reputation: 227

Xamarin.Forms Grid Layout

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

enter image description here

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);

Upvotes: 1

Views: 1407

Answers (3)

Nikhileshwar
Nikhileshwar

Reputation: 1684

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.

Upvotes: 0

Harikrishnan
Harikrishnan

Reputation: 1474

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.

Upvotes: 0

FreakyAli
FreakyAli

Reputation: 16562

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

Upvotes: 1

Related Questions