I have the following simple XAML page:
<?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>
In the constructor, I call a method to load the images:
private void LoadImages()
{
imgVPN1.Aspect = Aspect.AspectFit;
ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
imgVPN1.Source = imagesrc;
}
The result looks like this on my (rather large, high DPI) phone:
Of course, I want the image to automatically expand so it takes up the entire width of the screen. While maintaining the aspect ratio. But how can I achieve this? I've already tried putting the Aspect to "AspectFill", and added
imgVPN1.WidthRequest = Application.Current.MainPage.Width;
To the LoadImages method, but that makes the end result look like this:
I've been toying around with various HorizontalOptions, VerticalOptions, Aspects, GridView, StackLayouts,... The end result is always either the first or the second screenshot. So how can I achieve what I want here?