Блог

У меня есть страница в xamarin с парой фреймов, все с изображением (цветным) и текстом. Однако я сталкиваюсь с проблемой, заключающейся в том, что поля изображений (цвета) выглядят по-разному на разных телефонах (разрешениях). Как вы можете видеть на изображении ниже, изображения находятся в правильном положении на Galaxy S8 (разрешение 1440×2960) и в неправильном положении на 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>
  

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

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

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

В вашем случае я бы создал горизонтальное 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>
  

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

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

Теперь, возвращаясь к проблеме, причина, по которой ваше поле выглядит по-разному, та же, что я объяснил выше, теперь, чтобы преодолеть эту проблему, вы можете либо удалить вместо этого StackLayout use 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>