Question

我正在尝试制作一个包含信息、文本框、复选框等列表的页面。虽然它在一个分辨率下看起来不错，但当我增加分辨率或 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>

Answer 1

您可以通过转换器根据屏幕大小设置元素的大小。

您可以使用 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

有关更多代码，您可以查看我之前完成的示例。 Resizing frame and controls according to device size .Suggestions?

如何在屏幕分辨率/dpi 更改时放大/缩小 xamarin.forms 的元素？

1 个答案: