Xaml - подогнать изображение под размер кадра

Question

изображение: Ссылка на снимок экрана

Я пытаюсь растянуть изображение (розовая форма сверху), чтобы оно соответствовало ширине зеленой рамки. высота установлена ​​хорошо, но я не могу заполнить ширину.

что я уже пытался сделать:

1. использовать сетку вместо рамки - та же проблема

2. установить WidthRequest ширины экрана к изображению - не влияет на изображение

3. пробовал AspectFill вместо AspectFit, он выравнивал по ширине, но вырезал часть изображения снизу - Снимок экрана Ссылка

Xaml Код:

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


        }
    }
}

Answer 1

Вы можете просто использовать <Image Aspect="Fill"... вместо AspectFill / AspectFit.

Это позволит масштабировать изображение так, чтобы оно точно заполняло вид. Обратите внимание, что масштабирование может быть неодинаковым в X и Y.

Счастливого кодирования!