如何使图像自动调整大小，使宽度为 100% 并相应调整高度？

Question

我有以下简单的 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"
             x:Class="Test.UserGuides.VPN">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="imgVPN1" Margin="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

在构造函数中，我调用了一个加载图片的方法：

private void LoadImages()
{
    imgVPN1.Aspect = Aspect.AspectFit;
    ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
    imgVPN1.Source = imagesrc;
}

在我的（相当大的、高 DPI）手机上的结果如下所示：

imgur link 1

当然，我希望图像自动展开，以便占据整个屏幕宽度。在保持纵横比的同时。但我怎样才能做到这一点？我已经尝试将 Aspect 设置为“AspectFill”，并添加了

imgVPN1.WidthRequest = Application.Current.MainPage.Width;

到 LoadImages 方法，但这使得最终结果看起来像这样：

imgur link 2

我一直在玩弄各种 Horizo​​ntalOptions、VerticalOptions、Aspects、GridView、StackLayouts，... 最终的结果总是第一个或第二个屏幕截图。那么我怎样才能在这里实现我想要的呢？

Answer 1

这是可以做的。 XML 几乎没有变化，我只是删除了图像布局选项

<ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="imgVPN1" Margin="10,10,10,10" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

在以相对布局实现所有内容之后，这也并不简单（如果有人需要，我有代码，请告诉我）我找到了更简单的方法。关键是图像无法正确缩放并且在高度上占用了太多空间。但是我们知道这张图片的大小比例，所以我们可以使用它。在代码中我们需要重写 OnSizeAllocated 因为在构造函数中宽度是未知的。然后就很简单了

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    imgVPN1.WidthRequest = width;
    imgVPN1.HeightRequest = width / 2.152; //given that image is 411 x 191
}

如果你愿意，你可以使用页面以外的其他宽度。例如，您可以使用堆栈布局宽度来考虑边距以提高准确性，但这已经在调整。或者你实际上可以像这样使用图像宽度本身

 protected override void OnSizeAllocated(double width, double height)
 {
     base.OnSizeAllocated(width, height);
     double needHeight=imgVPN1.Width / 2.152;
     if (imgVPN1.Height != needHeight)
         imgVPN1.HeightRequest = needHeight;
 }

Answer 2

这就是你需要的。

<ContentPage.Content>
    <ScrollView>
        <StackLayout Margin="20" Spacing="10">
            <Label Text="How to connect to VPN." HorizontalOptions="Center" />
            <Label Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
            <Image Source="yourimage.jpg" HorizontalOptions="Fill" />
            <Label Text="Select your region and press the Connect button." />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>