CODEWITHSUNDEEP
c#iosxamarinxamarin.iosxamarin.forms
Harold Hemms
Harold Hemms

Reputation: 44

Background image PCL xamarin forms iOS zoomed in

I'm currently working on a PCL project in Xamarin forms and started working on the iOS implementation because I finished the Android one. The problem I'm having is that the background image of my views are zoomed in (as are the icons on the toolbar).It's probably using the full sized image so I'd expect to use something like Aspect=Aspect.AspectFit but since I'm using PCL code I used Background= Height>Width ? <picture_string_portrait> : <picture_string_landscape>, which expects a string. I can't seem to figure out how to fix this +I can only share default code since this is for a company I'm currently working for (so no screenies aswell I'm afraid).

This is a part of my pcl code (myview.xaml.cs) which hits on load and on orientationchange. In Android it scales nicely but in iOS it doesn't. 

private void OnSizeChanged(object sender, EventArgs eventArgs)
{

     BackgroundImage = Height > Width ? "background_portrait.jpg" : "background_landscape.jpg";

 }

If this is a noob question I apologize but I've done my fair share of googling and can't seem to find anything usefull. A PCL solution that works for all would be appreciated.

Thanks in advance!

Upvotes: 0

Views: 855

Answers (1)

Steven Thewissen
Steven Thewissen

Reputation: 2981

The problem with ContentPage.BackgroundImage is that you can't control it's aspect ratio. Seeing as how devices come in all sizes and shapes an alternate solution might work better for you. You could achieve the same result by using an Image inside the ContentPage and playing around with its Aspect. One way would be with an AbsoluteLayout like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Sample">
    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="background.png" Aspect="AspectFill"/>
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            // Content
        </StackLayout>                   
    </AbsoluteLayout>             
</ContentPage>

Another would be with a RelativeLayout like in this sample:

http://dotnetbyexample.blogspot.nl/2015/02/using-full-size-none-stretched.html

Upvotes: 1

Related Questions