Xamarin margins are different between two resolutions (devices) - xaml

Question

I have a page in xamarin with a couple of frames, all with an image (color) and text. However, i'm facing the problem that the margins of the images (colors) look different on different phones (resolutions). As you can see on the image below, the images are in the right position on the Galaxy S8 (resolution 1440x2960) and at the wrong position on the Galaxy S10e (resolution 1080 x 2280).
I am using the following code for the frames:
<Grid ColumnSpacing="12.5" RowSpacing="12.5" Padding="10" HeightRequest="500">
<Grid.RowDefinitions>
<RowDefinition Height="0.8*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame x:Name="frame_Sport" Grid.Row="2" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sport_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" >
<Label Text=" Sport" FontSize="18"/>
</StackLayout>
<StackLayout Orientation="Vertical" >
<Label x:Name="txt_Sport" FontSize="18"/>
</StackLayout>
<Image Source="mark_green.png" Scale="0.17" Margin="-110,-137,0,0"/>
</StackLayout>
</Frame>
<Frame x:Name="frame_Voeding" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Label Text=" Voeding" FontSize="18" />
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-0.6"/>
<Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-0.6"/>
<Image Source="mark_red.png" Scale="0.17" Margin="-110,-280,0,0"/>
</StackLayout>
</Frame>
<Frame x:Name="frame_Slaap" Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Slaap_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" >
<Label Text=" Slaap" FontSize="18" />
</StackLayout>
<StackLayout Orientation="Vertical">
<Label x:Name="txt_Slaap" FontSize="18" />
</StackLayout>
<Image Source="mark_blue.png" Scale="0.17" Margin="-110,-137,0,0"/>
</StackLayout>
</Frame>
</Grid>
Why are the images (colors) looking different on both phones, how do I fix this?

Answer 1

The values for Margin are in absolute units (pixels).
The Frame which contains the StackLayout has a different absolute width on every device. Therefore your positioning of the icon will differ if the resolution or dpi differs.
In your case I would create a Horizontal Stacklayout with the Image and the label like that:
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout Orientation="Horizontal">
<Image Source="mark_red.png" Scale="0.17"/>
<Label Text="Voeding" FontSize="18" />
</StackLayout>
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
...
</StackLayout>

Answer 2

I have a page in xamarin with a couple of frames, all with an image (color) and text. However, I'm facing the problem that the margins of the images (colors) look different on different phones (resolutions). As you can see on the image below, the images are in the right position on the Galaxy S8 (resolution 1440x2960) and at the wrong position on the Galaxy S10e (resolution 1080 x 2280).
The reason this is happening is that different devices have a different density. When it comes to Margin it is a double value and Xamarin Forms converts this double values into platform specific types (for eg Dp's, Points) respectively. Hence every device responds to the same margin in a different way based on its own size and density.
In the same way, density also affects the colour. The human perception for colour changes if the device has a denser pixels even though it is the same color but it looks a little different to us! Basically, The denser the pixels are in your device the more vivid the colour is to the naked eye.
Now coming back to the issue the reason your Margin is looking different is the same reason I explained above, Now to overcome this issue you might want to either remove the StackLayout use Grid instead and define a proper Column definition in a way that they align properly.
<Grid>
<Grid.ColumnDefinitions> <--<Define these as they suit you>-->
.
.
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
<Label Grid.Column="1" Text="Voeding" FontSize="18" />
</Grid>
Or Increase the Spacing property of the StackLayout so it adds a little extra space between the Image and the Label:
<StackLayout Orientation="Horizontal" Spacing="10"> <--<Default spacing is 6>-->
<Image Source="mark_red.png" Scale="0.17"/>
<Label Text="Voeding" FontSize="18" />
</StackLayout>
Update:
Your XAML should look like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
<Label Grid.Column="1" Text="Voeding" FontSize="18" />
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" >
<Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-3"/>
<Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-3"/>
</StackLayout>
</Grid>