Set screen's background image without distortion

How-to Discussions
1

Hi guys,

I’ve to set a background image for my app but I’m facing a problem: the image is in high resolution (1440 x 2560 px) but still distorted.

Example 1 (this one can be a little difficult to notice the distortion, but if you look close you will find what I mean):

file
Fe9RrvdxCy95-image-1488317358373.png430×764

Example 2 (in this case is very simple to see what I mean, since the entire image is distorted):

file
W8ink58XILWS-image-1488317383336.png429×764

I’m using this code to set my background (I already tried all values of StretchMode’s property):

<Image File="../Assets/Background.jpeg" Layer="Background" StretchMode="Fill" />

What can I do to solve this?

Thanks

2

Do you have a link to the image to see it? I think the problem is that you can’t use an image like that, because you have to take in account that each device has a different aspect ratio, so you can’t use only one image and expect to work across all devices. You have to separate the components in little images for each button, for example.

3

Here it is the background image:

file
6wlp9r4cROm5-image-1488318479672.jpeg1440×2560

Is there some way to set an image like that as background for all devices without distorting it? Like Instagram, LinkedIn, and so many others does it…

Thanks

4

You’ve set the image stretch mode to Fill, so you’re getting exactly what you’re asking for. From the docs: Fuse

Fill: The image is stretched to fill the available space. The aspect ratio is not retained.

You probably want to try UniformToFill to keep the aspect ratio of your image. Or, use an image that isn’t set up to fit 1:1 with the screen (because as Juani correctly comments above: there is no way you can expect it to work perfectly on all the different types of screen resolutions and layouts).

If I was putting that screen together, I would separate the image into different pieces:

  1. keep the city-scape as one image, then use UniformToFill on that and place it in the background, and

  2. place those three icons into a Grid and align them evenly spaced and docked to the top (with padding and margins).

That way, you can have those things laid out sensibly on a wide set of devices. Though, to confuse things even more: why do you have those three icons there, as part of your background image? As a user, I would certainly expect to be able to tap them.

5

Nope, there’s no way that would work. You have to separate the image at least in three parts: 1 for the upper black bar, the other for the Rio background and the third one for the bottom black bar. Then, you can make a Stack Panel with three Panels (or a Grid) and maybe in the Middle Panel use an ImageFill instead of just an Image, something like:

<StackPanel>
  <Panel Color="#000" Alignment="Top">
    <Image File="../Assets/topBar.png" StretchMode="PixelPrecise">
  </Panel>
  <Panel>
    <ImageFill File="../Assets/Rio.jpg" />
  </Panel>
  <Panel Color="#000" Alignment="Bottom">
    <Image File="../Assets/bottomBar.png" StretchMode="PixelPrecise">
  </Panel>
</StackPanel>
6

Thanks @bent. I already had tried UniformToFill too and when I use it I got the Top and Bottom cropped :frowning:

Maybe the image size? How it works exactly? Should a unique image works for all devices sizes?

7

Yes, UniformToFill will stretch your image but keep the aspect. No, there is no way one image can work for all devices out there, and no, you shouldn’t include a bunch of different images to account for it. Split your background up into pieces with code.

Please re-read both mine and Juani’s posts in this thread, as they (as well as the documentation I linked to above) will explain why. :slight_smile: You simply can’t use one single image to fit all possible combinations of resolutions and aspect ratios out there – it would be a little like expecting that a single image on a website will look perfectly stretched (without losing its aspect ratio) on all computer screens out there. Can’t be done. :slight_smile:

8

I divided the image in three parts (ScreenTop.jpeg, Background.jpeg and ScreenBottom.jpeg) as you recommended earlier and here is the final solution:

<Page ux:Class="Login">

  <Router ux:Dependency="router" />

  <JavaScript File="Login.js" />

    <DockPanel>

        <WhileKeyboardVisible>
          <Change logoImage.Width="80" Duration=".2" DurationBack=".2" />
          <Change logoImage.Height="77" Duration=".2" DurationBack=".2" />
          <Change showButtons.Value="false" Duration=".2" DurationBack=".2" />
          <Change loginForm.ItemSpacing="10" Duration=".2" DurationBack=".2" />
          <Change screenTop.Value="false" Duration=".2" DurationBack=".2" />
          <Change screenBottom.Value="false" Duration=".2" DurationBack=".2" />
        </WhileKeyboardVisible>

        <ModalJS ux:Global="Modal" />

        <Image File="../Assets/Background.jpeg" Layer="Background" StretchMode="UniformToFill" />

        <WhileTrue ux:Name="screenTop" Value="true">
            <StackPanel Dock="Top">
                <Image File="../Assets/ScreenTop.jpeg" />
            </StackPanel>
        </WhileTrue>

        <DockPanel>

        	<StackPanel ux:Name="logo" Dock="Top" Orientation="Vertical" Margin="0,20,0,0" ContentAlignment="Center" Visibility="Visible">
			    <Image ux:Name="logoImage" File="../Assets/LogoVertical.png" Alignment="VerticalCenter" Width="110" Height="106" />
        	</StackPanel>

            <Rectangle Margin="30,20,30,20">
                <Stroke Color="White" Width="3" />
                <StackPanel ux:Name="loginForm" ItemSpacing="20" ContentAlignment="Center" Margin="20">
                    <DockPanel>
                        <Image Dock="Left" File="../Assets/FieldCPF.png" />
                        <ZFValidationInput Value="{email}" JSValidator="../Components/ZFEmailInput.js" InputHint="Email" PlaceholderText="e-mail" />
                    </DockPanel>
                    <DockPanel>
                        <Image Dock="Left" File="../Assets/FieldCPF.png" />
                        <ZFValidationInput Value="{password}" JSValidator="../Components/ZFPasswordInput.js" PlaceholderText="senha (6 caracteres)" IsPassword="true" />
                    </DockPanel>
                </StackPanel>
            </Rectangle>

            <WhileTrue ux:Name="showButtons" Value="true">
                <StackPanel Alignment="VerticalCenter" Dock="Bottom" Margin="20,0,20,50">
      				<Grid ColumnCount="2">
                        <ZFButton ux:Name="signupButton" Text="Novo cadastro" BackgroundImage="../Assets/NegativeButton.png" Clicked="{goToSignupPage}" />
                        <ZFButton ux:Name="loginButton" Text="Login" BackgroundImage="../Assets/PositiveButton.png" Clicked="{login}"/>
      				</Grid>
      			</StackPanel>
	        </WhileTrue>

        </DockPanel>

        <WhileTrue ux:Name="screenBottom" Value="true">
            <StackPanel Dock="Bottom">
                <Image File="../Assets/ScreenBottom.jpeg" />
            </StackPanel>
        </WhileTrue>

    </DockPanel>

</Page>