xamarin.forms - 如何在屏幕分辨率/dpi 更改时放大/缩小 xamarin.forms 的元素?
问题描述
我正在尝试制作一个包含信息列表、文本框、复选框等的页面。虽然它在一个分辨率上看起来不错,但当我增加分辨率或 dpi 时,包括字体大小和文本框在内的所有内容都会变得巨大并相互重叠。有什么建议可以让我的应用更具响应性吗?
例如信息列表:
<Grid
Margin="10,0,0,0"
ColumnSpacing="0"
HorizontalOptions="End"
VerticalOptions="FillAndExpand"
ColumnDefinitions="*,auto,*,*,*,*,*,*,*,*"
RowDefinitions="25,25,25,25,25,25,25,50,50,50">
<StackLayout Grid.Column="0" HorizontalOptions="Start">
<Label Text="SYMPTOM"/>
<Label Text="CONTACT NAME"/>
<Label Text="CONTACT NO"/>
<Label Text="MACHINES NO" />
<Label Text="SERIAL NO"/>
<Label Text="CUSTOMER NO"/>
<Label Text="ADD ADDRESS"/>
<Label Text="NOTE"/>
<Label Text="RECEIVED BY" Margin="0,25,0,15"/>
<Label Text="CONTACT NO" Margin="0,20,0,15"/>
</StackLayout>
<StackLayout Grid.Column="2" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="20,0,0,0">
<Label Text="HOSE LEAKING"/>
<Label Text="JORDAN"/>
<Label Text="0163218547"/>
<Label Text="MACHINES AB"/>
<Label Text="SN001244323-01"/>
<Label Text="P0200045"/>
<Label Text="ADD ADDRESS"/>
<Label Text="THIS IS JUST FOR TESTING"/>
</StackLayout>
</Grid>
文本框:
<StackLayout
Grid.Row="1"
Grid.Column="4"
Grid.ColumnSpan="3"
Orientation="Horizontal"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
<StackLayout Margin="0,8,0,0">
<CheckBox IsChecked="False" Color="Green"/>
</StackLayout>
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Start"
WidthRequest="100"
Margin="0,15,0,0">
<Label Text="MOBILE SERVICE" VerticalOptions="Center" FontSize="12"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
<Frame
x:Name="MobileFrame"
BackgroundColor="#111111"
BorderColor="#434343"
HasShadow="False"
HeightRequest="7">
<OnPlatform x:TypeArguments="View">
<OnPlatform.Android>
<customstyle:EntryBorderless
x:Name="Mobile_Service"
Margin="-6,-50,15,-50"
HorizontalTextAlignment="Start"
WidthRequest="80"
HeightRequest="120"
Text="2"
IsReadOnly="True"
TextColor="#FFFFFF" />
</OnPlatform.Android>
</OnPlatform>
</Frame>
</StackLayout>
</StackLayout>
解决方案
您可以通过 Converter 根据屏幕大小设置元素的大小。
您可以使用Xamarin.Essentials
来获取屏幕尺寸。
// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
// Width (in pixels)
var width = mainDisplayInfo.Width;
// Height (in pixels)
var height = mainDisplayInfo.Height;
然后使用 Converter 来设置具体的值。
public class MyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (double)value / 3.0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
关于转换器的绑定值,请查看以下链接:https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters
有关更多代码,您可以查看我之前完成的示例。根据设备大小调整框架和控件的大小。建议?
推荐阅读
- c++ - C++ 文件系统中是否有等效的 Win32 API MoveFileEx()?
- php - 如何使用 javascript 和 php 在邮件中获取客户详细信息和订单?
- stored-procedures - 雪花存储过程从 dbt 失败
- java - 为 azure-storage-blob 创建 BlobServiceClient 时出现 IllegalStateException
- html - Bootstrap 5 导航栏
- c++ - 不递归迭代
- java - 放心 - 如何创建新的 zip 文件并保存每次运行的 API 响应
- gitlab - Gitlab:不要将所有标签从问题复制到合并请求
- tfs - 在 java 代码中查找 Shelveset 文件列表(带有 ; 的 URL)
- ios - 离子5