Changing splash image on Xamarin Forms application

Question

I have an application the is built using the Xamarin forms template in Visual Studio 2017. It works well, but I've wanted to change the image on the launch screen.

I have an image which is high resolution and want to fit to size, but instead its too big and you can only see part of the image when the ios app loads.

Here is the code, I've changed the image name to TEST1.png in the LaunchScreen.Storyboard xamarin.ios project

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6245" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="X5k-f2-b5h">
<dependencies>
    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6238"/>
</dependencies>
<scenes>
    <!--View Controller-->
    <scene sceneID="gAE-YM-kbH">
        <objects>
            <viewController id="X5k-f2-b5h" sceneMemberID="viewController">
                <layoutGuides>
                    <viewControllerLayoutGuide type="top" id="Y8P-hJ-Z43"/>
                    <viewControllerLayoutGuide type="bottom" id="9ZL-r4-8FZ"/>
                </layoutGuides>
                <view key="view" contentMode="scaleToFill" id="yd7-JS-zBw">
                    <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                    <subviews>
                        <imageView userInteractionEnabled="NO" contentMode="scaleToFill" misplaced="YES" image="test1.png" translatesAutoresizingMaskIntoConstraints="NO" id="23">
                            <rect key="frame" x="270" y="270" width="60" height="60"/>
                            <rect key="contentStretch" x="0.0" y="0.0" width="0.0" height="0.0"/>
                        </imageView>
                    </subviews>
                    <color key="backgroundColor" red="0.20392156862745098" green="0.59607843137254901" blue="0.85882352941176465" alpha="1" colorSpace="calibratedRGB"/>
                    <constraints>
                        <constraint firstItem="23" firstAttribute="centerY" secondItem="yd7-JS-zBw" secondAttribute="centerY" priority="1" id="39"/>
                        <constraint firstItem="23" firstAttribute="centerX" secondItem="yd7-JS-zBw" secondAttribute="centerX" priority="1" id="41"/>
                    </constraints>
                </view>
            </viewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="XAI-xm-WK6" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="349" y="339"/>
    </scene>
</scenes>
<resources>
    <image name="test1.png" width="180" height="180"/>
</resources>

Is there any way i can resize the image without changing the actual image itself?

Thanks

Answer 1

You have set the ContentMode of the Image to "scaleToFill". This will make your image to scale such that it will go beyond the target area untill the smallest side fits the flush.

Change the ContentMode to "scaleAspectFit" for that Image and see it it works for you.

These Links would be helpful to understand the ContentMode in detail:

Link 1

Link 2