Make Bild füllen ganze Behälter von stacklayout

Hallo Ich habe diese Xamarin Forms-Anwendung, wo ich das folgende Layout haben:Make Bild füllen ganze Behälter von stacklayout

<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>

Das Problem ist, dass ich nicht das Bild tvbild.png genannt bekommen können, füllen der gesamte Container in der iOS App.

Ich möchte, dass das Bild die gleiche Breite wie die Schaltfläche hat (siehe angehängtes Bild).

Wie kann ich das erreichen?

Vielen Dank für Ihre Hilfe!

Peter

Quelle

2017-12-07 Pettanord

Angenommen, Bildgröße ist bekannt; verwendet separate Zeile in Grid für Bild und Schaltfläche und gesetzt HeightRequest für Bild und ColumnDefinition Width für Gitter, siehe Beispiel unten:

Originalbildbreite beträgt 100 und die Höhe ist 50 Breite des Behälters ist 300.

Suche Skala Faktor basierend auf Breite des Behälters und die Breite des Bildes: 300/100 = 3

HeightRequest Suche basierend auf Größe und Höhe des Bildes: 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>

Beispielausgabe von iPhone SE-Simulator mit Seitenbreite 320. Die linken und rechten Rand ist aus dem Bereich links und rechts neben dem Display: