Image As Background

SturgmeisterSturgmeister USUniversity ✭✭

Hello,

I am working with Xamarin Forms and would like to use an image as the background for some pages. I have several Views and Layouts on different pages, and would like to overlay them onto a background image, selecting the image based on the page. I found how to use a solid color for the background, by setting the BackgroundColor on various components (like the primary StackLayout I have on a given page), but is it possible to use an image instead of a solid color? If so, could you include an example (short, quick, and dirty is perfectly fine). If not, does an alternative solution exist, perhaps using Renderers? I am targeting Android and iOS currently, if that helps at all.

Thank you.

Best Answers

Answers

  • SturgmeisterSturgmeister USUniversity ✭✭

    Great solution. Thanks for your help!

  • DiptimayaPatraDiptimayaPatra USMember ✭✭

    Can CarouselPage be one of the children of Absolute Layout?
    If no? what are the options for CarouselPage?

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    why don't you use "Page.BackgroundImage" property ?

  • HimasankarHimasankar USMember
    edited June 2014

    Hi,

    I am using PCL in my project to share the code in IOS, Android, WP 8 devices. I am trying to set the contentpage background image in my code. but the image is not displaying. Please check my sample code below.

    I have set the image property Build Action=Embedded Resource

    Please let me know what is the mistake in this code.

    public class MainPage : ContentPage{
        List<string> objEmpCollections = new List<string>();
        public MainPage()
        {
            this.Title = "V V I P's";
            //this.BackgroundColor = Color.Maroon;
            this.BackgroundImage = "EmpMgmtPCL.Images.NPO-Events-bg.png";
        }
    }
    

    Thanks,Himasankar

  • HugoLogmans_HugoLogmans_ NLMember ✭✭✭

    On what device is it not showing?

    Remove the namespace part (only use the filename) if the image is in Assets (Android) or iOS-project root (as bundleresource).

    You also can use Device.OnPlatform() to distinguish different filenames for different platforms. E.g. if you have all your images for iOS in a "images" subfolder.

  • HimasankarHimasankar USMember

    @HugoLogmans, I have created one sample application, I am trying to put background image it was giving me an error. When I try to put background color it is working fine.

    Please let me know what is the problem in my sample application? I have uploaded my sample application in drop box. Please get this code from the following link.

    https://www.dropbox.com/s/tywdomsknmc7qhh/SampleApp212.rar

    Thanks, Himasankar

  • HimasankarHimasankar USMember

    Thanks Hugo Logmans.. It is working now, the problem is dashes in the file name. I removed the dashes in the file name it is working now.

    But I am unable to see the background image for windows phone 8. Please let me know if there is any solution for that.

    Thanks, Himasankar

  • HimasankarHimasankar USMember

    Windows phone 8 also working... I set the image property build action to content.

    Thanks,Himasankar

  • yinshenyinshen CNMember

    My background has a padding. Help me....

    using CoolBeans.Services;
    using CoolBeans.ViewModels;
    using Xamarin.Forms;
    
    namespace CoolBeans.Pages
    {
        public class LoginPage : ContentPage
        {
            public LoginPage()
            {
                //BindingContext = new LoginViewModel(Navigation, iLoginService);
    
                //BackgroundColor = Helpers.Color.LightGray.ToFormsColor();
    
                var layout = new StackLayout { Padding = 50 };
    
                var label = new Label
                {
                    Text = "欢迎来到贝贝巴士",
                    Font = Font.SystemFontOfSize(NamedSize.Large),
                    TextColor = Color.White,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    XAlign = TextAlignment.Center, // Center the text in the blue box.
                    YAlign = TextAlignment.Center, // Center the text in the blue box.
                };
    
                layout.Children.Add(label);
    
                var username = new Entry { Placeholder = "用户名" };
                //username.TextColor = 
                //username.SetBinding(Entry.TextProperty, LoginViewModel.UsernamePropertyName);
                layout.Children.Add(username);
    
                var password = new Entry { Placeholder = "密码" };
                layout.Children.Add(password);
    
                var buttonLogin = new Button { Text = "登陆", TextColor = Color.White };
                var buttonRegister = new Button { Text = "注册", TextColor = Color.White };
                layout.Children.Add(buttonLogin);
                layout.Children.Add(buttonRegister);
    
                var backgroundImage = new Image()
                {
                    Source = FileImageSource.FromFile("login_background.png")
                };
    
                var relativeLayout = new RelativeLayout();
    
                relativeLayout.Children.Add(backgroundImage,
                    Constraint.Constant(0),
                    Constraint.Constant(0),
                    Constraint.RelativeToParent((parent) => { return parent.Width; }),
                    Constraint.RelativeToParent((parent) => { return parent.Height; }));
    
                relativeLayout.Children.Add(layout,
                    Constraint.Constant(0),
                    Constraint.Constant(0),
                    Constraint.RelativeToParent((parent) => { return parent.Width; }),
                    Constraint.RelativeToParent((parent) => { return parent.Height; }));
    
                 //new ScrollView { Content =
                Content = relativeLayout ;
    
                username.SetBinding(Entry.TextProperty, new Binding("Username"));
                password.SetBinding(Entry.TextProperty, new Binding("Password"));
                buttonLogin.SetBinding(Button.CommandProperty, new Binding("LoginCommand"));
                buttonRegister.SetBinding(Button.CommandProperty, new Binding("RegisterCommand"));
    
            }
    
            protected override void OnBindingContextChanged()
            {
                base.OnBindingContextChanged();
    
                // Fixed in next version of Xamarin.Forms. BindingContext is not properly set on ToolbarItem.
                var aboutItem = new ToolbarItem { Name = "About", BindingContext = BindingContext };
                aboutItem.SetBinding(ToolbarItem.CommandProperty, new Binding("ShowAboutPageCommand"));
    
                ToolbarItems.Add(aboutItem);
            }
        }
    }
    
  • yinshenyinshen CNMember

    BackgroundImage = "login_background.png";
    I find the solution just a moment after posting the question....

  • VictorHGarciaVictorHGarcia USUniversity ✭✭
    edited November 2014

    Hello @Alec.Tucker‌,

    Thanks for sharing the XAML solution.

    It just works really cool. However I added the images with the right sizes for all iOS devices and I only get the size of the one that is called into the property, so the screen shows a cropped image, not taking the retina images for different devices like: iphone 4s, 5s, 6, 6plus.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                           x:Class="MyApp.Screens.Init.Login"
                 BackgroundImage="Images/Login/background.png">
      <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
      </ContentPage.Padding>
    
      <StackLayout>
        <Label Text="Hello, XAML!"
           VerticalOptions="Center"
           Font="Bold, Large">
        </Label>
      </StackLayout>
    </ContentPage>
    

    Any idea how to make the Resources images from iOS on Visual Studio to use the @2x, etc automatically?

  • MitchMilamMitchMilam USMember ✭✭✭

    @VictorHGarcia and the @2x images are in the same folder as the normal images and have the same name but with the @2x added? That should work fine.

  • VictorHGarciaVictorHGarcia USUniversity ✭✭
    edited November 2014

    @MitchMilam‌ yes the images are in the same path. However I'm using the latest Xamarin.Forms 1.3 Public release (Pre), I'm not sure if it is because I'm using that version.

    Here a screenshot of my current iOS project structure.

  • MSiccDevMSiccDev CHMember ✭✭

    I am having similar problems as @VictorHGarcia‌.

    I have my background image file in 3 different sizes: background.png (320x480px), background@2x.png (640x960px) and background-568h@2x.png (640x1136px), all in the Resources Folder of my iOS project. I adopted the sizes from the splash screen images, which are used correctly.

    I attached the background image to the BackgroundImage property in XAML, and it loads the normal background and the @2x background just fine. However, on the iPhone 6, it does not load the proper -568h@2x image.

    Any suggestions on how to fix that welcome.

  • gbrennongbrennon BRMember
    edited December 2014

    Hey guys!

    So I'm studying Xamarin and trying to understand the BackgroundImage stuff...

    I've made a launcher image and with the same size of this launcher image, I've created a bg image!

    My problem is that the background image isn't fitting on the screen...

    Here is a screenshot from the simulator:

    Here is the screenshot from the background image:

  • Fawad.2183Fawad.2183 USMember

    @JasonASmith‌ and @GlennStephens.8830‌ , sorry for pinging you guys but I'm facing the same problem as @VictorHGarcia‌

    1) On an iPad it always picks the image asset for iPad Retina 2) It ALWAYS loads the portrait image despite me having specific image-Landscape~ipad and image-Portrait~ipad 3) On iPhone5, it picks up iPhone4 images despite of an image-568h@2x in the folder.

  • khovekhove USMember

    I have the same problems as @VictorHGarcia‌ and those above. I have the photos named as background@2x.png and background-568h@2x.png, but the iPhone 5s emulator uses the the @2x picture not the -568h@2x and therefore the background is tiled not filled with the image.

  • Can a Label have a backgroundImage? I want to put the text inside a border that our designers have created!

  • vinoth.3237vinoth.3237 USMember

    there is no option to set the backgroundImage for entry in xaml file is there any way no need of progrmatically?

  • @GlennStephens.8830
    Font = Font.SystemFontOfSize(20)
    Warning 1 'Xamarin.Forms.Label.Font' is obsolete: 'Please use the Font attributes which are on the class itself. Obsoleted in v1.3.0

    FontSize = 20

    ... but is it really the same? Looks like the same on our test-devices (Windows Phone 8.1, Android 4.4.2 ....)?

  • JVFLAJVFLA USMember ✭✭
    edited August 2015

    Is there one comprehensive guide somewhere? What image sizes do you typically need to make to support a good variety of mobile devices? Do you really need that many image versions or can you just scale (shrink) to fit?

    Edit: Just found http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/images/ but it seems to assume you have done mobile development, just not on Xamarin.

  • Vikram_BVikram_B USMember ✭✭

    Hi All,

    using System;

    using Xamarin.Forms;

    namespace Test_App
    {

    public class Test_Login : ContentPage
    {
    
    
        public Test_Login ()
        {
    
            //this.backgroundImage="background.png";  not working 
    
            Entry userName = new Entry () {
                Placeholder="Enter User Name"
            };
    
            Entry password = new Entry () {
                IsPassword=true,
                Placeholder="Enter password"
            };
    
            Button loginButton=new Button()
            {
                Text="Login"
            };
    
            Content = new StackLayout { 
                Children = {
                userName,password,loginButton
                }
            };
        }
    }
    

    }

    This is my sample code how to set the background code here .....

  • BuildCalcBuildCalc USMember ✭✭✭

    This is a bit late but I've built a library that has versions of the layout elements that support background images. Specifically, you can have the images be region-scaled (ex: NinePatch images or setting CapsInsets), aspect-filled, aspect-scaled, filled, or tiled.

    You can learn more about it here:

    https://forums.xamarin.com/discussion/58597/forms9patch-simplify-multi-device-image-management-in-your-pcl-xamarin-forms-mobile-apps#latest
    http://Forms9Patch.com
    Any feedback you may have would be welcome.

  • SaimShafqatSaimShafqat USMember

    Hi i have started working on xamarinforms last month and i am facing some UI issues.The background image property works fine for android but give null exception error for ios.i had tried all the possible ways mentioned in your blog but failed.Please help

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    @SaimShafqat Are you sure you placed the image at the right place for IOs?

  • SaimShafqatSaimShafqat USMember

    yes in drawable/resources folder

  • curtis.ehrhartcurtis.ehrhart USMember ✭✭

    Grid worked great for me! Thanks!

  • @AhmedAlejo said:
    For whoever stumps upon this and needs a solution, here it goes plain and simple:

    the best/simplest way to do an overlay is with the Grid.
    <Grid> <VisualElement /> <!-- Behind--> <VisualElement /> <!-- Front--> </Grid>
    So in a page

    <?xml version="1.0" encoding="utf-8" >
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="App.Shared.LoginScreen"
                 Padding="0">
        <Grid>
            <Image Source="LoginCoverImage.png" Aspect="AspectFill" />
            <StackLayout>
            <!-- Anything else you want to put on top of the background just use opacity wisely-->
            </StackLayout>
        </Grid>
    </ContentPage>
    

    Using a pages´ BackgroundImage isn´t flexible enough as it only allow file image paths. i.e FileImageSource

    Thanks This works no problem. Easiest solution!

  • JesseMockJesseMock USUniversity ✭✭

    No need for any of these custom solutions any longer. You can now just assign the background image to the page in code: this.BackgroundImage = "myimage.png";

  • MrRubinMrRubin USMember ✭✭

    @gbrennon - did you resolve your background issue? I'm seeing the same behavior.

  • LeonelUrraLeonelUrra USMember
    edited May 14

    In this code example background image and form centered with xaml

    <AbsoluteLayout>
    
            <Image x:Name="BgImage" Source="Uri_to_image"
                   Aspect="AspectFill"
                   AbsoluteLayout.LayoutBounds="0.0, 0.0, 1.0, 1.0"
                   AbsoluteLayout.LayoutFlags="All"/>
    
            <StackLayout
                AbsoluteLayout.LayoutBounds="0.0, 0.0, 1.0, 1.0"
                AbsoluteLayout.LayoutFlags="All">
    
                <Frame OutlineColor="Accent" 
                       WidthRequest="300" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Entry Placeholder="Name" />
                        <Entry Placeholder="Email"/>
                    </StackLayout>
                </Frame>
            </StackLayout>
    
    </AbsoluteLayout>
    

  • DanielJohnCauserDanielJohnCauser USUniversity

    Leonel Urra> @LeonelUrra said:

    In this code example background image and form centered with xaml

    <AbsoluteLayout>
    
            <Image x:Name="BgImage" Source="Uri_to_image"
                   Aspect="AspectFill"
                   AbsoluteLayout.LayoutBounds="0.0, 0.0, 1.0, 1.0"
                   AbsoluteLayout.LayoutFlags="All"/>
    
            <StackLayout
                AbsoluteLayout.LayoutBounds="0.0, 0.0, 1.0, 1.0"
                AbsoluteLayout.LayoutFlags="All">
    
                <Frame OutlineColor="Accent" 
                       WidthRequest="300" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Entry Placeholder="Name" />
                        <Entry Placeholder="Email"/>
                    </StackLayout>
                </Frame>
            </StackLayout>
    
    </AbsoluteLayout>
    

    Thank you Leonel, this was realy helpfull!

  • My solution:

    InitializeComponent();
    
    string bckImage = Device.OnPlatform(iOS: "sfondo.png", Android: "sfondo", WinPhone: "Assets/sfondo.png");
    
            BackgroundImage = bckImage;
    
Sign In or Register to comment.