Xaml - Fit image to frame size

Issue

the image: Screen Shot Link

im trying to stretch an image (the pink shape on the top) to fit the width of the green frame. the height is fitted good but i cant fill the width.

what i already tried to do:

1. use grid instead of frame - same problem

2. set WidthRequest of the screen width to the image - didnt affect the image

3. tried AspectFill instead of AspectFit, its strecth the width but cut some of the image bottom - Screen shot Link

Xaml Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="mada.Views.MainScrolledPage">
    <ContentPage.Content>
        <Grid Padding="0" ColumnSpacing="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Top Frame -->
            <StackLayout x:Name="_topFrame" BackgroundColor="Yellow" HorizontalOptions="FillAndExpand">
                <Frame Margin="0" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Green">
                    <Image  Source="TopShape.png" x:Name="_topShape" Aspect="AspectFit" HorizontalOptions="FillAndExpand" Margin="0"/>
                </Frame>
            </StackLayout>

            <!-- Main Frame -->
            <ScrollView Grid.Row="1">
                <StackLayout >
                    <BoxView  BackgroundColor="Blue" HeightRequest="150"/>
                    <BoxView  BackgroundColor="white" HeightRequest="150"/>
                    <BoxView  BackgroundColor="Black" HeightRequest="150"/>
                    <BoxView  BackgroundColor="Green" HeightRequest="150"/>
                    <BoxView  BackgroundColor="Blue" HeightRequest="150"/>
                </StackLayout>
            </ScrollView>



            <!-- Bottom Frame -->
            <BoxView x:Name="_bottomFrame" BackgroundColor="Yellow" Grid.Row="2"/>

        </Grid>
    </ContentPage.Content>
</ContentPage>

c#:

namespace mada.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainScrolledPage : ContentPage
    {
        public MainScrolledPage()
        {
            InitializeComponent();

            //emailIcon.WidthRequest = (App.screenWidth * 8.5) / 100;

            _topFrame.HeightRequest = FixedHeight(170);
            _bottomFrame.HeightRequest = FixedHeight(110);

            //_topShape.HeightRequest = FixedHeight(113);


        }

        public float FixedHeight(float x)
        {
            float rate = ((x / 812) * 100);
            float result = (App.screenHeight * rate) / 100;
            return result;


        }
    }
}

Solution

You can simply use <Image Aspect="Fill"... instead of AspectFill/AspectFit.

This will scale the image so it exactly fills the view. Note that scaling may not be uniform in X and Y.

Answered By - TaiT's