Xamarin.Forms XAML Image as root element

Question

I am new to XAML and everywhere I read about it one would usually use some sort of container as the root view (StackLayout, ContentPage, ContentView, RelativeLayout etc).

But, I run into this XAML that uses Image as its root. Why would we do that?

<?xml version="1.0" encoding="utf-8" ?>
<Image
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:r="clr-namespace:My.Resources;assembly=My.Resources"
    x:Class="My.Views.Buttons.MyView"
        Source="MyImage.png"/>

I would like to replace this Image with FFImageLoading.CachedImage but for that I need to add FFImageLoading xmlns namespace but I cannot since namespaces are inside the Image tag, not outside.

Answer 1

You can specify the namespace in root tag and use it in root tag itself in XAML.

For e.g.:

<ffimageloading:CachedImage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SomeAppNameSpace.CustomCachedImage" 
             Source="http://loremflickr.com/600/600/nature?filename=simple.jpg">
</ffimageloading:CachedImage>

Just make sure you derive from the right class in code behind:

namespace SomeAppNameSpace
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CustomCachedImage : CachedImage
    {
        public CustomCachedImage()
        {
            InitializeComponent();
        }
    }
}