如何调整xaml文件以适合任何设备

我在xamarin中有一个页面，其中包含以下xaml代码：

<ScrollView>
        <StackLayout>
            <AbsoluteLayout x:Name="CompleteLayout" VerticalOptions="FillAndExpand" Scale="1">
                
                <Frame HeightRequest="575" TranslationX="500"/>
                <Frame x:Name="frame_Sport" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Sport_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">

                            <Label Text="    Sport" FontSize="18"/>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Sport" FontSize="18" TranslationY="2.5"/>
                    </StackLayout>
                    <Image Source="mark_green.png" Scale="0.17" TranslationX="-55" TranslationY="-135"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Voeding" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="176" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Voeding_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">
                        <Label Text="    Voeding" FontSize="18"/>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Voeding1" FontSize="18" TranslationY="2.5"/>
                        <Label x:Name="txt_Voeding2" FontSize="18" TranslationY="15"/>
                        <Label x:Name="txt_Voeding3" FontSize="18" TranslationY="27.5"/>
                        <Label x:Name="txt_Voeding4" FontSize="18" TranslationY="40"/>
                        <Label x:Name="txt_Voeding5" FontSize="18" TranslationY="52.5"/>
                        <Label x:Name="txt_Voeding6" FontSize="18" TranslationY="65"/>
                    </StackLayout>
                    <Image Source="mark_red.png" Scale="0.17" TranslationX="-55" TranslationY="-205"/>
                </StackLayout>
            </Frame>


            <Frame x:Name="frame_Slaap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="12.5,495,0,0" HeightRequest="60" WidthRequest="120">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Slaap_Clicked"/>
                </Frame.GestureRecognizers>
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal" Spacing="-10">
                            <Label Text="    Slaap" FontSize="18" />
                        </StackLayout>
                    <StackLayout Orientation="Vertical" Spacing="-10" TranslationX="12.5">
                        <Label x:Name="txt_Slaap" FontSize="18" TranslationY="2.5"/>
                    </StackLayout>
                    <Image Source="mark_blue.png" Scale="0.17" TranslationX="-55" TranslationY="-135"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Frequentie" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationX="12.5" TranslationY="15" HeightRequest="30" WidthRequest="295">
                <StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
                    <Label Text="Volg schema zoveel keer per week" FontSize="17" TranslationY="-10" XAlign="Center" YAlign="Start"/>
                    <Label x:Name="lbl_Frequentie" FontSize="22" XAlign="Center" TranslationY="-15" YAlign="End" TextColor="#3BA0CB"/>
                </StackLayout>
            </Frame>

            <Frame x:Name="frame_Overzichtscirkel" TranslationX="12.5" TranslationY="100" WidthRequest="295" HeightRequest="225">
                    <gauge:SfCircularGauge VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Scale="1.1">
                    <gauge:SfCircularGauge.Headers>
                            <gauge:Header x:Name="DiagramHeader" TextSize="32" Position="0.5,0.55" ForegroundColor="#ffb342">
                            </gauge:Header>
                    </gauge:SfCircularGauge.Headers>
                        
                        <gauge:SfCircularGauge.Scales>
                            
                            <gauge:Scale ScaleStartOffset="0.8" ScaleEndOffset="0.75" LabelOffset="0.95" LabelPostfix=":00" ShowLastLabel = "False" StartValue = "00" EndValue = "24" Interval ="6" MinorTicksPerInterval = "5" StartAngle = "270" SweepAngle = "360">

                                <gauge:Scale.Ranges>
                                    <gauge:Range x:Name="SportRange"  Offset="0.8" Color="#91f297" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding1Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding2Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding3Range" Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding4Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding5Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="Voeding6Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                                    <gauge:Range x:Name="SlaapRange1"   Offset="0.8" Color="#3973ce" Thickness="-1000"/>
                                    <gauge:Range x:Name="SlaapRange2" Offset="0.8" Color="#3973ce" Thickness="25"/>
                                </gauge:Scale.Ranges>

                                <gauge:Scale.Pointers>
                                    <gauge:MarkerPointer x:Name="LokaleTijdRange" Color="#ffb342"  MarkerShape="Rectangle" MarkerHeight="5" MarkerWidth="25" Offset="0.8"/>
                                </gauge:Scale.Pointers>


                                <gauge:Scale.MajorTickSettings>
                                    <gauge:TickSettings StartOffset="0.75" EndOffset="0.6" Thickness="1"/>
                                </gauge:Scale.MajorTickSettings>

                                <gauge:Scale.MinorTickSettings>
                                    <gauge:TickSettings StartOffset="0.75" EndOffset="0.7" Thickness="1"/>
                                </gauge:Scale.MinorTickSettings>

                            </gauge:Scale>

                        </gauge:SfCircularGauge.Scales>

                </gauge:SfCircularGauge>
            </Frame>
            </AbsoluteLayout>
        </StackLayout>
</ScrollView>

但在另一款手机（三星Galaxy S10）上，页面如下所示：


当然，第二张照片不是我想要的样子。如何使此代码看起来与任何设备上的第一张图片相同？当我编写页面代码时，我在我的三星Galaxy S8上这样做，不知道它在另一部手机上看起来会有很大的不同。我不知道如何才能使它在任何设备上看起来都一样。
您可以在ScrollView中包装一个包含4行和2列的网格。然后将框架放入网格的单元格中

您可以尝试以下代码：

<ScrollView>
    <Grid ColumnSpacing="5" RowSpacing="5" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Frame x:Name="frame_Frequentie" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                <Label Text="Volg schema zoveel keer per week" FontSize="17" XAlign="Center" YAlign="Start"/>
                <Label x:Name="lbl_Frequentie" FontSize="22" XAlign="Center" YAlign="End" TextColor="#3BA0CB"/>
            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Overzichtscirkel" Grid.Row="1" Grid.ColumnSpan="2" >
            <gauge:SfCircularGauge VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Scale="1.0">
                <gauge:SfCircularGauge.Headers>
                    <gauge:Header x:Name="DiagramHeader" TextSize="32" Position="0.5,0.55" ForegroundColor="#ffb342">
                    </gauge:Header>
                </gauge:SfCircularGauge.Headers>

                <gauge:SfCircularGauge.Scales>

                    <gauge:Scale ScaleStartOffset="0.8" ScaleEndOffset="0.75" LabelOffset="0.95" LabelPostfix=":00" ShowLastLabel = "False" StartValue = "00" EndValue = "24" Interval ="6" MinorTicksPerInterval = "5" StartAngle = "270" SweepAngle = "360">

                        <gauge:Scale.Ranges>
                            <gauge:Range x:Name="SportRange"  Offset="0.8" Color="#91f297" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding1Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding2Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding3Range" Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding4Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding5Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="Voeding6Range"  Offset="0.8" Color="#e57578" Thickness="-1000"/>
                            <gauge:Range x:Name="SlaapRange1"   Offset="0.8" Color="#3973ce" Thickness="-1000"/>
                            <gauge:Range x:Name="SlaapRange2" Offset="0.8" Color="#3973ce" Thickness="25"/>
                        </gauge:Scale.Ranges>

                        <gauge:Scale.Pointers>
                            <gauge:MarkerPointer x:Name="LokaleTijdRange" Color="#ffb342"  MarkerShape="Rectangle" MarkerHeight="5" MarkerWidth="25" Offset="0.8"/>
                        </gauge:Scale.Pointers>


                        <gauge:Scale.MajorTickSettings>
                            <gauge:TickSettings StartOffset="0.75" EndOffset="0.6" Thickness="1"/>
                        </gauge:Scale.MajorTickSettings>

                        <gauge:Scale.MinorTickSettings>
                            <gauge:TickSettings StartOffset="0.75" EndOffset="0.7" Thickness="1"/>
                        </gauge:Scale.MinorTickSettings>

                    </gauge:Scale>

                </gauge:SfCircularGauge.Scales>

            </gauge:SfCircularGauge>
        </Frame>

        <Frame x:Name="frame_Sport" Grid.Row="2" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <Frame.GestureRecognizers>
                <TapGestureRecognizer />
            </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>

            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Voeding" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" >
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
                <Label Text="    Voeding" FontSize="18" />
                <Label x:Name="txt_Voeding1" FontSize="18" />
                <Label x:Name="txt_Voeding2" FontSize="18" />
                <Label x:Name="txt_Voeding3" FontSize="18" />
                <Label x:Name="txt_Voeding4" FontSize="18" />
                <Label x:Name="txt_Voeding5" FontSize="18" />
                <Label x:Name="txt_Voeding6" FontSize="18" />
            </StackLayout>
        </Frame>

        <Frame x:Name="frame_Slaap" Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <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>
            </StackLayout>
        </Frame>

    </Grid>
</ScrollView>


使用带行和列的布局，而不是绝对布局

。此外，您可能还应该简化布局。有几个不必要的

StackLayout

s可以删除。但是我不知道如何在我的代码中实现网格。谢谢你的回复！在我改变了一些价值观之后，它工作得很好！文本前面的彩色图像只有一个问题。在我的设备上看起来像这样，在另一部手机上看起来像这样。我用边距来定位这些图像，这怎么可能呢？这是3帧图像的代码：知道为什么吗？