Xamarin.Forms tiled background image?

MatheusGuimaraesMatheusGuimaraes GBMember, University ✭✭

I've seen a few old threads about tiled backgrounds, but they're either abandoned with no answer or they were not about Xamarin.Forms specifically, but about how to implement tiled backgrounds on each platform.

I'm guessing this is still not possible on Xamarin.Forms, or am I wrong? Anyone knows?

Posts

  • YkshLeoYkshLeo USMember ✭✭✭✭

    @MatheusGuimaraes,

    Sorry, I didn't get what you mean by tiled background image.

    But you can have background image in Page and it's inheritors , since we have BackgroundImage propery in Xamarin.Forms.Page.

    BackgroundImage="BackgroundImg.png;"
    
  • YkshLeoYkshLeo USMember ✭✭✭✭
    edited September 2015

    @MatheusGuimaraes,

    Sorry, I didn't get what you mean by tiled background image. :confused:

    But you can have background image in Page and it's inheritors , since we have BackgroundImage propery in Xamarin.Forms.Page.

    BackgroundImage="BackgroundImg.png;"
    

    Please refer this link, which will sometimes help you. :blush:

  • MatheusGuimaraesMatheusGuimaraes GBMember, University ✭✭

    thanks, Yksh.Leo! Yeah I know about the background property, but that's just the thing. That property is just a string which takes the image file so there is no way to set extra metadata on it to tell it how the background image should behave.

    Tiled is when you have a small image, like a small square, and you want to fill the background with lots of that image repeated. Much like your kitchen or bathroom floor has tiles and the whole pattern is made of the same square repeated over and over side by side.

    Just saw this morning that there is a new Xamarin.Forms release and was eagerly going through the release notes to see if there was anything that makes this better, but no cigar yet. oh well.

    The workaround is to just create a full background image and tile it yourself on an image programme I guess.

  • YkshLeoYkshLeo USMember ✭✭✭✭

    @MatheusGuimaraes :

    I think you can have a Custom renderer yourself.

    We already have some code that make tile in Xamarin.Android (Link) & Xamarin.iOS (Link) :blush:

  • YkshLeoYkshLeo USMember ✭✭✭✭

    @MatheusGuimaraes

    https://forums.xamarin.com/discussion/comment/59682/

    Did you try to do this sample code snippet ?

  • MatheusGuimaraesMatheusGuimaraes GBMember, University ✭✭

    hi @Yksh.Leo ,

    no, in the end I just put the background together on an image program then used the whole thing. Though it's good that the guy on that thread arrived at a solution it is quite a lot of code and processing to have so thinking of the trade-off, it's gotta be worth it and in my case it wasn't.

    thanks for your help though! :)

  • BuildCalcBuildCalc USMember ✭✭✭

    Matheus -

    For what it's worth, I've been working on some image friendly extensions to Xamarin.Forms - which include the ability to tile an image. At the moment, it has three Elements that extend their Xamarin.Forms counterparts: Image, ContentView, and Frame. Here's the forum post: https://forums.xamarin.com/discussion/58597/forms9patch-simplify-multi-device-image-management-in-your-pcl-xamarin-forms-mobile-apps#latest

    • Ben
  • batmacibatmaci DEMember ✭✭✭✭✭

    hi @BuildCalc
    I made this SO question other day. I am not sure if your library can help me with that
    http://stackoverflow.com/questions/41266749/binding-multiple-images-with-mvvm-in-relativelayout-dynamically

  • BuildCalcBuildCalc USMember ✭✭✭

    @batmaci

    Looking at what you want to do, Forms9Patch won't be much help. That being said, I've posted a response to your StackOverflow request that outlines how I would go about approaching your design.

  • cicerojrcicerojr BRMember ✭✭
    edited August 2017

    I've done that:

    I created a drawable on my Android project:

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/img_cover"
    android:tileMode="repeat" />
    

    After that I created an effect:

    PCL:

      public class BaseEffect : RoutingEffect
        {
            public const string EffectNamespace = "MyApp.Effects";
    
            public BaseEffect(String effectId) : base($"{EffectNamespace}.{effectId}")
            {
            }
        }
    
     public class CoverEffect : BaseEffect
        {
            public CoverEffect () : base(nameof(CoverEffect ))
            {
            }
        }
    

    Finally I created the effect on my Android project:

    Android Project:

     [assembly: ExportEffect(typeof(CoverEffect ), nameof(CoverEffect ))]
                    namespace MyApp.Droid.Effects
                    {
                        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.bkg_cover);
                                }
                            }
                        }
                    }
    

    I have not found out yet how to do it on iOS =(

  • cicerojrcicerojr BRMember ✭✭
    edited August 2017

    I did it on Android only.

    I created a drawable on my Android project:

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/img_cover"
        android:tileMode="repeat" />
    

    After that I created an effect on my PCL project:

    PCL:

    //base class
    namespace MyApp.Effects
    {
        public class BaseEffect : RoutingEffect
        {
            public const string EffectNamespace = "MyApp.Effects";
    
            public BaseEffect(String effectId) : base($"{EffectNamespace}.{effectId}")
            {
            }
        }
    }
    
    //effect class
    namespace MyApp.Effects
    {
        public class CoverEffect : BaseEffect
        {
            public CoverEffect () : base(nameof(CoverEffect ))
            {
            }
        }
    }
    

    Android:

    [assembly: ExportEffect(typeof(CoverEffect ), nameof(CoverEffect ))]
                    namespace MyApp.Droid.Effects
                    {
                        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.bkg_cover);
                                }
                            }
                        }
                    }
    

    On my XAML:

    xmlns:effects="clr-namespace:MyApp.Effects;assembly=MyApp"

    <StackLayout Orientation="Vertical" Spacing="0">
    
                        <StackLayout.Effects>
                            <effects:CoverEffect/>
                        </StackLayout.Effects>
    
    </StackLayout>
    

    I have not found out yet how to do it on iOS :neutral:

Sign In or Register to comment.