Display the background image as tiles at Xamarin.Forms - 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: