Display the background image as tiles at Xamarin.Forms

Question

I am using Xamarin.Forms to develop an application for Android. I am using the Xamarin. I want to display the background as tiles. I have prepared an image of 100x100 pixels. \Android\MyApp\MyApp.Android\Resources\drawable\background.jpg

<?xml version="1.0" encoding="utf-8" ? >
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodels="clr-namespace:MyApp.ViewModels"
    x:DataType="viewmodels:LoginViewModel"
    mc:Ignorable="d"
    x:Class="MyApp.Views.LoginPage"
    Shell.NavBarIsVisible="False"
    BackgroundImage="background.jpg"
>

This way, the background.jpg will be enlarged and displayed. I want to display it repeatedly in tiles.

Answer 1

You can display it repeatedly in tiles through below steps.
1.Create a drawable xml file on your Android project:
    <?xml version="1.0" encoding="utf-8" ?>
    <bitmap  xmlns:android="http://schemas.android.com/apk/res/android" 
             android:tileMode="repeat"
             android:src="@drawable/clock" >
    </bitmap>
2.After that create below two effect classes on your shared project:
    //base class
    namespace AppTiles
{
    public class BaseEffect : RoutingEffect
    {
        public const string EffectNamespace = "AppTiles";

        public BaseEffect(String effectId) : base($"{EffectNamespace}. 
 {effectId}")
        {
        }
    }
}
//effect class
    namespace AppTiles
{
    public class CoverEffect : BaseEffect
    {
        public CoverEffect() : base(nameof(CoverEffect))
        {
        }
    }
}
3.Create a effect class in your Android project
[assembly: ResolutionGroupName("AppTiles") ]
[assembly: ExportEffect(typeof(AppTiles.Droid.CoverEffect), 
nameof(CoverEffect))]


namespace AppTiles.Droid
{
    public class CoverEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            UpdateBackground();
        }

        protected override void OnDetached()
        {
        }

        private void UpdateBackground()
        {
            Android.Views.View mView = Container as Android.Views.View;

            if (mView != null)
            {
                mView.Background = ContextCompat.GetDrawable(mView.Context, Resource.Drawable.XMLFile1);
            }
        }
    }
}
4.Add below xmal in shared main page code behind:
  <StackLayout Orientation="Vertical" Spacing="0">

        <StackLayout.Effects>
            <effects:CoverEffect/>
        </StackLayout.Effects>

    </StackLayout>

Below is the screenshot: