CODEWITHSUNDEEP
xamlxamarinxamarin.forms
TheDeveloper
TheDeveloper

Reputation: 1217

Xamarin forms: setting up a background image

I want to setup a background image for a page. Right now I am using

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="M.LaunchPage"
        Title ="M" BackgroundImage="Mars.jpg">
    <ContentPage.Content> 
      <StackLayout Padding="10,0,10,10" > 
        <Button VerticalOptions="CenterAndExpand" Text="Sign Up" TextColor="White" Clicked="OnSignUp" BackgroundColor="Maroon" />  
        <StackLayout Padding="10,0,10,10" Orientation="Horizontal" VerticalOptions="EndAndExpand" />
      </StackLayout> 
    </ContentPage.Content>
</ContentPage>

This works well but the image is being filled multiple times to fit the screen. Cn anyone suggest better code so that I can fit the image on the page perfectly?

Thanks.

Upvotes: 0

Views: 2701

Answers (2)

Rui Marinho
Rui Marinho

Reputation: 1712

You should use each platform specifications, for example in iOS you need to have [email protected] and [email protected],in our platform project in Forms you can specify from "Mars" it will pick the correct one.

On Android set the image in the correct dpi folder.

Upvotes: 1

SushiHangover
SushiHangover

Reputation: 74209

This is platform dependent, for example on iOS the following is used in the Form's iOS's PageRender:

View.BackgroundColor = UIColor.FromPatternImage(UIImage.FromBundle(bgImage));

The View.BackgroundColor will end up tiling your image when it is smaller the UIController's View dimensions as FromPatternImage is designed to be used with a small repeating pattern (for memory and draw performance reasons) and not full screen/page images.

In order for this auto-tiling not to happen, you would be to assign the background image in code based upon the device's screen resolution and page size at runtime and not statically assign it in XAML.

Note: You could bind the BackgroundImage property in a ViewModel where the calculations of which image to use could be done.

Upvotes: 1

Related Questions