Hello, I am trying to build a 3x3 grid with square images (and a label). I am having a hard time because every attempt I make it results in the "squares" being flattened or stretched. That's my code (black.jpg is 200x200):
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Milano.MyPage"
xmlns:src="clr-namespace:Milano;assembly=Milano" >
<ScrollView Padding="10">
<Grid RowSpacing="10" ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="0" Grid.Column="1" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="0" Grid.Column="2" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="1" Grid.Column="0" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="1" Grid.Column="1" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="1" Grid.Column="2" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="2" Grid.Column="0" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="2" Grid.Column="1" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
<Image Grid.Row="2" Grid.Column="2" Aspect="Fill" Source="{src:ImageResource Milano.black.jpg}"/>
</Grid>
</ScrollView>
</ContentPage>
Those are the result in iPhone 4s:
And iPhone 6 plus:
I even tried with any sort of Aspect
for the Images and changing the Height
of the RowDefinition from Auto
to *
but with the same (or worse) results...