imagexamlalignmentmauiaspect-ratio

How to align a MAUI image with aspect-fill, within its display area?

Is there a way to align/position an <Image/> within its display area using Aspect="AspectFill" in .NET MAUI 8, or is there a workaround that produces the same visual result?

I'm trying to have a wide display area where a tall image completely fills it, maintaining its aspect ratio. The image should then be aligned to the top or bottom of its display area, so only the top or bottom of the image is visible. Input images may vary in height but the wrapping element has a fixed height, which is why I need the aspect ratio.

<Border HeightRequest="100">
    <Image 
        Source="t_pose.png"
        Aspect="AspectFill"
        WidthRequest="128"/>
</Border>

Full image :
full image

Example desired result :
desired image

Example desired result 2 :
(image added later)
enter image description here

Solution

  • You can put your Image inside a ScrollView StackLayout. You can apply TranslationX and/or TranslationY to move the Image:

    <Border HeightRequest="100">
    <StackLayout>
        <Image
            Aspect="AspectFill"
            Source="t_pose.png"
            WidthRequest="128" />
    </StackLayout>
</Border>
<Border HeightRequest="100">
    <StackLayout>
        <Image
            Aspect="AspectFill"
            Source="t_pose.png"
            TranslationY="-60"
            WidthRequest="128" />
    </StackLayout>
</Border>

    TPose.png