images sizes on differents screen resolutions

How-to Discussions
1

Hello
i got this problem when i started testing on a device with a small screen !

on the preview the result is fine :

file

but when i change the device on the preview , the screen width is bigger , this happens :

file

the problem seems that when screen width change , the image mask try to be responsive and change the size !

this is the code for the bottom part :

<Grid Alignment="Bottom" Opacity="1">
      <DockPanel Height="60" Dock="Bottom" Width="100%">
  			<Image ux:Name="Heart_empty" Opacity="1" File="Assests/Icons/Heart.png" Anchor="100%,100%" Margin="28,0" Alignment="Right" Layer="Overlay">
        </Image>

        <Panel Width="5%" Dock="Left" Color="#d74553" />
        <Panel Dock="Left" Color="#d74553" Alignment="Right" Width="16%">
  	    <Mask File="Assests/Icons/CircleMask.png" Mode="Alpha" />
  	</Panel>
        <Panel Width="5%" Dock="Left" Color="#d74553" />
        <Panel Dock="Left" Color="#d74553" Alignment="Right" Width="16%">
  	   <Mask File="Assests/Icons/CircleMask.png" Mode="Alpha" />
  	</Panel>
        <Panel Width="32%" Dock="Left" Color="#d74553" />
        <Panel Width="18%" Dock="Left" Color="#d74553" Opacity="1">
            <Mask File="Assests/Icons/HeartMask.png" Mode="Alpha" />
  	</Panel>
        <Panel Width="8%" Dock="Left" Color="#d74553" />

        <StackPanel ZOffset="2" Layer="Overlay" Orientation="Horizontal" ItemSpacing="78" Margin="97,0" Alignment="Left" Anchor="100%,100%">
        <Panel>
          <Circle Alignment="Left" Opacity="1" Width="60" Height="65" Layer="Overlay" Dock="Left" Margin="0, 0, 0, 0">
            <Icon File="Assests/Icons/copy.png" Size="24" Opacity="1" />
            <Stroke ux:Name="s" Width="2" Color="White" />
          </Circle>
        </Panel>
        <Panel>
            <Circle Alignment="Left" Opacity="1" Width="60" Height="65" Layer="Overlay" Dock="Left" Margin="0, 0, 0, 0">
            <Icon File="Assests/Icons/next.png" Size="24" Opacity="1" />
            <Stroke Width="2" Color="White" />
          </Circle>
        </Panel>
        </StackPanel>
		</DockPanel>
    </Grid>
2

In Fuse, layout is responsive. That concerns different resolutions, aspect and even densities.

If you have a complex structure like that, you want to test your layout on different devices and adjust code accordingly to accommodate all possible variations.

In short: avoid %, use pt and MultiDensityImageSource whenever possible.