Xaml - 使图像适合帧大小答案

【问题标题】：Xaml - Fit image to frame sizeXaml - 使图像适合帧大小
【发布时间】：2020-04-06 17:24:03
【问题描述】：

我正在尝试拉伸图像（顶部的粉红色形状）以适合绿色框架的宽度。高度合适，但我不能填满宽度。

我已经尝试过的事情：

使用网格代替框架——同样的问题
将屏幕宽度的WidthRequest设置为图片-不影响图片
尝试了 AspectFill 而不是 AspectFit，它的宽度增加了图像的底部 - Screen shot Link

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;


        }
    }
}

【问题讨论】：

标签： c# xamarin

【解决方案1】：

您可以简单地使用<Image Aspect="Fill"... 而不是AspectFill/AspectFit。

这将缩放图像，使其完全填满视图。请注意，X 和 Y 的缩放比例可能不一致。

【讨论】：