Set screen's background image without distortion

Leandro_Sehnem_Borto · February 28, 2017, 9:35pm

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):

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

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

Juani_Serra · February 28, 2017, 9:41pm

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.

Leandro_Sehnem_Borto · February 28, 2017, 9:51pm

Here it is the background image:

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

Bent · February 28, 2017, 9:52pm

You’ve set the image stretch mode to Fill, so you’re getting exactly what you’re asking for. From the docs: https://www.fusetools.com/docs/fuse/controls/image/stretchmode

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:

keep the city-scape as one image, then use UniformToFill on that and place it in the background, and
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.

Juani_Serra · February 28, 2017, 9:57pm

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>

Leandro_Sehnem_Borto · February 28, 2017, 10:00pm

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

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

Bent · February 28, 2017, 10:03pm

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. 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.

Leandro_Sehnem_Borto · February 28, 2017, 10:45pm

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>