Поля Xamarin различаются между двумя разрешениями (устройства)

Question

У меня есть страница в xamarin с парой кадров, все с изображением (цвет) и текстом.Тем не менее, я сталкиваюсь с проблемой, что поля изображения (цвета) выглядят по-разному на разных телефонах (разрешения).Как вы можете видеть на изображении ниже, изображения находятся в правильном положении на Galaxy S8 (разрешение 1440x2960) и в неправильном положении на Galaxy S10e (разрешение 1080 x 2280).

Я использую следующий код для кадров:

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

Почему изображения (цвета) выглядят по-разному наоба телефона, как это исправить?

Answer 1

У меня есть страница в xamarin с парой кадров, все с изображением (цвет) и текстом. Однако я сталкиваюсь с проблемой, что поля изображения (цвета) выглядят по-разному на разных телефонах (разрешения). Как вы можете видеть на изображении ниже, изображения находятся в правильном положении на Galaxy S8 (разрешение 1440x2960) и в неправильном положении на Galaxy S10e (разрешение 1080 x 2280).

Причина, по которой это происходит, заключается в том, что разные устройства имеют разную плотность. Когда дело доходит до Margin, это двойное значение, и Xamarin Forms преобразует эти двойные значения в специфичные для платформы типы (например, Dp's, Points) соответственно. Следовательно, каждое устройство реагирует на один и тот же запас по-разному в зависимости от его размера и плотности. Таким же образом плотность также влияет на цвет. Человеческое восприятие цвета меняется, если устройство имеет более плотные пиксели, даже если он того же цвета, но выглядит для нас немного иначе! В основном, чем плотнее пиксели в вашем устройстве, тем ярче цвет для невооруженного глаза.

Теперь вернемся к вопросу, причина, по которой ваша маржа выглядит иначе, - та же самая причина, которую я объяснил выше. Теперь, чтобы преодолеть эту проблему, вы можете либо удалить StackLayout использование Grid вместо этого и определить правильное определение столбца. таким образом, чтобы они правильно выровнялись.

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

Или увеличьте свойство Spacing в StackLayout, чтобы добавить немного дополнительного пространства между изображением и меткой:

 <StackLayout Orientation="Horizontal" Spacing="10"> <--<Default spacing is 6>-->
    <Image Source="mark_red.png" Scale="0.17"/>
    <Label Text="Voeding" FontSize="18" />
</StackLayout>

Обновление:

Ваш XAML должен выглядеть так:

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

Answer 2

Значения Margin указаны в абсолютных единицах (пикселях).

Фрейм, содержащий StackLayout, имеет разную абсолютную ширину на каждом устройстве. Поэтому ваше расположение значка будет отличаться, если разрешение или разрешение на дюйм отличаются.

В вашем случае я бы создал горизонтальный макет стека с изображением и такой меткой:

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