How are images and icons added in Xamarin.Forms? - xaml

Question

This is my first time using Xamarin.Forms and I want to know how I can add an icon or an image. I tried to look it up, but it's very complicated
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:hello"
x:Class="hello.MainPage">
<StackLayout >
<Label Text="Hello"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
FontSize="30"
FontAttributes="Italic"/>
<Image /> I am trying to add it here
<Icon/> I am trying to add it here
<Label Text="Name"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
Font="large"/>
<entry placeholder="Enter your name here"/>
</StackLayout>
</ContentPage>

Answer 1

In Xamarin.Forms it is recommended to add images in native project's only because every platform needs different dimensions & resolutions images. So we are adding images here how we do for Android & iOS project.
Android:
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
hdpi, mdpi drawable-xhdpi drawable-xxhdpi refer to the screen density in dots-per-inch.
It’s best practice to place your app launcher icons in mipmap (not the
drawable- folders)
Keep in mind that in Android, all images are in different folder but with same naming convention.
Add Images in Drawable folder:
iOS:
This method of working with images in an iOS app has been deprecated by Apple since iOS 9. You should use the Asset Catalog instead.
For more information, see Image Sizes and Filenames.
For iOS project, expand the Resources folder and add your images here. In iOS, we follow a naming convention to differentiate our images.
If your image name is abc.png, for high version of this image, you may use abc#2x.png or abc#3x.png etc.
Keep in mind that in iOS, all images are in same folder but with different naming convention.
Add Images in Resource folder:
UWP:
Universal Windows Platform (UWP) - Place images in the application's root directory with Build Action: Content.
UWP image file names can be suffixed with .scale-xxx before the file extension, where xxx is the percentage of scaling applied to the asset, e.g. myimage.scale-200.png. Images can then be referred to in code or XAML without the scale modifier, e.g. just myimage.png. The platform will select the nearest appropriate asset scale based on the display's current DPI.
Using Images in Shared project
<Image Source="Image1" WidthRequest="80" HeightRequest="80" ></Image>

Answer 2

You can set the Icon for a Page, but I do not know of an Icon control. Setting the icon for page can be done pointing to a local resource or online resource.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:hello"
x:Class="hello.MainPage"
Icon="Icon.png">
Set show an Image you need to set the Source of the Image
<Image Source="waterfront.jpg" />