Xamarin.Forms Grid Columns sizing in Xaml - xaml

Question

How can I make a two column grid where the column on the left occupies only the space needed leaving the other column as much space as possible
I tried this code:
<Grid VerticalOptions="Start" Margin="10,0,10,0">
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Exclude Hidden" /></Grid>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start"><Label Text="All cards except those tagged as hidden" /></Grid>
<Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Include Hidden" /></Grid>
<Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start"><Label <Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Favorites" /></Grid>
<Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only cards tagged as favorites" /></Grid>
<Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Hidden" /></Grid>
<Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only those cards tagged as hidden" /></Grid>
</Grid>
But this divides the grid into 50:50 column 1 and column 2.
What I need is for column 1 to only occupy the space needed and column 2 to have all the rest.
Can someone advice how I can do this?

Answer 1

To do that, you need to use Grid.ColumnDefinitions. Here is a code sample for that:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
With this code you are defining the definition for columns inside the grid. First definition, for the first column is to use Auto width, than first column will take as much as it needs, and our second ColumnDefinition is for second column and it will take a rest (*) of it, or "ALL".
To use this with your existing XAML follow code bellow:
<Grid VerticalOptions="Start" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Exclude Hidden" />
</Grid>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start">
<Label Text="All cards except those tagged as hidden" />
</Grid>
<Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Include Hidden" />
</Grid>
<Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start">
<Label Text="All cards with those tagged as hidden" />
</Grid>
<Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Favorites" />
</Grid>
<Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start">
<Label Text="Only cards tagged as favorites" />
</Grid>
<Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Hidden" />
</Grid>
<Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Label Text="Only those cards tagged as hidden" />
</Grid>
</Grid>
... Also I am not sure why you are using those inner Grids to just hold your Labels, that is not the best practice IMO, but that is only my opinion.
And the final result of my code is like this:
Hope that this was helpful for you!
Quick note: First Column will have width of the longest row item.