Today I will share a pretty surprising issue with you. It took me a while to debug and hence this article may save you a few minutes/hours when you encounter it too. The Xamarin.Forms
Grid children can be laid out using properties
Grid.ColumnSpan. It turns out that the
Span properties are particularly dangerous if you don’t manage them properly. Let me show you.
Suppose the following simple layout:
To summarize the XAML – we have a root
Grid which has two defined columns and three children. The third child of the
Grid is a
Frame which is horizontally centered within the
HorizontalOptions are set to
Center). So let’s run the app and see what happens:
Frame is definitely not centered! It seems like the
Grid does not have two
* columns, but three. How is it possible?
Notice the second child in the
It lies in the second column of the
Grid, but its
ColumnSpan is set to 2! Now, this would not matter in WPF and UWP where any “overflow” is ignored – in fact, I have seen some layouts which are counting on this behavior to simplify
VisualState changes, etc.
However, Xamarin.Forms handles this case differently. Instead of ignoring it actually “generates” a faux
* sized column in our
Frame is then centered, but only in terms of the first two columns.
Indeed, when we remove the
Grid.ColumnSpan from the second
BoxView, everything looks as expected:
Similar problems occur if we overflow the
RowSpan property as well.
This behavior comes to me as a surprise, and I presume it is more likely a bug than a feature, as you cannot create a “fake” column the same way by setting
Grid.Column to a number outside of bounds. I am planning to report this to see if there is an official answer.
Before then, we need to make sure our
Spans have the right size so that we don’t mysteriously break our