xaml - 如何调整 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 S8)上,页面如下所示:
但在另一部手机(三星 Galaxy S10)上,页面如下所示:
当然,第二张照片不是我想要的样子。如何制作此代码,使其看起来与任何设备上的第一张图片相同?当我编写页面代码时,我在我的三星 Galaxy S8 上执行此操作,并不知道它在另一部手机上看起来会大不相同。我不知道如何才能使它在任何设备上看起来都一样。
解决方案
您可以将 4 行 2 列的网格包装到 ScrollView 中。然后将框架放入网格的单元格中。
您可以尝试以下代码:
<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>
推荐阅读
- javascript - 有没有办法让 div 从扩展的 div 左右浮动?
- javascript - 如何传入 Tesseract 选项进行页面分割?
- drools - 如何在 Kie(RedHat 决策管理器)中将决策服务作为无状态会话调用
- reactjs - 上下文 API 组件WillUnmount
- powershell - 如何使用 get-aduser 命令中的多个 where-object 条件获取“那些被排除的用户”的报告?
- python-3.x - 如何将唯一标识符列添加到熊猫数据框中?
- sql - SQL Server:当条件匹配且不重复时从第二个表中获取数据
- angular - 使用表单数组中另一个控件的值的最大验证器值
- javascript - 函数内的 fullcalendar-4
- c++ - 安装包时 vcpkg 找不到 cmake.cmd