CODEWITHSUNDEEP
xmlxamarin.forms
Donna
Donna

Reputation: 370

Are Xamarin.Forms grid positions relative to immediate container?

This one puzzles me... if I have a grid, let's say 5 cols by 5 rows.

Now I put a 3-col stacklayout (call it SL1) at col=1 and colwidth=3. This centers SL1 horizontally, leaving 1 blank col on either side.

Inside SL1, I have another stacklayout (SL2). If I put specify grid position for SL2, is it relative to SL1 or absolute to the overall grid structure? In other words, is col 1 the middle column of SL2 or just the 2nd column of the 5 in overall grid?

Upvotes: 0

Views: 101

Answers (1)

user10608418
user10608418

Reputation:

So this one is quite easy to just test. But since you'll find that neither of your options is actually the case I'll provide some background.

First of all lets build your test case:

<Grid BackgroundColor="DarkOrange">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"></RowDefinition>
    </Grid.RowDefinitions>
    <StackLayout Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="DeepSkyBlue" HorizontalOptions="FillAndExpand">
        <StackLayout Grid.Column="2" BackgroundColor="Red" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start"></StackLayout>
    </StackLayout>
</Grid>

I always add some colors to the views when I'm experimenting with layouts, this gives a quick view as to what is happening

Once we do this we already notice Visual studio giving us a hint: VisualStudioHint

And this is also what we find when we look at the source code of Grid: https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/Grid.cs

Grid doesn't do anything with Children of it's Children so the Grid.Column="2" of the second StackLayout will be ignored. This is why we end up with this result:

GridTestResult

Exactly what we would've expected if the Grid.Column property on the second StackLayout would be ignored.

So that's your answer: it's value doesn't matter, it's completely ignored.

Hope this helps

Edit:

To add to this, if you want to you could do a Grid inside a Grid and position the StackLayout inside the second Grid. So something like this would work:

<Grid BackgroundColor="DarkOrange">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="DeepSkyBlue" HorizontalOptions="FillAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackLayout Grid.Column="2" BackgroundColor="Red" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start"></StackLayout>
    </Grid>
</Grid>

Upvotes: 1

Related Questions