Make image fill whole container of stacklayout - ios

Question

Hi I have this Xamarin Forms app where I have the following layout:
<ContentPage Title="Live" Icon="tv_show-32.png">
<ScrollView>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Spacing="50,20,50,30">
<Image Source="http://kanal10.se/images/logga/kanal10.png" HorizontalOptions="FillAndExpand"></Image>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="1" Style="{StaticResource StackBG}">
<Label Text="Sverige/Sweden"></Label>
<BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
<Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="Fill"></Image>
<Button x:Name="Sweden" Text="Watch Live" Clicked="Sweden_OnClicked" HorizontalOptions="FillAndExpand" Style="{StaticResource PlayButtonStyle}"></Button>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" Style="{StaticResource StackBG}">
<Label Text="Norge/Norway"></Label>
<BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
<Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="FillAndExpand"></Image>
<Button x:Name="Norway" Text="Watch Live" Clicked="Norway_OnClicked" HorizontalOptions="FillAndExpand" Style="{StaticResource PlayButtonStyle}"></Button>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" Style="{StaticResource StackBG}">
<Label Text="Asien/Asia"></Label>
<BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
<Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="FillAndExpand"></Image>
<Button x:Name="Asia" Text="Watch Live" Clicked="Asia_OnClicked" Style="{StaticResource PlayButtonStyle}"></Button>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
The problem is that I can't get the image called tvbild.png, to fill the whole container in the iOS app.
I would like the image to have the same width size as the button (see attached image).
How can I accomplish this?
Thanks for help!
Peter

Answer 1

Hi and thanks for answer,
Well what I want is to fill the whole conatiners width for both the button and the image.
Peter

Answer 2

Assuming image size is known; use separate row in Grid for image and button and
set HeightRequest for Image and ColumnDefinition Width for Grid, see sample below:
Original image width is 100 and height is 50. Width of container is 300.
Find scale factor based on width of container and width of image: 300/100=3
Find HeightRequest based on scale and height of image: 3*50=150:
<ContentPage Padding="10,20"
...
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Source="100x50.png" HeightRequest="150"/>
<Button Grid.Row="1" Text="Button 1"/>
<Image Grid.Row="2" Source="200x100.png" HeightRequest="150"/>
<Button Grid.Row="3" Text="Button 2"/>
</Grid>
Sample output from iPhone SE simulator with page width 320. The left and right border is from area left and right of the display: